:root {
    /* Colors: primary (brand slate) */
    --color-primary-50: #f4f5f7;
    --color-primary-100: #e8eaed;
    --color-primary-200: #d3d7dd;
    --color-primary-300: #b4bac3;
    --color-primary-400: #a2a9b4;
    --color-primary-500: #959ca7;
    --color-primary-600: #767d89;
    --color-primary-700: #5d636e;
    --color-primary-800: #444952;
    --color-primary-900: #2c3036;

    /* Colors: secondary (brand emerald) */
    --color-secondary-50: #ecfdf5;
    --color-secondary-100: #d1fae5;
    --color-secondary-200: #a7f3d0;
    --color-secondary-300: #6ee7b7;
    --color-secondary-400: #34d399;
    --color-secondary-500: #10b981;
    --color-secondary-600: #059669;
    --color-secondary-700: #047857;
    --color-secondary-800: #065f46;
    --color-secondary-900: #064e3b;

    /* Colors: accent (brand amber) */
    --color-accent-50: #fffbeb;
    --color-accent-100: #fef3c7;
    --color-accent-200: #fde68a;
    --color-accent-300: #fcd34d;
    --color-accent-400: #fbbf24;
    --color-accent-500: #f59e0b;
    --color-accent-600: #d97706;
    --color-accent-700: #b45309;
    --color-accent-800: #92400e;
    --color-accent-900: #78350f;

    /* Colors: highlight — alias of the amber accent ramp.
       DESIGN.md reserves amber for prices and highlights, and section
       stylesheets reference the highlight names; they resolve here so no
       section falls back to an invalid colour. */
    --color-highlight-50: var(--color-accent-50);
    --color-highlight-100: var(--color-accent-100);
    --color-highlight-200: var(--color-accent-200);
    --color-highlight-300: var(--color-accent-300);
    --color-highlight-400: var(--color-accent-400);
    --color-highlight-500: var(--color-accent-500);
    --color-highlight-600: var(--color-accent-600);
    --color-highlight-700: var(--color-accent-700);
    --color-highlight-800: var(--color-accent-800);
    --color-highlight-900: var(--color-accent-900);

    /* Colors: neutral (warm) */
    --color-neutral-50: #fafaf9;
    --color-neutral-100: #f5f5f4;
    --color-neutral-200: #e7e5e4;
    --color-neutral-300: #d6d3d1;
    --color-neutral-400: #a8a29e;
    --color-neutral-500: #78716c;
    --color-neutral-600: #57534e;
    --color-neutral-700: #44403c;
    --color-neutral-800: #292524;
    --color-neutral-900: #1c1917;

    /* Colors: semantic */
    --color-success: #16a34a;
    --color-warning: #d97706;
    --color-error: #dc2626;
    --color-info: #2563eb;

    /* Surface roles (light) */
    --color-bg: #fafaf9;
    --color-surface: #f5f5f4;
    --color-surface-elevated: #e7e5e4;
    /* A card lifted above the warm page background. */
    --color-surface-raised: #ffffff;
    --color-border: #d6d3d1;
    --color-text: #1c1917;
    --color-text-muted: #57534e;
    --color-action: #047857;
    --color-action-hover: #065f46;
    --color-on-action: #fafaf9;

    /* Surface roles (dark) */
    --color-bg-dark: #1c1917;
    --color-surface-dark: #292524;
    --color-surface-dark-elevated: #44403c;
    --color-border-dark: #57534e;
    --color-text-on-dark: #fafaf9;
    --color-text-muted-on-dark: #d6d3d1;

    /* Typography */
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --text-xs: 0.8rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.563rem;
    --text-2xl: 1.953rem;
    --text-3xl: 2.441rem;
    --text-4xl: 3.052rem;
    --letter-tighter: -0.04em;
    --letter-tight: -0.02em;
    --letter-normal: 0;
    --letter-wide: 0.05em;
    --leading-tight: 1.15;
    --leading-snug: 1.4;
    --leading-normal: 1.65;
    --measure: 65ch;

    /* Spacing */
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-section: clamp(4rem, 8vw, 7rem);

    /* Borders */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
    --shadow-md: 0 4px 12px rgba(28, 25, 23, 0.06);
    --shadow-lg: 0 8px 24px rgba(28, 25, 23, 0.08);
    --shadow-xl: 0 16px 48px rgba(28, 25, 23, 0.10);
    --shadow-inner: inset 0 1px 3px rgba(28, 25, 23, 0.06);
    --shadow-glow: 0 0 20px rgba(149, 156, 167, 0.15);

    /* Motion */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    --duration-slower: 700ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --container-max: 1280px;
    --container-narrow: 820px;
    --container-padding: 1.5rem;
    --nav-height: 72px;
    --header-height: var(--nav-height);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
        --duration-slower: 0ms;
    }
}