/* ============================================================
   tokens.css — THE canonical design tokens (single source of truth).
   Loaded globally (variables only). Every token here is a true no-op on the
   legacy V1–V4 pages: it either matches the legacy value or names a token the
   legacy stack does not consume. The two tokens that WOULD conflict with the
   legacy stack — the body font (Inter vs legacy Lato) and the heading text
   colour (#191b16 vs legacy #1d1c1c) — deliberately live in editorial.css
   instead, so they only apply on `use_editorial` pages. Moving legacy pages
   onto Inter/ink is Sub-project B/C, not this global file.
   Colour role rule: ink/navy are primary fills; teal is accent/link/focus ONLY.

   Ground palette (2026-08-01, ADR-012 + amendments): the paper is unchanged;
   bands/hairlines/ink moved off the warm-cream family onto the named
   --im-stone-* ramp below. The ramp NAMES, the surface aliases and the
   two-tier rule are palette-invariant — the active CUT is recorded in
   ADR-012's amendment trail. Final (am. 4): PORTLAND green-stone, restored
   after the full tour, with the usage doctrine that fixed it: the mid is
   FURNITURE ONLY (panels, wells, chips, code, table headers) and never a
   full-bleed section — page rhythm is paper ↔ navy (.im-feature-band).
   The band is the brand's identity carrier (every long page carries at least
   one Course-band section); the chroma budget (paper spread ≤5, Course ~8,
   deeper steps more only at small areas) is enforced, not advisory.
   ============================================================ */
:root {
  /* Brand + role colours */
  --im-ink: #191b16;             /* green-cast, in family with the stone ramp */
  --im-ink-soft: #3a3e33;        /* ink lifted one step — the hover fill for solid
                                    controls. Green-cast so it stays in the stone
                                    family; 9.4:1 with --im-paper (WCAG AAA). */
  --im-dark-navy: #0a1628;       /* deep bands (.im-feature-band) carry WHITE
                                    text only — ink-on-navy is ~1.06:1 */
  --im-accent-200: #00668c;      /* teal — links/kickers/underlines/focus ONLY */
  --im-accent-200-dark: #005270;
  --im-accent-100: #71c4ef;
  /* The stone ramp — named steps, quarry-to-paper. Surfaces below alias it. */
  --im-stone-0: #ffffff;         /* Leaf — cards, documents, table rows */
  --im-stone-50: #FCFBF7;        /* Stone — the page ground (pre-existing value, kept) */
  --im-stone-100: #E2E5D8;       /* Course — FURNITURE only: panels, wells, chips,
                                    table headers, code. Never a full-bleed section. */
  --im-stone-200: #D3D8C8;       /* Bed — sunk wells, disabled fills */
  --im-stone-300: #C4C9B9;       /* Joint — hairlines, card borders, dividers */
  --im-stone-400: #9AA18C;       /* Quarry — illustration, empty states; small areas only */
  /* Surfaces (aliases of the ramp — consume these, not the steps, in components) */
  --im-paper: var(--im-stone-50);
  --im-band: var(--im-stone-100);
  --im-card-bg: var(--im-stone-0);
  --im-hairline: var(--im-stone-300);
  /* Text */
  /* --im-text-100 (headings) is editorial-scoped in editorial.css — its ink
     value conflicts with the legacy #1d1c1c consumed on V4 pages. */
  --im-text-200: #313d44;        /* body — matches legacy, safe globally */
  --im-text-muted: #63675C;      /* stone-family muted; 5.59:1 on paper, 4.53:1 on band (AA) */
  --im-danger-ink: #a2402f;      /* error text, rules and borders on the editorial
                                    surface; darkened from the Bootstrap red to
                                    clear 4.5:1 on paper (WCAG 1.4.3) */
  /* Type — serif-as-jewel system (2026-07). --im-font-display is the HEADING face,
     Hanken Grotesk (a sans): it drives every editorial heading AND the label voice
     (kickers, section labels, badges, datelines, nav labels). The serif is
     reserved as a "jewel" for page/hero titles + big figures ONLY, via
     --im-font-serif (Spectral). Both stay a no-op on legacy pages (only .im-*
     elements consume them). --im-font-mono is a system monospace stack reserved
     for REAL code (<code>/<pre>) only: Space Mono was retired 2026-07-28 — the
     mono label voice moved to Hanken; numeric data uses Hanken + tabular-nums. */
  --im-font-display: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --im-font-serif: "Spectral", Georgia, "Times New Roman", serif;
  --im-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* Body + heading now resolve to Hanken GLOBALLY (2026-07-29). Previously
     --im-font-body was editorial-only and --im-font-heading lived in index-v2.css
     as Lato, so non-editorial pages silently fell back to Lato. Defining both
     here (heading aliased to the display face) makes the new type render on every
     page and lets the Lato webfont retire. */
  --im-font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --im-font-heading: var(--im-font-display);
  /* Display tracking ramp (2026-07-29). Spectral has NO optical-size axis — it is
     a text face Production Type drew for 14-18px screen reading, so its default
     fit is deliberately loose and every display use must claw that back by hand.
     A face with a display cut (Newsreader, Domaine) does this for you; Spectral
     does not, which is why these are tokens and not per-block guesses. Ramp is
     linear against size, the way Legora's does it: the bigger the type, the more
     negative. Body text stays at 0 — never track running prose. */
  --im-track-display: -.035em;   /* >=2.5rem — heroes, page titles */
  --im-track-title: -.025em;     /* 1.5-2.5rem — article/feed/section titles */
  --im-track-head: -.015em;      /* <1.5rem — h2/h3 inside prose */
  /* Retire Lato platform-wide: the legacy Bootstrap theme (theme.min.css) pipes
     --ar-font-sans-serif into the <body> font of every page. tokens.css loads
     AFTER theme.min.css on the public header, so this override repoints the whole
     legacy body voice to Hanken — the last thing keeping the Lato webfont alive
     on public/editorial/auth/booking/business surfaces. (Staff app keeps its own
     Lato link until its Phase-7 redesign.) */
  --ar-font-sans-serif: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  /* Content measure — the width every page section is centred on (.im-wrap in
     blocks.css). Lives here, not in blocks.css, because the globally-loaded
     footer needs the same measure and blocks.css only loads on editorial pages.
     A no-op on legacy pages: nothing else consumes it. */
  --im-wrap-max: 1280px;
  /* Fixed-navbar height. The single source of truth for nav clearance —
     .im-navbar-offset and .st-hero--compact both clear the bar with this token
     rather than a hand-tuned rem value, so a nav-height change is a one-line
     edit here instead of a hunt across stylesheets. Overridden on ≤575px below
     where the pill nav is shorter. */
  --im-nav-h: 86px;
  /* Spacing (4px scale) */
  --im-space-1: 4px;  --im-space-2: 8px;  --im-space-3: 12px; --im-space-4: 16px;
  --im-space-5: 20px; --im-space-6: 24px; --im-space-8: 32px; --im-space-10: 40px;
  --im-space-12: 48px; --im-space-16: 64px; --im-space-20: 80px; --im-space-24: 96px;
  /* Radius */
  --im-radius-control: 6px;
  --im-radius-card: 10px;
  --im-radius-pill: 999px;
  /* Form control widths (2026-08). Four rungs, sized by what the field HOLDS,
     not by the column it sits in. An input visibly the width of its answer is a
     hint you do not have to write, which is why this scale exists as tokens and
     not as per-form guesses — the calculator previously ran a 606px salary field
     beside a 120px age field with no rule connecting them. Anything wider than
     --im-ctl-md takes 100%: search, email and prose selects have no natural
     length, so constraining them only truncates. Consumed by .im-field in
     forms.css; a no-op everywhere else. */
  --im-ctl-xs: 6.5rem;   /* 2-4 digits: age, weekly hours, years of experience */
  --im-ctl-sm: 11rem;    /* money and dates: salary, deductions, dd/mm/yyyy */
  --im-ctl-md: 15rem;    /* short selects: UK nation, service level, status */
  /* Motion */
  --im-dur: .2s; --im-ease: cubic-bezier(.2,.6,.2,1);
  /* Elevation (borders carry hierarchy; shadows are a whisper; rgb = ink) */
  --im-shadow-1: 0 2px 8px rgba(25,27,22,.08);
  --im-shadow-2: 0 16px 40px rgba(25,27,22,.12);
}

/* The floating pill navbar is shorter on phones — clearance follows suit so the
   first section never floats in a 50px void below a 64px bar. */
@media (max-width: 575.98px) {
  :root { --im-nav-h: 64px; }
}