/* =======================================================================================
   DESIGN TOKENS — every design decision of the 2026 wiki as a CSS variable.

   Structure: colours (one flat semantic set) · one fluid clamp() type scale ·
   one 4px space + radius scale · decorative/layout. Elements and chrome read
   ONLY these names, so changing a value here restyles the whole site.
   ======================================================================================= */

:root {
  /* ---- Colours — one flat semantic set.
     VOYAGE identity, sampled pixel-exact from the design team's mockups
     (2026-08-22): orange-forward on white, with pale-teal highlighter bars and
     a warm cream reading panel. Every value below is a real colour lifted from
     the drafts, not an approximation. */
  --clr-heading:  #2A7186;                 /* dark teal — still the footer/box chrome colour */
  --clr-ink:      #202020;                 /* near-black — column headings, nav links */
  --clr-text:     #202020;                 /* body copy */
  --clr-accent:   #E37D3B;                 /* VOYAGE orange — section headings, active states */
  --clr-accent-deep: #D56428;              /* the darker orange of the illustrations */
  --clr-title:    #E55B00;                 /* the big page title face */
  --clr-title-shadow: #F5BF95;             /* its offset shadow — lighter peach, not darker */
  --clr-body:     #FFFFFF;                 /* the mockups sit on plain white */
  --clr-surface:  #F2F7F8;                 /* faint cool tint for the few panels that need one */
  --clr-bar:      #CAE6EA;                 /* pale-teal highlighter bar behind headings + nav */
  --clr-panel:    #FBEADE;                 /* warm cream reading panel (the intro block) */
  --clr-banner-a: #9BD2DA;                 /* illustration band gradient — deeper edge */
  --clr-banner-b: #CAE6EA;                 /* illustration band gradient — lighter edge */
  --clr-rail:     #5A949C;                 /* sidenav rail + idle links */
  --clr-rail-active: #D76C2D;              /* sidenav active item + its rail segment */
  --clr-rail-glow: #BAEBF2;                /* the halo on the sidenav's top dot */
  --grey-light:   #D3D3D3;                 /* borders, dividers */
  /* the highlight tint (collapsible boxes, focus blocks) is DERIVED from the
     heading teal — a calm cool tint that sits under the warmer panel */
  --clr-focus:    color-mix(in srgb, var(--clr-heading) 10%, transparent);

  /* ---- One fluid type scale ----
     A single modular scale (base x 1.25) interpolating from a mobile floor to a
     desktop ceiling with clamp() — one source of truth, no breakpoint tables. */
  --fs-body: clamp(0.95rem, 0.80rem + 0.7vw, 1.30rem);
  --fs-h5:   clamp(0.90rem, 0.85rem + 0.3vw, 1.00rem);
  --fs-h4:   clamp(1.00rem, 0.85rem + 0.8vw, 1.375rem);
  --fs-h3:   clamp(1.10rem, 0.80rem + 1.4vw, 1.75rem);
  --fs-h2:   clamp(1.60rem, 0.90rem + 3.0vw, 3.00rem);   /* the big orange section heading */
  --fs-h1:   clamp(2.25rem, 1.40rem + 3.6vw, 3.00rem);
  /* the page title is its own step above h1 — in the mockups it is the largest
     thing on the page by a wide margin */
  --fs-title:   clamp(2.75rem, 1.20rem + 7.0vw, 6.50rem);
  --fs-navlink: clamp(0.85rem, 0.60rem + 0.7vw, 1.20rem);
  --fs-overlay: clamp(1.10rem, 0.10rem + 4.2vw, 2.50rem);
  --fs-eyebrow: clamp(0.70rem, 0.55rem + 0.6vw, 1.20rem);

  --font-family-primary: "Nunito Sans", sans-serif;
  --fw-regular:   400;
  --fw-bold:      700;
  --fw-extrabold: 1000;
  --lh-tight: 1.15;
  --lh-body:  1.6;
  --ls-wide:  0.12em;           /* the wide letter-spacing of the nav + column headings */

  /* ---- One space + radius scale (4px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --radius:      12px;
  --radius-lg:   20px;
  --measure:     68ch;          /* reading measure */

  /* ---- Decorative + layout ---- */
  --navbar-height: 4.5rem;
  --title-shadow: 0.055em 0.055em 0 var(--clr-title-shadow);   /* the hard offset on the page title */
}