/* Design-system tokens for the redesign (web/ui/). THE ONLY file under web/
   allowed to contain a colour literal — every other file in web/ui/ (and
   every later page built on it) reaches colour only through these custom
   properties. tests/web/test_ui_design_system.py enforces this and also
   checks ink/ink-muted/ink-faint contrast >= 4.5:1 in both themes.

   Safety colour rule (operator, 2026-09-23) — do not "simplify" this away:
     - quiet / vetoed   = NEUTRAL GREY. This is the normal resting state of a
       safety-critical system that is not emitting. It must never look like
       an alarm.
     - ARMED / slewing  = cyan outline (getting ready, not yet loud)
     - EMITTING         = the ONE loud colour, magenta. Nothing else on any
       page may use this hue, or it stops meaning "sound is on".
     - FAULT            = red
     - stale / unknown input = grey hatch + a literal "?" glyph (never plain
       grey — see .badge--stale in components.css)
     - warning / degraded    = amber
     - green   = "link/comms OK" ONLY. Never a safety state. A green light
       must always answer "is the wire up", never "is it safe". Operator,
       2026-10-08: "audit chain intact" and "commissioning step done" are NOT
       link states and use the neutral DONE pair (--state-done-*, a brand-
       slate tone: not green, not magenta, not red).
   State colour is never carried by colour alone: every badge pairs colour
   with a word and a shape/icon (see components.css .badge). */

:root {
  color-scheme: light;

  /* surfaces / ink */
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f0f2f0;
  --surface-2: #eef0ec;
  --ink: #14181c;
  --ink-muted: #4d545c;
  --ink-faint: #626a73;       /* >= 4.5:1 on surface, card, canvas, sunken (test) */
  --line: #d7dbd4;
  --line-strong: #b7bdb4;

  /* product tints — navigation only, never a safety state */
  --airport: #1f5fa8;
  --airport-tint: #e7eef8;
  --roof: #93590f;
  --roof-tint: #f6ecdc;

  /* BRAND (navy) — CHROME ONLY: the app shell's top bar, the active
     sidebar pill, the logo, neutral data (detection bars). Never a safety
     state: navy says "this product", not "safe" or "quiet". */
  --brand: #13294b;
  --brand-hover: #1c3864;
  --brand-ink: #ffffff;
  --brand-ink-muted: #c3cde0;
  --brand-tint: #e9eef6;
  --brand-line: #2c4671;
  --nav-active: #13294b;      /* the filled sidebar pill */
  --link: #13294b;
  --canvas: #f3f5f8;         /* the app's background behind the cards */
  --card: #ffffff;
  --card-line: #e1e5ec;
  --row-alt: #f7f8fa;
  --chart-grid: #e6e9ef;
  --chart-det: #3a5a8c;       /* detections: brand-neutral */
  --chart-det-hover: #13294b;
  --chart-veto: #9aa1aa;      /* vetoed time: the quiet grey */
  --chart-emit-soft: #e79ccb; /* sweep bursts: still sound, still magenta */

  /* safety states */
  --state-quiet-fg: #40464d;
  --state-quiet-bg: #e7e9e6;
  --state-quiet-line: #b7bdb4;
  --state-armed-fg: #0a6e73;
  --state-armed-bg: #e2f6f7;
  --state-armed-line: #16a3ab;
  --state-emit-fg: #ffffff;
  --state-emit-bg: #b3007a;
  --state-emit-line: #7a0055;
  --state-fault-fg: #ffffff;
  --state-fault-bg: #b3261e;
  --state-fault-line: #7a1a15;
  --state-stale-fg: #55504a;
  --state-stale-bg: #efe9df;
  --state-stale-line: #a89f8f;
  --state-warn-fg: #6b4300;
  --state-warn-bg: #fff1d6;
  --state-warn-line: #c98a00;
  --state-link-ok: #1c7a3e;
  --state-link-bg: #e4f4e9;
  --state-done-fg: #2c4671;
  --state-done-bg: #e9eef6;
  --state-done-line: #8a9bb8;

  /* label chips: [M] measured / [O] operator / [D] derived / [G] guess */
  --chip-m-fg: #0a5c2e; --chip-m-bg: #e2f5e8;
  --chip-o-fg: #0a4b8c; --chip-o-bg: #e4eefb;
  --chip-d-fg: #5c4a0a; --chip-d-bg: #f7f0dc;
  --chip-g-fg: #7a1414; --chip-g-bg: #fbe4e4;

  --focus-ring: #1f5fa8;
  --on-tone: #ffffff;       /* text on a solid --airport / --roof fill */
  --shadow: 0 1px 2px rgba(20,24,28,.07), 0 6px 20px rgba(20,24,28,.07);

  /* .btn-veto: deliberately NOT built from the emit colour (magenta must
     mean only "sound is on") and deliberately near-invariant across themes —
     a stop button should not change look with light/dark preference. */
  --btn-veto-bg: #1a1d21;
  --btn-veto-hover-bg: #000000;
  --btn-veto-fg: #ffffff;
  --btn-veto-border: #ffffff;

  /* print (@media print in components.css): light paper regardless of the
     screen theme, so a printed veto list is never white-on-dark. */
  --print-bg: #ffffff;
  /* product photos are shot on white; their frame stays white in both themes */
  --photo-bg: #ffffff;
  --print-fg: #000000;
  --print-line: #000000;

  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px;
  --space-5: 32px; --space-6: 48px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --text-body: 15px; --text-label: 13px; --text-ops: 16px;
  --text-h1: clamp(24px, 3vw, 34px); --text-h2: 20px;
  --line-body: 1.55;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #12161b;
    --surface-raised: #1a2028;
    --surface-sunken: #0b0e12;
    --surface-2: #1c232b;
    --ink: #e9edf0;
    --ink-muted: #aab4bd;
    --ink-faint: #7c8791;
    --line: #2a323b;
    --line-strong: #3a434d;

    --airport: #7db1f2;
    --airport-tint: #16233a;
    --roof: #e3a54f;
    --roof-tint: #362408;

    --brand: #0d1a31; --brand-hover: #172a4c; --brand-ink: #eef2f8;
    --brand-ink-muted: #9fb0cc; --brand-tint: #1a2740; --brand-line: #2a3f63;
    --nav-active: #2d4f86; --link: #9fbef0;
    --canvas: #0e1217; --card: #161c24; --card-line: #262f3b; --row-alt: #1a212b;
    --chart-grid: #29323e; --chart-det: #7d9fd6; --chart-det-hover: #aac3ec;
    --chart-veto: #5d6672; --chart-emit-soft: #8f3a6d;

    --state-quiet-fg: #c7ccd1;
    --state-quiet-bg: #262c33;
    --state-quiet-line: #454e57;
    --state-armed-fg: #7fe6ec;
    --state-armed-bg: #0e2f31;
    --state-armed-line: #2fc4cc;
    --state-emit-fg: #ffffff;
    --state-emit-bg: #e0399f;
    --state-emit-line: #ff6ecb;
    --state-fault-fg: #ffffff;
    --state-fault-bg: #e04a41;
    --state-fault-line: #ff8079;
    --state-stale-fg: #cfc8ba;
    --state-stale-bg: #2a2620;
    --state-stale-line: #6c6252;
    --state-warn-fg: #ffce7a;
    --state-warn-bg: #382a09;
    --state-warn-line: #c98a00;
    --state-link-ok: #52c97a;
    --state-link-bg: #10301c;
    --state-done-fg: #b9c9e4;
    --state-done-bg: #1a2740;
    --state-done-line: #4a6490;

    --chip-m-fg: #7fd99a; --chip-m-bg: #113321;
    --chip-o-fg: #8cb8f0; --chip-o-bg: #0f2138;
    --chip-d-fg: #e2cf83; --chip-d-bg: #362b0c;
    --chip-g-fg: #f2a3a3; --chip-g-bg: #3a1212;

    --focus-ring: #7db1f2;
    --on-tone: #06110e;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #12161b; --surface-raised: #1a2028; --surface-sunken: #0b0e12;
  --surface-2: #1c232b; --ink: #e9edf0; --ink-muted: #aab4bd;
  --ink-faint: #7c8791; --line: #2a323b; --line-strong: #3a434d;
  --airport: #7db1f2; --airport-tint: #16233a;
  --roof: #e3a54f; --roof-tint: #362408;
  --brand: #0d1a31; --brand-hover: #172a4c; --brand-ink: #eef2f8;
  --brand-ink-muted: #9fb0cc; --brand-tint: #1a2740; --brand-line: #2a3f63;
    --nav-active: #2d4f86; --link: #9fbef0;
  --canvas: #0e1217; --card: #161c24; --card-line: #262f3b; --row-alt: #1a212b;
  --chart-grid: #29323e; --chart-det: #7d9fd6; --chart-det-hover: #aac3ec;
  --chart-veto: #5d6672; --chart-emit-soft: #8f3a6d;
  --state-quiet-fg: #c7ccd1; --state-quiet-bg: #262c33; --state-quiet-line: #454e57;
  --state-armed-fg: #7fe6ec; --state-armed-bg: #0e2f31; --state-armed-line: #2fc4cc;
  --state-emit-fg: #ffffff; --state-emit-bg: #e0399f; --state-emit-line: #ff6ecb;
  --state-fault-fg: #ffffff; --state-fault-bg: #e04a41; --state-fault-line: #ff8079;
  --state-stale-fg: #cfc8ba; --state-stale-bg: #2a2620; --state-stale-line: #6c6252;
  --state-warn-fg: #ffce7a; --state-warn-bg: #382a09; --state-warn-line: #c98a00;
  --state-link-ok: #52c97a; --state-link-bg: #10301c;
  --state-done-fg: #b9c9e4; --state-done-bg: #1a2740; --state-done-line: #4a6490;
  --chip-m-fg: #7fd99a; --chip-m-bg: #113321;
  --chip-o-fg: #8cb8f0; --chip-o-bg: #0f2138;
  --chip-d-fg: #e2cf83; --chip-d-bg: #362b0c;
  --chip-g-fg: #f2a3a3; --chip-g-bg: #3a1212;
  --focus-ring: #7db1f2;
  --on-tone: #06110e;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 28px rgba(0,0,0,.4);
}

:root[data-theme="light"] { color-scheme: light; }