/* Design tokens — single source of truth for colors, type, spacing, motion.
   Phase 1: additive only. Existing styles keep working; new components opt in. */

:root {
    /* Brand colors */
    --ink: #000000;
    --ember: #E1421F;
    --stone: #B5A394;
    --cream: #F0E8DE;

    /* Derived */
    --ember-hover: color-mix(in oklch, var(--ember) 85%, var(--ink));
    --ember-soft:  color-mix(in oklch, var(--ember) 12%, var(--cream));
    --ink-muted:   color-mix(in oklch, var(--ink) 72%, var(--cream));
    --stone-soft:  color-mix(in oklch, var(--stone) 30%, var(--cream));
    --cream-deep:  color-mix(in oklch, var(--cream) 80%, var(--stone));

    /* Typography */
    --font-display: 'Bloomsbury Sans', Georgia, 'Times New Roman', serif;
    --font-body:    'PP Neue Montreal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1.125rem;
    --fs-lg:   1.375rem;
    --fs-xl:   1.75rem;
    --fs-2xl:  2.25rem;
    --fs-3xl:  3rem;
    --fs-4xl:  clamp(2.5rem, 6vw, 4rem);
    --fs-5xl:  clamp(3rem, 8vw, 5.5rem);

    --lh-tight: 1.1;
    --lh-snug:  1.3;
    --lh-body:  1.6;
    --lh-loose: 1.75;

    --measure: 65ch;

    /* Spacing (4px base) */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.5rem;
    --sp-6:  2rem;
    --sp-8:  3rem;
    --sp-10: 4rem;
    --sp-12: 6rem;
    --sp-16: 8rem;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Shadow */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.18);

    /* Motion */
    --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 400ms;

    /* Layout */
    --container-max: 1200px;
    --container-pad: clamp(1rem, 4vw, 2rem);

    /* Z-index scale */
    --z-base:    1;
    --z-sticky: 20;
    --z-nav:    30;
    --z-overlay:40;
    --z-modal:  50;
    --z-toast:  60;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
    }
}