/* Design tokens — the only file in the project where a colour is chosen.
 *
 * Every colour, space, radius and type size is a custom property on :root, and the dark
 * theme redefines a subset of them. The rule that keeps that honest: NO PROPERTY IS
 * DEFINED ONLY IN THE DARK BLOCK. A token that exists only under the media query is a
 * light theme with a hole in it, visible to whoever is not using dark mode and to nobody
 * else. `tests/unit/test_ui.py` parses this file and fails if the dark block introduces
 * a name :root has not already defined.
 *
 * Colour carries meaning here and nothing else:
 *   - one accent, indigo, for primary actions, the active tab, links and the treatment
 *     series;
 *   - GREEN AND RED ARE RESERVED FOR STATISTICAL VERDICTS. Never a save button, never a
 *     chrome affordance;
 *   - amber means "needs your attention" — running, unmapped zips, missing spend;
 *   - grey is the colour of an inconclusive result. It is the modal outcome of a geo
 *     test and it has to look like a real answer, not a failure.
 */

:root {
  color-scheme: light;

  /* --- Structure ------------------------------------------------------- */
  --bg: #ffffff;
  --bg-sunken: #f7f7f8;
  --bg-raised: #ffffff;
  --bg-hover: #f2f3f5;
  --bg-inset: #f0f1f3;
  --border: #e4e5e9;
  --border-strong: #cfd1d6;
  --text: #16181d;
  --text-muted: #61656e;
  --text-faint: #8b8f98;
  --overlay: rgb(16 18 22 / 38%);

  /* --- Accent: the one indigo -------------------------------------------- */
  --accent: #4f46e5;
  --accent-strong: #4338ca;
  --accent-on: #ffffff;
  --accent-bg: #eef0fe;
  --accent-border: #c7c9f8;

  /* --- The grey→blue ramp a design is built along ------------------------ */
  --cool: #4b5563;
  --cool-bg: #eef0f3;
  --cool-border: #d7dbe1;
  --blue: #1d4ed8;
  --blue-bg: #e8eefc;
  --blue-border: #c3d3f7;

  /* --- Meaning ----------------------------------------------------------- */
  --attention: #92610a;
  --attention-bg: #fdf4e3;
  --attention-border: #f0dcae;
  --attention-dot: #d97706;
  --positive: #14713d;
  --positive-bg: #e7f5ec;
  --positive-border: #b9e0c8;
  --negative: #9f1239;
  --negative-bg: #fdecef;
  --negative-border: #f3c2cd;
  --neutral: #4b5563;
  --neutral-bg: #f1f2f4;
  --neutral-border: #dcdee3;
  --muted: #8b8f98;
  --muted-bg: #f4f5f6;
  --muted-border: #e4e5e9;

  --focus: #4f46e5;

  /* --- Charts: roles, never hues ----------------------------------------- */
  --chart-treatment: #4f46e5;
  --chart-counterfactual: #9aa0aa;
  --chart-pending: #d97706;
  --chart-band: rgb(79 70 229 / 12%);
  --chart-target: #14713d;
  --chart-target-bg: rgb(20 113 61 / 7%);
  --chart-rule: #61656e;
  --chart-grid: #ecedf0;
  --chart-axis: #8b8f98;
  --chart-tooltip-bg: #16181d;
  --chart-tooltip-text: #ffffff;
  --chart-series-1: #4f46e5;
  --chart-series-2: #0f766e;
  --chart-series-3: #b45309;
  --chart-series-4: #7c3aed;
  --chart-series-5: #0369a1;
  --chart-series-6: #9d174d;

  /* --- Space ------------------------------------------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* --- Radius ------------------------------------------------------------ */
  --r-sm: 4px;
  --r: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* --- Type -------------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --t-pill: 11px;
  --t-xs: 12px;
  --t-cell: 13px;
  --t-body: 14px;
  --t-lead: 16px;
  --t-h1: 20px;
  --t-stat: 32px;
  --t-hero: 40px;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.25;
  --lh-body: 1.5;

  /* --- Layout ------------------------------------------------------------ */
  --shell-max: 1200px;
  --gutter: 24px;
  --topbar-h: 56px;
  --row-h: 40px;
  --card-pad: 16px;

  /* --- Motion: a ~120ms fade on HTMX swaps, and nothing more ------------- */
  --swap-ms: 120ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #121317;
    --bg-sunken: #0d0e11;
    --bg-raised: #191b20;
    --bg-hover: #22242b;
    --bg-inset: #1e2027;
    --border: #2b2e36;
    --border-strong: #3d414b;
    --text: #eceef2;
    --text-muted: #a2a7b2;
    --text-faint: #767c88;
    --overlay: rgb(0 0 0 / 60%);

    --accent: #8b85f5;
    --accent-strong: #a29bfa;
    --accent-on: #16181d;
    --accent-bg: #23233c;
    --accent-border: #3b3a63;

    --cool: #aeb4bf;
    --cool-bg: #23262d;
    --cool-border: #363a44;
    --blue: #7aa5f5;
    --blue-bg: #1c2436;
    --blue-border: #2f3d5a;

    --attention: #e3ac52;
    --attention-bg: #2c2415;
    --attention-border: #4a3a1c;
    --attention-dot: #e3ac52;
    --positive: #66c98d;
    --positive-bg: #16281d;
    --positive-border: #26452f;
    --negative: #f38ba3;
    --negative-bg: #2d181e;
    --negative-border: #4d2833;
    --neutral: #aeb4bf;
    --neutral-bg: #23262d;
    --neutral-border: #363a44;
    --muted: #767c88;
    --muted-bg: #1c1e24;
    --muted-border: #2b2e36;

    --focus: #8b85f5;

    --chart-treatment: #8b85f5;
    --chart-counterfactual: #767c88;
    --chart-pending: #e3ac52;
    --chart-band: rgb(139 133 245 / 18%);
    --chart-target: #66c98d;
    --chart-target-bg: rgb(102 201 141 / 9%);
    --chart-rule: #a2a7b2;
    --chart-grid: #262931;
    --chart-axis: #767c88;
    --chart-tooltip-bg: #eceef2;
    --chart-tooltip-text: #16181d;
    --chart-series-1: #8b85f5;
    --chart-series-2: #4bb3a8;
    --chart-series-3: #d99a4e;
    --chart-series-4: #b39cf7;
    --chart-series-5: #62a8db;
    --chart-series-6: #e78aa8;
  }
}