/**
 * Site Variables — JS-CMS Generic
 * The site-builder generates a complete version during build.
 * These are sensible defaults.
 */
:root {
    /* Palette */
    --cms-primary: #2563eb;
    --cms-primary-light: #eff6ff;
    --cms-primary-dark: #1d4ed8;
    --cms-primary-rgb: 37, 99, 235;
    --cms-secondary: #64748b;
    --cms-accent: #f59e0b;
    --cms-text: #1e293b;
    --cms-text-light: #64748b;
    --cms-text-muted: #94a3b8;
    --cms-bg: #ffffff;
    --cms-bg-alt: #f8fafc;
    --cms-bg-dark: #0f172a;
    --cms-border: #e2e8f0;

    /* Typography */
    --cms-font: system-ui, -apple-system, sans-serif;
    --cms-font-heading: var(--cms-font);
    --cms-h1: clamp(27px, 3.8vw, 40px);
    --cms-h2: clamp(21px, 3vw, 30px);
    --cms-h3: clamp(17px, 2.2vw, 24px);
    --cms-h4: clamp(16px, 1.8vw, 20px);
    --cms-body: 15px;
    --cms-line-height: 1.7;
    --cms-line-height-heading: 1.2;
    --cms-font-weight-heading: 700;

    /* Layout */
    --cms-max-width: 1200px;
    --cms-max-width-narrow: 768px;
    --cms-header-height: 72px;

    /* Spacing */
    --cms-section-pad: 64px;
    --cms-gap-sm: 16px;
    --cms-gap-md: 24px;
    --cms-gap-lg: 32px;

    /* Effects */
    --cms-radius: 8px;
    --cms-radius-lg: 12px;
    --cms-shadow: 0 1px 3px rgba(0,0,0,0.1);
    --cms-transition: 0.3s ease;

    /* Design system tokens used by CMS templates and post components */
    --cms-ds-container: var(--container, var(--cms-max-width));
    --cms-ds-container-narrow: var(--container-narrow, var(--cms-max-width-narrow));
    --cms-ds-section-pad-none: 0px;
    --cms-ds-section-pad-sm: calc(var(--spacing-section, var(--cms-section-pad)) * 0.4);
    --cms-ds-section-pad-md: calc(var(--spacing-section, var(--cms-section-pad)) * 0.65);
    --cms-ds-section-pad-lg: var(--spacing-section, var(--cms-section-pad));
    --cms-ds-section-pad-xl: calc(var(--spacing-section, var(--cms-section-pad)) * 1.4);
    --cms-ds-gap-sm: var(--cms-gap-sm);
    --cms-ds-gap-md: var(--cms-gap-md);
    --cms-ds-gap-lg: var(--cms-gap-lg);
    --cms-ds-radius-sm: var(--radius-sm, var(--cms-radius));
    --cms-ds-radius-md: var(--radius, var(--cms-radius));
    --cms-ds-radius-lg: var(--radius-lg, var(--cms-radius-lg));
    --cms-ds-radius-full: var(--radius-full, 999px);
    --cms-ds-card-pad: clamp(16px, 2vw, 24px);
    --cms-ds-card-bg: var(--color-bg, var(--cms-bg));
    --cms-ds-card-bg-alt: var(--color-bg-alt, var(--cms-bg-alt));
    --cms-ds-card-bg-dark: var(--color-dark-bg, var(--cms-bg-dark));
    --cms-ds-card-border: var(--color-border, var(--cms-border));
    --cms-ds-card-shadow: var(--shadow, var(--cms-shadow));
    --cms-ds-text: var(--color-text, var(--cms-text));
    --cms-ds-muted: var(--color-text-muted, var(--cms-text-light));
    --cms-ds-accent: var(--color-accent, var(--cms-primary));
}