/* =========================================================================
   MEVAYU DESIGN TOKENS
   Single source of truth for colors, spacing, typography, motion.
   Two layers, in this order:
     Layer 1 — CANONICAL: verbatim from docs/06_DESIGN_TOKENS.md (v1.1).
               Use these for every NEW rule going forward.
     Layer 2 — LEGACY:    variables consumed by the current site's CSS.
               Preserved exactly so Sprint 1 does not shift any pixel.
               Each legacy value is documented against its canonical target
               (or flagged as an unresolved conflict) in README.md
               under "Known Technical Debt".
   ========================================================================= */

:root {

  /* -----------------------------------------------------------------------
     LAYER 1 · CANONICAL TOKENS (from docs/06_DESIGN_TOKENS.md)
     ----------------------------------------------------------------------- */

  /* Brand greens */
  --color-primary-950: #102114;
  --color-primary-900: #16291A;
  --color-primary-800: #1F3923;
  --color-primary-700: #2D4D31;
  --color-primary-600: #3B643F;
  --color-primary-500: #457345;
  --color-primary-400: #6A9B68;
  --color-primary-300: #93BC8E;
  --color-primary-200: #C6DFC3;
  --color-primary-100: #E9F3E7;

  /* Neutrals */
  --color-neutral-950: #171717;
  --color-neutral-900: #262626;
  --color-neutral-800: #404040;
  --color-neutral-700: #525252;
  --color-neutral-600: #737373;
  --color-neutral-500: #A3A3A3;
  --color-neutral-400: #D4D4D4;
  --color-neutral-300: #E5E5E5;
  --color-neutral-200: #F2F2F2;
  --color-neutral-100: #FAFAF8;

  /* Backgrounds */
  --color-bg-primary:   #FBFAF6;
  --color-bg-secondary: #F7F5EF;
  --color-bg-tertiary:  #F2EFE8;

  /* Accents (sparingly) */
  --color-gold:       #C59A45;
  --color-gold-light: #E8D3A7;
  --color-sage:       #A5B49C;
  --color-earth:      #9D8266;

  /* Semantic */
  --color-success: #3E7A43;
  --color-warning: #D49C26;
  --color-error:   #C65B4B;
  --color-info:    #4A6FA5;

  /* Typography */
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Poppins", Inter, Arial, sans-serif;

  --text-display-xl: 4.5rem;
  --text-display-lg: 3.5rem;
  --text-h1:         3rem;
  --text-h2:         2.5rem;
  --text-h3:         2rem;
  --text-h4:         1.5rem;
  --text-body-lg:    1.25rem;
  --text-body:       1.125rem;
  --text-small:      1rem;
  --text-caption:    0.875rem;
  --text-micro:      0.75rem;

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.15;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* Spacing (8-point grid) */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* Containers */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl:1320px;

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill:999px;

  /* Borders */
  --border-light:  1px solid var(--color-neutral-300);
  --border-medium: 1px solid var(--color-neutral-400);
  --border-focus:  2px solid var(--color-primary-500);

  /* Shadows */
  --shadow-xs: 0 1px  2px rgba(0,0,0,.04);
  --shadow-sm: 0 4px 10px rgba(0,0,0,.06);
  --shadow-md: 0 10px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.10);

  /* Opacity */
  --opacity-disabled: .4;
  --opacity-muted:    .6;
  --opacity-overlay:  .8;

  /* Transitions */
  --transition-fast:   200ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   400ms ease;

  /* Z-index */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* Breakpoints (also mirrored in @media queries) */
  --bp-mobile:  480px;
  --bp-tablet:  768px;
  --bp-laptop: 1024px;
  --bp-desktop:1440px;


  /* -----------------------------------------------------------------------
     LAYER 2 · LEGACY SITE TOKENS
     These reflect the CURRENT visual output (Sprint 0 baseline) exactly.
     Where a legacy value equals a canonical token, we alias it (single
     source). Where it diverges, we keep the literal and flag it in
     README.md → "Known Technical Debt".
     ----------------------------------------------------------------------- */

  /* Greens — exact matches to canonical, aliased */
  --green:      var(--color-primary-500);   /* #457345 */
  --green-deep: var(--color-primary-900);   /* #16291A */

  /* Green (mid) — diverges from canonical (nearest: primary-700 #2D4D31) */
  --green-mid:  #2E4A2E;

  /* Background — exact match, aliased */
  --canvas:     var(--color-bg-primary);    /* #FBFAF6 */
  --card:       #FFFFFF;

  /* Muted text — diverges from canonical (nearest: neutral-600 #737373) */
  --muted:      #6A7268;

  /* Hairline borders (derived from primary-900 at 12% alpha) */
  --line:       rgba(22, 41, 26, .12);

  /* Section-specific background — diverges (nearest: bg-tertiary #F2EFE8) */
  --boxes-bg:   #F3F1E9;

  /* Text-on-dark helpers — no canonical equivalents */
  --on-dark-1:  #A8BCA2;   /* .why sub, footer body, spectrum sub */
  --on-dark-2:  #C7D9C0;   /* .why paragraph, announcement bar text */
  --on-dark-3:  #DCE7D6;   /* announcement bar */
  --on-dark-4:  #8FA389;   /* citation text on dark */
  --on-dark-5:  #7E9078;   /* footer heading + fbot */

  /* Day palette — 7 saturated hues.
     CONFLICTS WITH docs/03_DESIGN_BIBLE.md §7 "Forbidden Colors".
     Preserved for Sprint 1; see README.md → "Known Technical Debt". */
  --d1: #F45F92;
  --d2: #FE7D59;
  --d3: #81BA88;
  --d4: #FEF083;
  --d5: #70C0E0;
  --d6: #A27FEF;
  --d7: #6F87BA;

  /* Typography families
     --display aliases canonical (identical chain).
     --body diverges from canonical (system-ui fallback vs. Inter/Arial) —
     preserved for Sprint 1; see README.md → "Known Technical Debt". */
  --display: var(--font-heading);
  --body:    "Poppins", system-ui, sans-serif;

  /* Content wrap — 1180px, between canonical container-xl (1200) and lg (1024) */
  --wrap: 1180px;

  /* Section vertical rhythm — 88px, between canonical space-11 (96px) and space-10 (80px) */
  --section-y: 88px;
}