/* TepStat design tokens v0.4 (13 Oct 2026): WARM EDITORIAL theme = primary UI theme.
   Source of truth: the live /anatomy reference design (KD's Claude Design, build v0.5-20261013-restore, commit 3633695).
   Hexes below were extracted from that page's HTML / rendered pixels on 13 Oct 2026. "[derived]" = not in the live page; added by us for charts.
   Ratios = WCAG 2.x contrast vs --ts-paper (#F9F4EC) unless noted. AA: normal text >= 4.5, large text (>= 24px, or >= 19px bold) and UI/graphics >= 3.
   Navy + gold are the BRAND MARK ONLY (logo hexagon + dot, favicon, social cards). Never UI chrome, never text colour on pages. */
:root {
  /* ── Surfaces ───────────────────────────────────── */
  --ts-paper:      #F9F4EC; /* page background (cream paper) */
  --ts-surface:    #FEFDF9; /* cards, picker, chips that need lift (no shadow) */
  --ts-sunken:     #F3EADB; /* chips, EN/BM toggle track, "What this means for you" panels, icon discs */
  --ts-map-bg:     #F7F3EB; /* map pane background */
  --ts-hairline:   #E3D9CE; /* 1-1.5px borders on cards/chips/header (decorative, 1.27) */
  --ts-divider:    #EFE7DC; /* row dividers inside cards (decorative) */

  /* ── Ink (text) ─────────────────────────────────── */
  --ts-ink:        #2E2119; /* body text, headlines, district name · 14.23 (AAA) */
  --ts-ink-2:      #5F4F44; /* secondary text, standfirst, state name · 7.13 (AAA) */
  --ts-muted:      #726457; /* captions, "typical" notes, placeholders · 5.22 (AA); 4.79 on sunken (AA) */
  --ts-brown:      #663C23; /* THE UI accent: links, icons (flat line icons), active EN/BM, buttons, section numbers · 8.58 (AAA) */
  --ts-on-brown:   #FEFDF9; /* text on brown buttons/discs · 9.23 */

  /* ── Accents (fills/marks, NOT text) ─────────── */
  --ts-terracotta: #DA452C; /* map dots for the category in focus, "you are here" · 3.94 paper / 3.90 map-bg (UI OK, never body text) */
  --ts-caramel:    #AF7947; /* pictogram fill (people icons), hover border, district fill · 3.40 (UI OK, never text) */
  --ts-highlight:  #E7CCAE; /* highlighter band under ONE key phrase (ink on it 10.13) */
  --ts-stone:      #9C8F82; /* empty pictogram outlines (as found) · 2.88 on paper ⚠ FAIL 3:1 → use --ts-stone-ui */
  --ts-stone-ui:   #8C7E71; /* [fix] empty pictogram outlines / "other places" dots · 3.59 paper, 3.87 surface, 3.30 sunken */
  --ts-missing:    #D8CDC0; /* "missing vs typical" pictogram fill (as found) · 1.54 ⚠ needs a 3:1 outline (--ts-stone-ui) */
  --ts-dash:       #C5BCB4; /* dashed "empty state" box border (decorative) */

  /* ── Verdict (always icon + words; colour never alone) ── */
  /* Green: "Underserved — real room for one more" / "Some room — slightly fewer…" */
  --ts-good-tint:  #E0F7E4; --ts-good: #348F4F; /* border/icon · 3.58 on tint */ --ts-good-text: #195C2E; /* 7.12 on tint */
  /* Amber: "About normal — expect…" */
  --ts-mid-tint:   #FFF0D0; --ts-mid:  #E1A536; /* border/icon · 1.93 ⚠ → --ts-mid-ui */ --ts-mid-text: #804D0C; /* 6.24 on tint */
  --ts-mid-ui:     #B7801F; /* [fix] amber border/icon · 3.04 on tint, 3.13 paper */
  /* Red: "Crowded — lots of food places already"; also errors/corrections */
  --ts-bad-tint:   #FFE9E4; --ts-bad:  #CB4838; /* border/icon · 3.99 on tint */  --ts-bad-text: #9E2E21; /* 6.29 on tint */

  /* ── Brand mark only ───────────────────────────── */
  --ts-navy:       #0F2A44; /* logo hexagon, favicon, wordmark. NOT UI chrome */
  --ts-gold:       #F2B200; /* logo centre dot only. 1.72 on paper: never text */

  /* ── Data scales [derived from the theme; not in the live page] ── */
  --ts-data-focus:   #663C23; /* the series/area the sentence is about */
  --ts-data-context: #D8CDC0; /* every other series/area */
  --ts-data-marker:  #DA452C; /* "you are here" / selected point (with ink outline) */
  --ts-seq-1: #F3EADB; --ts-seq-2: #E7CCAE; --ts-seq-3: #C99A6B; --ts-seq-4: #9A6640; --ts-seq-5: #663C23; /* cream → brown. Labels: ink on 1–3, #FEFDF9 on 4–5 (4.74 / 9.23) */
  /* diverging brown ↔ slate (brown/blue axis stays readable for red–green colour-blindness) */
  --ts-div-1: #663C23; --ts-div-2: #AF7947; --ts-div-3: #E7CCAE; --ts-div-4: #F3EADB;
  --ts-div-5: #C9D3D9; --ts-div-6: #7D97A6; --ts-div-7: #3F5C6E;
  /* extended categorical (Okabe–Ito) only when >3 categories AND direct labels can't do it */
  --ts-cat-1: #0072B2; --ts-cat-2: #E69F00; --ts-cat-3: #009E73; --ts-cat-4: #CC79A7;
  --ts-cat-5: #56B4E9; --ts-cat-6: #D55E00; --ts-cat-7: #F0E442; --ts-cat-8: #000000;

  /* ── Type (Google Fonts, OFL; embedded in the live /anatomy bundle; self-host in apps/web/public/vendor/ on rebuild) ── */
  --ts-font-head: "Young Serif", Georgia, serif;          /* district names, sentence headlines (weight 400 only) */
  --ts-font-body: "Figtree", system-ui, sans-serif;       /* UI, body, labels, numbers (400/600/700/800) */
  --ts-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace; /* dataset IDs, code, SAMPLE tag */

  /* ── Shape & space (soft corners OK; NO shadows/glow/blur) ── */
  --ts-radius-chip: 999px; /* chips, pills, picker, EN/BM toggle */
  --ts-radius-card: 16px;  /* cards, verdict card, panels (12–18px seen live) */
  --ts-radius-sm:   4px;   /* inputs, small tags, table cells */
  --ts-radius: var(--ts-radius-sm);
  --ts-border: 1px solid var(--ts-hairline);
  --ts-space-1: 4px; --ts-space-2: 8px; --ts-space-3: 12px; --ts-space-4: 16px;
  --ts-space-5: 24px; --ts-space-6: 32px; --ts-space-7: 48px;
  --ts-measure: 34em;
  --ts-touch: 44px;
  --ts-focus: 0 0 0 2px var(--ts-paper), 0 0 0 4px var(--ts-brown);
  /* No box-shadow, gradient (except the highlighter band), backdrop-blur or glow tokens on purpose. */
}

/* Legacy names → v0.4 (so older prototypes/mockups don't break; do not use in new work) */
:root {
  --ts-text: var(--ts-ink);
  --ts-grey-700: var(--ts-ink-2);
  --ts-grey-400: var(--ts-stone-ui);
  --ts-rule: var(--ts-dash);
  --ts-paper-2: var(--ts-sunken);
  --ts-white: var(--ts-surface);
  --ts-navy-700: var(--ts-ink);
  --ts-navy-tint: var(--ts-sunken);
  --ts-gold-ink: var(--ts-mid-text);
  --ts-red: var(--ts-bad-text);
  --ts-teal: var(--ts-good-text);
  --ts-blue: var(--ts-brown); --ts-blue-dark: var(--ts-ink); --ts-blue-tint: var(--ts-sunken);
  --ts-gold-dark: var(--ts-mid-text); --ts-line: var(--ts-hairline); --ts-font-display: var(--ts-font-head);
}