/* Design tokens from the design handoff (spec/design/handoff/README.md, "Design tokens").
   Light is the default; [data-theme="dark"] on <html> switches every token. */

:root {
  --bg: #f5f7f8;
  --sf: #ffffff;
  --sk: #eef2f4;
  --ln: #d9e0e4;
  --ln2: #e8edf0;
  --fg: #17232b;
  --fg2: #3a4a54;
  --mu: #5b6b75;
  --ac: #1d6a80;
  --acs: #e2f0f4;
  --on-ac: #ffffff;
  --th: #f9fbfb;
  --tool: #fbfcfc;
  --sel: #e2f0f4;
  --hover: #f3f6f7;
  --dash: #c3ccd2;
  --mark-bg: #4B5563;
  --wm1: #9CA3AF;
  --wm2: #4B5563;
  --scrim: rgba(10, 18, 23, .42);
  --shadow: 0 10px 30px rgba(20, 35, 44, .14);
  --in-bg: #ffffff;
  --spark: #1d6a80;
  --sw-off: #d9e0e4;
  --ok: #1f7a4d;
  --ok-s: #e3f3ea;
  --warn: #9a6200;
  --warn-s: #fbf0d9;
  --bad: #b13a2e;
  --bad-s: #f9e4e1;
  --idle: #6c7780;
  --idle-s: #eceff1;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0f171c;
  --sf: #16222a;
  --sk: #1b2a33;
  --ln: #2a3b46;
  --ln2: #223139;
  --fg: #e3ebef;
  --fg2: #c3d0d6;
  --mu: #93a4ae;
  --ac: #5fb4cc;
  --acs: #173640;
  --on-ac: #0f171c;
  --th: #131e25;
  --tool: #141f26;
  --sel: #173640;
  --hover: #1b2a33;
  --dash: #3a4d59;
  --mark-bg: #374151;
  --wm1: rgba(255, 255, 255, .4);
  --wm2: #E5E7EB;
  --scrim: rgba(0, 0, 0, .55);
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --in-bg: #1b2a33;
  --spark: #5fb4cc;
  --sw-off: #2a3b46;
  --ok: #5cc28d;
  --ok-s: #173326;
  --warn: #e2ad4f;
  --warn-s: #382a12;
  --bad: #ef7f72;
  --bad-s: #3d1c19;
  --idle: #9aa6ae;
  --idle-s: #24323b;
  color-scheme: dark;
}