/* ============================================================================================
   ITG DESIGN TOKENS — the single source of truth for colour, type, space and motion.
   Loaded FIRST. Contains variables only, no component styling.

   THE CONTEXT RULE: a module never hardcodes a colour. It reads --fg / --accent / --eyebrow and
   the surrounding band redefines them. That is what makes a component work on a dark ground and
   on the white band without a second copy — and it makes the brand's lime rule structural:
   #96ff00 is forbidden on light grounds, so --accent simply IS #8ed800 there.

   Extracted from index.html 2026-08-14 so every page can share it.
   ============================================================================================ */

:root{
  /* ── brand palette (knowledge/itg/brand.md) ───────────────────────────────────────────── */
  --itg-lime-dark:#96ff00;    /* lime on DARK grounds only */
  --itg-lime-light:#8ed800;   /* lime on LIGHT grounds only */
  --itg-cyan:#36ecff;
  --itg-blue:#0661aa;
  --itg-ink:#04060a;          /* page ground */
  --itg-near-black:#1b242a;
  --itg-surface:#0a0e12;      /* card surface on dark */
  --itg-navy:#0f3557;
  --itg-white:#ffffff;

  /* ── type ─────────────────────────────────────────────────────────────────────────────── */
  --font:'Titillium Web',sans-serif;
  --w-body:400;
  --w-strong:700;
  --w-display:900;            /* web-display only; see brand.md, approved 2026-08-13 */
  /* FLUID DISPLAY SIZES (2026-08-25). These were flat 84px and 46px with no responsive step -
     tokens.css had no media query at all - and that was the root cause of the site's mobile
     overflow, not the grids or the cards. A single long word cannot wrap: "Newsletter" set at
     84px measures 510px, so subscribe.html's H1 alone made the document 550px wide on a 375px
     phone, and every in-flow grid then resolved against THAT width instead of the viewport.
     Fixing the type fixed the cascade.

     clamp() rather than a breakpoint so there is no cliff mid-tablet. The upper bound keeps
     desktop EXACTLY as it was: 84px is reached at 933px viewport (84/0.09) and 46px at 1000px,
     both well below the 1280px content measure, so nothing above tablet moves a pixel. */
  --t-display:clamp(38px, 9vw, 84px);   --lh-display:0.92;
  --t-h2:clamp(28px, 4.6vw, 46px);      --lh-h2:1.02;
  --t-term:22px;     /* accented term headings: def-list terms and feature-card titles */
  /* 20px -> 32px on 2026-08-14. The token had NO consumer at 20px, so nothing moved; it now has
     one (`.sec-title--h3`, the host names on about.html) and needed a value that reads as a title
     under a 46px section heading rather than as a label. Scale: 84 display / 46 h2 / 32 h3 /
     22 term / 20 body / 17 small. */
  --t-h3:32px;
  /* --lh-body 1.65 -> 1.4 (2026-08-24/25, Nico): tightened as part of the title/subtitle canon.
     Safe site-wide because its only two consumers ARE section-intro/teaser copy - .sec-copy (the
     paragraph under a .sec-title) and .vid-note (the Home's "Watch it here" teaser) - never
     long-form article body text, which sets its own line-height (.ep-summary 1.6, .ep-section p
     1.7, both untouched). */
  --t-body:20px;      --lh-body:1.4;
  --t-small:17px;
  --t-eyebrow:20px;
  --t-label:14px;
  /* Added 2026-08-14 by the audit. Both were already in the system as repeated literals, which is
     the definition of a missing token:
       16px on .btn-ghost, .input, .textarea, .fcard-d  -> --t-ui   (interface text)
       13px on .field-l, .ab-host .h-role, .ab-host .h-info -> --t-meta (labels, captions)
     Values chosen to match what was there, so nothing moves. */
  --t-ui:16px;
  --t-meta:13px;
  --track-tight:.01em;
  --track-label:.08em;

  /* ── motion ───────────────────────────────────────────────────────────────────────────── */
  --ease:cubic-bezier(.22,1,.36,1);
  --dur:.28s;

  /* ── radius ───────────────────────────────────────────────────────────────────────────── */
  --r-card:16px;
  --r-badge:20px;
  --r-pill:999px;

  /* ── layout measures ──────────────────────────────────────────────────────────────────── */
  --measure-grid:1280px;      /* default: anything with a grid or a side-by-side row */
  --measure-prose:1080px;     /* centred text-only sections; line-length driven */
}

/* ── CONTEXT SETS ───────────────────────────────────────────────────────────────────────────
   .ctx-dark is the default. .ctx-light is applied by the white band.
   --fg-muted differs by more than an inverted alpha ON PURPOSE: light-on-dark type expands
   optically and dark-on-light contracts, so a mirrored .75 read washed and thin on white
   (6.91:1 vs 20.28:1). Same reason --w-body-ctx steps up on light. */
:root,.ctx-dark{
  --fg:var(--itg-white);
  --fg-muted:rgba(255,255,255,.72);
  --accent:var(--itg-lime-dark);
  --accent-text:var(--itg-lime-dark);   /* 16.03:1 on ink — safe as type here */
  --eyebrow:var(--itg-cyan);
  --line:rgba(255,255,255,.14);
  --surface:var(--itg-surface);
  --w-body-ctx:var(--w-body);
  --glow:0 0 30px rgba(150,255,0,.5);
  /* PILL — the hero chip's edge and fill, generalised so any tag row can use it. The fill is the
     page ground, not transparent: these sit over the dot grid and the lines run straight through
     an unfilled chip (the exact bug the home's hero pill had). */
  /* SOLID, no alpha (Nico, 2026-08-25). At .45 over ink this composited to an olive #497a0a
     that read as a different green from every other lime edge on the site. */
  --pill-edge:var(--itg-lime-dark);
  --pill-bg:var(--itg-ink);
}
.ctx-light,.itg-light{
  --fg:var(--itg-near-black);
  --fg-muted:var(--itg-near-black);
  --accent:var(--itg-lime-light);
  /* ACCENT vs ACCENT-TEXT — the distinction the system was missing (2026-08-14, measured).
     --accent is a GRAPHIC colour: fills, rules, wipes, markers. --accent-text is for TYPE.
     On dark they are the same value because lime hits 16.03:1 on ink. On WHITE the brand lime
     #8ed800 measures 1.75:1, which fails even the 3:1 large-text floor, so accented type here
     must be ITG Blue (6.37:1). Never set type to var(--accent) on a light ground. */
  --accent-text:var(--itg-blue);
  --eyebrow:var(--itg-blue);
  --line:rgba(27,36,42,.12);
  --surface:var(--itg-white);
  --w-body-ctx:600;
  /* NO GLOW ON LIGHT. A glow simulates emitted light; white is already at maximum luminance so
     there is nothing to illuminate, and the spread reads as a blurry halo rather than as light.
     On light grounds the hover is carried by fill and border alone. (2026-08-14, Nico) */
  --glow:none;
  /* Lime cannot draw the edge here for the same reason it cannot draw type: ITG Blue does it.
     No fill either — there is no grid showing through a white band. */
  /* solid here too, for the same reason: ITG Blue at .35 on white was a washed grey-blue
     rather than the brand blue the rest of the light band uses. */
  --pill-edge:var(--itg-blue);
  --pill-bg:transparent;
  /* TRACKING (2026-08-24, Nico): dark type on a white ground reads MORE spread out than the
     same tracking value on light-on-dark type, because the dark side's glow/irradiation
     visually bridges the gaps between letters while crisp black-on-white has nothing to soften
     them - same number, different perceived gap. Everywhere --track-tight is used (.sec-title,
     epcard titles, host-name captions...) it now resolves tighter inside a light band than in
     the dark default (.01em), so the two contexts read as the SAME tracking instead of the
     white one looking looser. */
  --track-tight:-.033em;
}

/* ══ SECTION RHYTHM TOKENS ══ (2026-08-14, Nico) ═════════════════════════════════════
       THE KNOB. Every section's vertical padding derives from --sec-pad, so raising that one
       value adds air to the whole page at once. Seam between two sections = the bottom pad of
       one plus the top pad of the next.
         --sec-pad    between two sections that share a background. Seam = 2x this.
         --zone-pad   clearance from a colour-zone edge. Bigger on purpose: the band change is a
                      hard visual break, so content must not crowd it. Corrected 2026-08-14 —
                      the first model had this backwards, adding air between same-ground
                      sections and leaving the band edges tight.
         --sec-group  sections meant to read as ONE unit (video + episodes).
         --sec-tight  utility strips (the platform row).
       Two knobs: --sec-pad controls density inside a zone, --zone-pad controls the band edges. */
    :root{
      --sec-pad:64px;     /* BETWEEN sections inside one colour zone  -> seam 128 */
      --zone-pad:112px;   /* at the EDGE of a colour zone (band start/end) */
      --sec-group:40px;   /* sections that must read as ONE unit      -> seam 80  */
      --sec-tight:24px;   /* utility strips */
      --sec-pad-x:40px;
    }