/* BooleX design tokens: one source for the Web UI and the website (docs/design/ui.md §5).
   This file is canonical. website/tokens.css is a byte-identical copy; a test fails when they differ
   (edge/tests/test_design_tokens.py).

   Bright is the default. The dark control-room theme applies with data-theme="dark" (the Web UI,
   chosen per user) or, where no data-theme is set, with the system setting (the website).
   The navy "frame" (top bars, website bands) carries the brand in both themes.
   Colour is for alarm priority and abnormal states only, always paired with text (ISA-101).
   Every text pair here reaches WCAG 2.2 AA (4.5:1) on the surfaces it is used on. */
:root {
  --bg: #ffffff; --bg-alt: #f4f5f7; --surface: #ffffff;
  --ink: #101826; --muted: #5b6575; --line: #e1e4e9; --line-strong: #c9ced6;
  --code-bg: #f2f4f6; --link: #1f5e92; --highlight: rgba(31, 94, 146, 0.14);
  --prediction: #8a4b00; --prediction-band: rgba(138, 75, 0, 0.14);  /* model predictions */
  /* copper: text and marks; filled controls use --action with --on-action (#b4612f with white is 4.48:1) */
  --accent: #a85a2b; --accent-soft: #f7eae1;
  --action: #a85a2b; --on-action: #ffffff;
  --alarm-hi: #c93b3b; --alarm-med: #8f5c00; --ok: #23704a;
  /* ISA-18.2 alarm priorities, each also shown by its word and shape (REQ-ASST-075) */
  --prio-critical: #b3261e; --prio-high: #a34700; --prio-medium: #7a5c00; --prio-low: #5e4a9e;
  /* brand frame, navy in both themes */
  --frame: #0b1422; --frame-2: #111d2f; --frame-line: #22314a;
  --frame-ink: #e9edf3; --frame-muted: #a3afc2; --frame-accent: #e39a6a; --on-frame-accent: #1a0f08;
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1422; --bg-alt: #111d2f; --surface: #111d2f;
    --ink: #e9edf3; --muted: #93a0b4; --line: #22314a; --line-strong: #2f4262;
    --code-bg: #16253b; --link: #8cc2f0; --highlight: rgba(140, 194, 240, 0.18);
    --prediction: #f2b46a; --prediction-band: rgba(242, 180, 106, 0.18);
    --accent: #e39a6a; --accent-soft: #2c1f17;
    --action: #e39a6a; --on-action: #0b1422;
    --alarm-hi: #ff8a8a; --alarm-med: #e0a030; --ok: #5cc48e;
    --prio-critical: #ff8a8a; --prio-high: #ffa65c; --prio-medium: #e6c74a; --prio-low: #c3a6f0;
    --frame: #070d17; --frame-2: #0e1828; --frame-line: #1c2a40;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1422; --bg-alt: #111d2f; --surface: #111d2f;
  --ink: #e9edf3; --muted: #93a0b4; --line: #22314a; --line-strong: #2f4262;
  --code-bg: #16253b; --link: #8cc2f0; --highlight: rgba(140, 194, 240, 0.18);
  --prediction: #f2b46a; --prediction-band: rgba(242, 180, 106, 0.18);
  --accent: #e39a6a; --accent-soft: #2c1f17;
  --action: #e39a6a; --on-action: #0b1422;
  --alarm-hi: #ff8a8a; --alarm-med: #e0a030; --ok: #5cc48e;
  --prio-critical: #ff8a8a; --prio-high: #ffa65c; --prio-medium: #e6c74a; --prio-low: #c3a6f0;
  --frame: #070d17; --frame-2: #0e1828; --frame-line: #1c2a40;
  color-scheme: dark;
}