:root {
    /* Brand colors */
    --color-bg-dark: #1A1209;
    --color-bg-cream: #F6F3EE;
    --color-red-inferno: #4E0000;
    --color-cocoa: #594536;
    --color-dark: #292017;
    --color-taupe: #A99886;
    --color-beige: #EBDAC6;
    --color-brown: #937C66;
    --color-camel: #886644;
    --color-rose-gold: #B8967A;

    /* Semantic aliases */
    --color-primary: var(--color-red-inferno);
    --color-accent: var(--color-rose-gold);
    --color-text-light: var(--color-bg-cream);
    --color-text-dark: var(--color-dark);
    --color-text-muted: var(--color-taupe);

    /* Typography */
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Font sizes — matched to Figma V8 design */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-md: 1.125rem;    /* 18px */
    --text-lg: 1.25rem;     /* 20px */
    --text-xl: 1.5rem;      /* 24px */
    --text-2xl: 2rem;       /* 32px */
    --text-3xl: 3rem;       /* 48px */
    --text-4xl: 4rem;       /* 64px */

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-section: clamp(3.5rem, 2.5rem + 4vw, 6rem);

    /* Layout */
    --container-max: 1200px;
    --container-narrow: 800px;
    --container-padding: clamp(1rem, 0.5rem + 2vw, 2rem);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
}