/* Design tokens — single source of truth (PLAN §4.1).
   Light mode only; structured so a dark theme could be layered later. */

:root {
  /* --- Surfaces & ink --- */
  --page:        #f9f9f7;
  --surface:     #fcfcfb;
  --surface-2:   #f4f4f0;   /* subtle inset / hover */
  --ink:         #0b0b0b;
  --ink-2:       #52514e;
  --muted:       #76746e;
  --hairline:    #e1e0d9;
  --axis:        #c3c2b7;
  --ring:        rgba(11, 11, 11, 0.10);
  --ring-strong: rgba(11, 11, 11, 0.16);

  /* --- Brand (NHS blue) — chrome only, never a data series --- */
  --brand:       #005EB8;
  --brand-ink:   #ffffff;
  --brand-tint:  #e8f0f9;

  /* --- Categorical data palette (fixed slot order, never a 9th) --- */
  --cat-1: #2a78d6;  /* blue    */
  --cat-2: #1baf7a;  /* aqua    */
  --cat-3: #eda100;  /* yellow  */
  --cat-4: #008300;  /* green   */
  --cat-5: #4a3aa7;  /* violet  */
  --cat-6: #e34948;  /* red     */
  --cat-7: #e87ba4;  /* magenta */
  --cat-8: #eb6834;  /* orange  */

  /* --- Sequential (single-hue blue) ramp — heatmaps, SIMD gradient --- */
  --seq-100: #eaf2fd;
  --seq-200: #cde2fb;
  --seq-300: #9cc4f4;
  --seq-400: #62a0e8;
  --seq-500: #2f79d6;
  --seq-600: #1a539f;
  --seq-700: #0d366b;

  /* --- Diverging (below ↔ above expected) --- */
  --div-neg: #d0483f;
  --div-mid: #f0efec;
  --div-pos: #2f79d6;

  /* --- Status (confidence / outlier flags — icon + label, never colour alone) --- */
  --ok:       #087f23;
  --warn:     #b9820b;
  --warn-bg:  #fbf3dd;
  --serious:  #c25a2c;
  --critical: #c4342f;
  --ok-bg:    #e5f3e5;
  --serious-bg:#f8e7dd;
  --critical-bg:#f7e3e2;

  /* SYNTHETIC-data ribbon */
  --synth:     #b9820b;
  --synth-bg:  #fbf1d6;
  --synth-ring:#e7c66b;

  /* --- Type --- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
  --fs-20: 20px; --fs-28: 28px; --fs-34: 34px; --fs-44: 44px;
  --lh-tight: 1.2; --lh: 1.45;

  /* --- Spacing (4px grid) --- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px;

  /* --- Radii & shadow --- */
  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11, 11, 11, 0.04);
  --shadow-2: 0 2px 8px rgba(11, 11, 11, 0.06), 0 1px 2px rgba(11, 11, 11, 0.04);
  --shadow-pop: 0 8px 28px rgba(11, 11, 11, 0.12);

  /* layout */
  --nav-w: 248px;
  --header-h: 56px;
  --ribbon-h: 26px;
  --maxw: 1320px;
}