/* MIRROR — do not edit by hand.
 *
 * Source of truth: `frontend/src/styles/design-tokens.json` (ADR-0052,
 * "clinical", supersedes ADR-0011), the same JSON that generates the SPA's
 * `frontend/src/styles/tokens.css`.
 *
 * The site is a zero-dependency static build, so it cannot import the SPA's
 * generated file — it carries this copy instead. `tools/check-tokens.mjs`
 * reads the JSON and fails if any value below has drifted from it.
 *
 * ONE deliberate difference from the SPA's file: the `[data-theme='dark']`
 * block is omitted. The site ships light-only, and carrying a theme that
 * never renders is exactly the defect ADR-0052 records against ADR-0011's
 * dark tokens.
 *
 * The `--ff-*` families are now byte-identical to the SPA's, because the site
 * self-hosts the same @fontsource variable faces (`styles/fonts.css`). It
 * used to name the CDN families instead, and `check-tokens.mjs` carried a
 * substitution table to forgive it; that exemption is gone.
 */
:root {
  /* semantic colour */
  --page: #FAFAFA;
  --surface: #FFFFFF;
  --raised: #F2F3F4;
  --ink-1: #101418;
  --ink-2: #5A6169;
  --ink-3: #8E959D;
  --rule: #E4E6E9;
  --rule-strong: #C9CDD2;
  --accent: #3C6BC9;
  --accent-dim: #E7ECF7;
  --pos: #3E8C6A;
  --neg: #C06058;
  --warn: #B08040;
  --on-accent: #FFFFFF;
  --absent: #E8DCD9;
  --own-outline: rgba(16,20,24,.35);
  --row-hover: #FCFCFD;

  /* brand ramp — mark 100% · mid 70% · fill 45%, each composited over --surface */
  --c1: #5B9188;  --c1m: #8CB2AC;  --c1f: #B5CEC9;
  --c2: #C9A063;  --c2m: #D9BC92;  --c2f: #E7D4B9;
  --c3: #C4837B;  --c3m: #D6A8A3;  --c3f: #E4C7C4;
  --c4: #948BC2;  --c4m: #B4AED4;  --c4f: #CFCBE4;
  --c5: #90AC77;  --c5m: #B1C5A0;  --c5f: #CDDAC2;
  --c6: #BE92AB;  --c6m: #D2B3C4;  --c6f: #E2CED9;
  --c7: #7BA3B8;  --c7m: #A3BFCD;  --c7f: #C4D6DF;
  --c8: #D4B382;  --c8m: #E1CAA8;  --c8f: #ECDDC7;
  --c9: #8A7FA8;  --c9m: #ADA5C2;  --c9f: #CAC5D8;
  --c10: #CE9585;  --c10m: #DDB5AA;  --c10f: #E9CFC8;
  --c11: #6FA89B;  --c11m: #9AC2B9;  --c11f: #BED8D2;
  --c12: #9AA0A8;  --c12m: #B8BCC2;  --c12f: #D2D4D8;

  /* engine marks — official brand colours */
  --e-openai: #000000;
  --e-perplexity: #1FB8CD;
  --e-gemini: #8E75B2;
  --e-claude: #D97757;

  /* type */
  --ff-display: 'Inter Tight Variable', system-ui, sans-serif;
  --ff-ui: 'Inter Variable', system-ui, sans-serif;
  --ff-mono: 'Roboto Mono Variable', ui-monospace, monospace;
  --t-display-xl-size: 30px;  --t-display-xl-weight: 600;  --t-display-xl-leading: 1.15;
  --t-display-l-size: 19px;  --t-display-l-weight: 600;  --t-display-l-leading: 1.25;
  --t-display-m-size: 14px;  --t-display-m-weight: 600;  --t-display-m-leading: 1.35;
  --t-ui-base-size: 13px;  --t-ui-base-weight: 400;  --t-ui-base-leading: 1.5;
  --t-ui-sm-size: 12px;  --t-ui-sm-weight: 400;  --t-ui-sm-leading: 1.45;
  --t-mono-num-size: 10.5px;  --t-mono-num-weight: 400;  --t-mono-num-leading: 1.4;
  --t-mono-label-size: 9.5px;  --t-mono-label-weight: 400;  --t-mono-label-leading: 1.3;

  /* spacing — 4px base */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 26px;
  --sp-7: 34px;

  /* radius + elevation — one step, plus an overlay-only second */
  --r: 4px;
  --e1: 0 1px 2px rgba(16,20,24,.06);
  --e2: 0 4px 14px rgba(16,20,24,.10);

  /* motion — interaction state only; charts never animate */
  --mo-fast: 80ms cubic-bezier(.2,0,0,1);
  --mo-base: 140ms cubic-bezier(.2,0,0,1);

  /* z-index */
  --z-sticky: 10;
  --z-nav: 20;
  --z-overlay: 50;
  --z-modal: 60;
}