/* Command Center UI, design tokens.
   Three blocks, one meaning each:
     1. bare :root                      the light theme, complete (every token is declared here first)
     2. @media (prefers-color-scheme)   dark when the system asks for it, unless the page is pinned to light
     3. :root[data-theme="dark"]        dark when the user picked it explicitly
   Blocks 2 and 3 carry identical values; change them together. Components use these tokens only,
   never a literal colour, so a theme or an accent change is an edit in this file.
   After any colour change: python3 scripts/check_contrast.py <this file>

   Differences from the Command Center console (2026-09): --ink-faint light #76828F -> #636D78,
   --ink-faint dark #76828F -> #7E8A96, --warn light #9A6A00 -> #8F6300. The originals missed WCAG AA
   for small text (3.5 to 4.4); the shift keeps the hue and the look. */

:root {
  --ground: #F5F7FA;          /* page background, blue-grey, never pure grey */
  --surface: #FFFFFF;         /* panels, tiles, the rail */
  --surface-sunk: #EDF1F6;    /* table heads, hovered rows, log blocks, idle chips */
  --line: #D8DFE8;            /* borders of controls */
  --line-soft: #E7ECF2;       /* hairlines between rows, panel borders */
  --ink: #121A24;             /* text */
  --ink-soft: #4A5765;        /* secondary text, nav links */
  --ink-faint: #636D78;       /* labels, hints, column heads, second lines */
  --accent: #C4006A;          /* operator magenta: selection, the primary action, a key identifier */
  --accent-ink: #FFFFFF;      /* text on the accent */
  --accent-wash: #FBE8F1;     /* selected row, pressed facet */
  --ok: #1F7A54;
  --warn: #8F6300;
  --crit: #B33A31;
  --ok-wash: #E4F2EB;
  --warn-wash: #F7EEDA;
  --crit-wash: #F8E7E5;
  --shadow: 0 1px 2px rgba(18, 26, 36, .06), 0 8px 24px rgba(18, 26, 36, .05);   /* floating things only */
  --radius: 10px;             /* panels and tiles; controls use 8px, chips 999px */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;            /* headings and big figures */
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;           /* the interface */
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;   /* ids, versions, sizes, timings */
}

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

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0F1620;
    --surface: #18212D;
    --surface-sunk: #131C26;
    --line: #27333F;
    --line-soft: #1F2A36;
    --ink: #E7EDF4;
    --ink-soft: #A8B5C2;
    --ink-faint: #7E8A96;
    --accent: #FF3D96;
    --accent-ink: #1A0410;
    --accent-wash: #2A101E;
    --ok: #59C494;
    --warn: #E0AE4A;
    --crit: #F0756A;
    --ok-wash: #14291F;
    --warn-wash: #2A2214;
    --crit-wash: #2C1815;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0F1620;
  --surface: #18212D;
  --surface-sunk: #131C26;
  --line: #27333F;
  --line-soft: #1F2A36;
  --ink: #E7EDF4;
  --ink-soft: #A8B5C2;
  --ink-faint: #7E8A96;
  --accent: #FF3D96;
  --accent-ink: #1A0410;
  --accent-wash: #2A101E;
  --ok: #59C494;
  --warn: #E0AE4A;
  --crit: #F0756A;
  --ok-wash: #14291F;
  --warn-wash: #2A2214;
  --crit-wash: #2C1815;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
}