/* =============================================================================
   01-tokens.css  ·  EEP Puerto Rico 2026 RSVP
   The single source of truth for color, type, space, depth, and motion.
   Sampled from the save-the-date graphic. NO hard-coded hex anywhere else.
   ========================================================================== */

:root{
  /* ---------- Brand core (sampled from the real assets) ---------- */
  --navy:#1B3763;          /* deep brand — headline + medallion */
  --navy-700:#122A47;
  --navy-800:#0E2540;
  --navy-900:#0A1C32;      /* deepest background */
  --logo-navy:#2A2A57;     /* the monogram's own navy */
  --periwinkle:#5C9BEA;    /* the mark's blue / light accent */
  --periwinkle-300:#8FBCF2;
  --periwinkle-600:#3F7FD0;
  --gold:#C9A24E;          /* accent — medallion + gold rules */
  --gold-soft:#D7B56B;
  --gold-200:#E7CE94;
  --gold-ink:#6E5621;      /* AA-safe "gold" for small text on light */
  --sky:#CEE5F6;           /* hero gradient */
  --sky-soft:#E3F0FB;
  --cream:#F7F1E6;         /* foam / cream */
  --cream-deep:#EFE6D4;
  --white:#FFFFFF;
  --palm:#2F6B4F;          /* sparing foliage green */
  --palm-deep:#1F4D38;

  /* ---------- Surfaces ---------- */
  --bg:#F7F1E6;            /* page (warm cream) */
  --surface:#FFFFFF;       /* raised card on light */
  --surface-alt:#FBF6EC;   /* alternating section */
  --bg-deep:#0E2540;       /* deep navy sections */
  --bg-deep-2:#0A1C32;

  /* ---------- Ink on light ---------- */
  --ink:#10202F;
  --ink-2:#33485C;
  --muted:#5C6B7A;
  --line:rgba(16,32,47,.12);
  --line-strong:rgba(16,32,47,.22);

  /* ---------- Ink on dark ---------- */
  --on-navy:#F4F8FC;
  --on-navy-2:#CBD9E8;
  --on-navy-muted:#9DB1C7;
  --line-on-dark:rgba(244,248,252,.16);
  --line-on-dark-strong:rgba(244,248,252,.30);

  /* ---------- Status (form + sheet chips) ---------- */
  --ok:#2E7D4F;   --ok-bg:#E5F3EA;
  --warn:#B27A14; --warn-bg:#FBF0DA;
  --no:#5E6E7C;   --no-bg:#EEF1F4;
  --err:#B23A2B;  --err-bg:#FBEAE7;

  /* ---------- Type families ---------- */
  --font-display:"Playfair Display","Georgia","Times New Roman",serif;
  --font-head:"Montserrat",system-ui,"Segoe UI",sans-serif;
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* ---------- Fluid type scale (320 → 1440) ---------- */
  --fs-display: clamp(3.1rem, 1.35rem + 8.6vw, 8.6rem);   /* hero serif */
  --fs-mega:    clamp(4.2rem, 1.6rem + 12.4vw, 12.5rem);  /* the "2026" numerals */
  --fs-h1:      clamp(2.3rem, 1.55rem + 3.4vw, 4.1rem);
  --fs-h2:      clamp(1.95rem, 1.35rem + 2.6vw, 3.05rem);
  --fs-h3:      clamp(1.3rem, 1.08rem + 1.0vw, 1.7rem);
  --fs-lead:    clamp(1.08rem, .98rem + .5vw, 1.34rem);
  --fs-body:    clamp(1rem, .965rem + .18vw, 1.08rem);
  --fs-small:   .875rem;
  --fs-eyebrow: clamp(.72rem, .69rem + .12vw, .82rem);
  --fs-count:   clamp(2.2rem, 1.2rem + 4.6vw, 4.6rem);    /* countdown digits */

  --lh-tight:1.04; --lh-snug:1.16; --lh:1.6; --lh-body:1.72;
  --ls-eyebrow:.2em; --ls-wide:.06em; --ls-tight:-.018em; --ls-mega:-.035em;

  /* ---------- Space scale ---------- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --gutter:    clamp(1.25rem, .8rem + 3vw, 3rem);
  --section-y: clamp(4rem, 2.4rem + 7vw, 9rem);

  /* ---------- Layout ---------- */
  --maxw:1200px; --maxw-wide:1360px; --maxw-narrow:780px; --reading:66ch;
  --header-h:76px;

  /* ---------- Radii ---------- */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-card:18px; --r-lg:26px; --r-pill:999px;

  /* ---------- Shadows (tinted with brand dark, never pure black) ---------- */
  --shadow-soft:0 10px 30px rgba(14,37,64,.12);
  --shadow-lift:0 24px 60px rgba(14,37,64,.22);
  --shadow-deep:0 40px 90px rgba(8,20,38,.45);
  --shadow-gold:0 14px 38px rgba(201,162,78,.28);

  /* ---------- Glass (over the living background) ---------- */
  --glass:rgba(255,255,255,.10);
  --glass-2:rgba(255,255,255,.06);
  --glass-brd:rgba(255,255,255,.28);
  --glass-blur:18px;

  /* ---------- Gradients ---------- */
  --grad-sky: linear-gradient(180deg,#0b2a4d 0%,#1a4775 38%,#3f7fb0 70%,#cdaa5e 116%);
  --grad-gold: linear-gradient(100deg,var(--gold-200),var(--gold) 55%,var(--gold-soft));
  --grad-navy: linear-gradient(165deg,var(--navy) 0%,var(--navy-800) 60%,var(--navy-900) 100%);
  --scrim-bottom: linear-gradient(180deg,rgba(10,28,50,0) 0%,rgba(10,28,50,.55) 72%,rgba(10,28,50,.78) 100%);
  --scrim-top: linear-gradient(180deg,rgba(10,28,50,.55) 0%,rgba(10,28,50,0) 40%);

  /* ---------- Motion ---------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur-fast:.2s; --dur:.45s; --dur-slow:.8s;

  /* ---------- Z layers ---------- */
  --z-bg:0; --z-content:1; --z-header:50; --z-sticky:60; --z-modal:100;

  color-scheme: light;
}

/* Reference breakpoints (used in 08-responsive.css):
   sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1440 */