:root {
    /* Backgrounds — warm dark browns, not cool slate */
    --color-bg-base:       #16140F;
    --color-bg-surface:    #1E1C16;
    --color-bg-elevated:   #27251C;
    --color-bg-subtle:     #2F2D23;

    /* Text — warm off-whites */
    --color-text-primary:   #F0EDE6;
    --color-text-secondary: #C4BFB5;
    --color-text-muted:     #A69F92;
    --color-text-disabled:  #5C5751;

    /* Accents */
    --color-accent-primary:        #2DBDD4;
    --color-accent-primary-hover:  #5CCFE0;
    --color-accent-secondary:      #CC8DB3;
    --color-accent-highlight-bg:   #4A2F1A;
    --color-accent-highlight-text: #F0C070;

    /* Status */
    --color-error: #FF7474; /* 7.01:1 on bg-base — AAA */

    /* Borders */
    --color-border-subtle:  #3A3830;
    --color-border-default: #4D4A40;
    --color-border-strong:  #6B6860;
    /* SC 1.4.11: accessible border for interactive controls (3:1 vs bg-base AND bg-elevated) */
    --color-border-ui:      #706E6B;

    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Lora', Georgia, serif;
    --font-sans:    'Inter', system-ui, sans-serif;

    /* Fluid type scale (375px → 1200px) */
    --font-size-xs:   clamp(0.75rem,   0.72rem  + 0.16vw, 0.875rem);
    --font-size-sm:   clamp(0.875rem,  0.84rem  + 0.18vw, 1rem);
    --font-size-base: clamp(1.0625rem, 1rem     + 0.33vw, 1.25rem);
    --font-size-md:   clamp(1.25rem,   1.18rem  + 0.37vw, 1.5rem);
    --font-size-lg:   clamp(1.5rem,    1.37rem  + 0.65vw, 2rem);
    --font-size-xl:   clamp(1.875rem,  1.67rem  + 1.03vw, 2.625rem);
    --font-size-2xl:  clamp(2.25rem,   1.95rem  + 1.5vw,  3.25rem);
    --font-size-3xl:  clamp(2.75rem,   2.3rem   + 2.24vw, 4rem);

    /* Line heights */
    --leading-tighter: 1.1;
    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-base:    1.6;
    --leading-loose:   1.8;

    /* Letter spacing */
    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.04em;
    --tracking-caps:    0.08em;

    /* Spacing (8px grid) */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;
    --space-32:  8rem;

    /* Fluid section spacing */
    --space-section-sm: clamp(2rem, 4vw, 3rem);
    --space-section-md: clamp(3rem, 6vw, 5rem);
    --space-section-lg: clamp(4rem, 8vw, 7rem);

    /* Layout */
    --max-width-text:    68ch;
    --max-width-content: 52rem;
    --max-width-wide:    72rem;

    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-pill: 100px;

    /* Shadows */
    --shadow-subtle: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-card:   0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
    --shadow-lifted: 0 8px 24px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4);

    /* Motion */
    --duration-fast:  150ms;
    --duration-base:  250ms;
    --duration-slow:  400ms;
    --ease-default:   cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}