/* ============================================================================
   HTGF Design System — tokens.css                       v1 · 2026-08-29 (night build)
   ONE token sheet for every ring: Guides (WP), Atlas (PWA), Compass, curated
   country pages, tools. Source of truth for colour/type/space/radius/motion.
   Derived from: homepage v8 (best WP work) + Compass (newest) + htgf-ui-design
   skill (brand locks: Montserrat display / Nunito body / 7-colour palette).
   NEVER: purple-blue gradients, bare "safe" in copy, animated safety text.
   ========================================================================== */

:root{
  /* ---- brand palette (locked, htgf-ui-design §1) ---- */
  --forest:#214E3B;          /* primary brand green */
  --forest-deep:#173829;     /* header/footer ground, hero */
  --ink:#15231B;             /* text on light */
  --cream:#FAFAF6;           /* page background */
  --warm:#F3EFE4;            /* warm panel fill */
  --mustard:#E8B647;         /* accent, primary CTA, ★ */
  --mustard-deep:#8a6a1d;    /* mustard-on-light text (AA) */
  --sage:#8FA58A;            /* secondary green, quiet chips */
  --papaya:#FF7043;          /* warm accent — saves/hearts, kids-adjacent */
  --rose:#FFD9C0;            /* soft warm fill */
  --peach-wash:rgba(255,181,140,.16);
  --recall:#CE3B2B;          /* alerts/recalls ONLY — never decorative */

  /* ---- surfaces & lines ---- */
  --card:#FFFFFF;
  --line:#E3DFD2;
  --muted:#5d6b5f;
  --text:var(--ink);
  --hdr:#EAF1EC;             /* text on forest-deep */
  --chip-bg:#eef2ec;         /* quiet evidence chip fill */
  --note-bg:#FAF3DD;         /* mustard note/watchlist fill */

  /* ---- type ---- */
  --font-display:"Montserrat",system-ui,sans-serif;   /* 700/800/900 only */
  --font-body:"Nunito",system-ui,sans-serif;          /* 600 default, 700/800 emphasis */
  --fs-hero:clamp(2.4rem,6.2vw,4.6rem);
  --fs-h2:clamp(1.45rem,3.2vw,2.1rem);
  --fs-h3:1.12rem;
  --fs-body:1rem;            /* line-height 1.55 */
  --fs-small:.9rem;
  --fs-fine:.82rem;
  --fs-micro:.74rem;
  --fs-eyebrow:.72rem;       /* uppercase, letter-spacing .16em, mustard on dark / forest on light */
  --mono:ui-monospace,"SFMono-Regular",Menlo,monospace; /* dates & evidence metadata only */

  /* ---- spacing ---- */
  --wrap-max:1160px;
  --wrap-pad:clamp(16px,4vw,40px);
  --sec-pad:clamp(32px,5vw,64px);   /* airy default — medical-need audience reads under stress */
  --gap:16px;
  --gap-lg:clamp(16px,3vw,34px);

  /* ---- radii (unified scale — see spec §3.1; Compass migrates 5px → this) ---- */
  --r-lg:18px;               /* hero panels, big bands */
  --r-md:12px;               /* cards, dropdowns, callouts */
  --r-sm:8px;                /* inner elements, inputs */
  --r-pill:999px;            /* CTAs, chips, tabs */

  /* ---- elevation ---- */
  --shadow:0 1px 2px rgba(21,35,27,.05),0 12px 32px rgba(21,35,27,.08);
  --shadow-hover:0 18px 40px rgba(21,35,27,.14);
  --shadow-float:0 14px 34px rgba(21,35,27,.18);

  /* ---- motion (restrained; full reduced-motion fallback mandatory) ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:.15s;             /* hovers, borders */
  --t-med:.25s;              /* sheets, drawers */
  --t-reveal:.6s;            /* scroll reveals, one per element, once */
}

/* ---- dark mode (theme-aware, from v8) ---- */
@media (prefers-color-scheme:dark){:root{
  --forest:#5fbf93; --forest-deep:#0d1511; --ink:#eaf0ea; --cream:#0f1512;
  --warm:#151d18; --card:#1a231d; --line:#2b352e; --muted:#9fb0a3; --text:#eaf0ea;
  --mustard:#eec25f; --mustard-deep:#eec25f; --rose:#ffc9a8; --peach-wash:rgba(255,181,140,.12);
  --recall:#f0685a; --chip-bg:#1f2b23; --note-bg:#2a2415;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 34px rgba(0,0,0,.4);
  --shadow-hover:0 18px 40px rgba(0,0,0,.5);
  --shadow-float:0 14px 34px rgba(0,0,0,.5);
}}

/* ---- base ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--font-body);font-weight:600;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;text-wrap:balance;color:var(--forest)}
a{color:inherit}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-pad)}
:focus-visible{outline:3px solid var(--mustard);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}