/* ============================================
   DESIGN TOKENS
   ============================================ */

:root {

    /* ---------- COLOR ---------- */
    --color-ink: #171817;
    --color-forest: #243A34;
    --color-ivory: #F5F1E8;
    --color-stone: #E7E1D6;
    --color-brass: #A68A5B;
    --color-white: #FFFFFF;

    /* Text on light */
    --text-primary: var(--color-ink);
    --text-secondary: rgba(23, 24, 23, 0.68);
    --text-tertiary: rgba(23, 24, 23, 0.48);
    --text-accent: var(--color-brass);

    /* Text on dark */
    --text-on-dark: var(--color-ivory);
    --text-on-dark-2: rgba(245, 241, 232, 0.68);
    --text-on-dark-3: rgba(245, 241, 232, 0.42);

    /* Surfaces */
    --surface-base: var(--color-ivory);
    --surface-alt: var(--color-stone);
    --surface-dark: var(--color-ink);
    --surface-forest: var(--color-forest);
    --surface-white: var(--color-white);

    /* Borders & Rules */
    --rule-light: rgba(23, 24, 23, 0.12);
    --rule-medium: rgba(23, 24, 23, 0.22);
    --rule-dark: rgba(245, 241, 232, 0.14);
    --rule-brass: rgba(166, 138, 91, 0.5);

    /* Overlays */
    --overlay-hero: linear-gradient(90deg,
            rgba(15, 17, 16, 0.78) 0%,
            rgba(15, 17, 16, 0.45) 50%,
            rgba(15, 17, 16, 0.15) 100%);
    --overlay-hero-mobile: linear-gradient(180deg,
            rgba(15, 17, 16, 0.25) 0%,
            rgba(15, 17, 16, 0.7) 60%,
            rgba(15, 17, 16, 0.88) 100%);
    --overlay-center: linear-gradient(180deg,
            rgba(15, 17, 16, 0.55) 0%,
            rgba(15, 17, 16, 0.65) 100%);

    /* ---------- TYPOGRAPHY ---------- */
    --font-serif: "Cormorant Garamond", "Libre Baskerville", Georgia, serif;
    --font-sans: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Scale — fluid with clamp() */
    --fs-eyebrow: clamp(0.72rem, 0.7rem + 0.1vw, 0.8125rem);
    --fs-caption: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
    --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --fs-body-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
    --fs-lead: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);

    --fs-h6: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --fs-h5: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --fs-h4: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --fs-h3: clamp(1.875rem, 1.6rem + 1.4vw, 2.75rem);
    --fs-h2: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
    --fs-h1: clamp(3rem, 2.2rem + 4vw, 6rem);
    --fs-hero: clamp(2.75rem, 2rem + 3vw, 5rem);
    --fs-display: clamp(3rem, 2.25rem + 3.5vw, 6rem);


    --lh-tight: 0.95;
    --lh-snug: 1.05;
    --lh-normal: 1.2;
    --lh-relaxed: 1.6;
    --lh-loose: 1.75;

    --ls-eyebrow: 0.14em;
    --ls-tight: -0.02em;
    --ls-snug: -0.01em;

    /* ---------- SPACING ---------- */
    --space-1: 0.5rem;
    /* 8 */
    --space-2: 0.75rem;
    /* 12 */
    --space-3: 1rem;
    /* 16 */
    --space-4: 1.5rem;
    /* 24 */
    --space-5: 2rem;
    /* 32 */
    --space-6: 3rem;
    /* 48 */
    --space-7: 4rem;
    /* 64 */
    --space-8: 5rem;
    /* 80 */
    --space-9: 6rem;
    /* 96 */
    --space-10: 7.5rem;
    /* 120 */
    --space-11: 10rem;
    /* 160 */
    --space-12: 12.5rem;
    /* 200 */

    /* Section padding */
    --section-y: clamp(4rem, 8vw, 11.25rem);
    /* 64 → 180 */
    --section-y-tight: clamp(3.5rem, 6vw, 7.5rem);
    /* 56 → 120 */
    --section-y-loose: clamp(5rem, 10vw, 12.5rem);
    /* 80 → 200 */

    /* ---------- LAYOUT ---------- */
    --container-max: 1440px;
    --container-editorial: 1200px;
    --container-content: 760px;
    --container-read: 680px;
    --container-gutter: 4%;
    /* 92% width */

    /* ---------- RADIUS ---------- */
    --radius-none: 0;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* ---------- MOTION ---------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    --dur-fast: 180ms;
    --dur-base: 320ms;
    --dur-slow: 600ms;
    --dur-reveal: 900ms;

    /* ---------- Z-INDEX ---------- */
    --z-base: 1;
    --z-sticky: 100;
    --z-header: 200;
    --z-overlay: 500;
    --z-modal: 1000;
}