/* Design tokens: the palette and the light/dark switch.
   Kept on their own so another page can adopt the dashboard's
   colours without inheriting its component rules. The Print page
   needs exactly that -- the letter templates carry class names of
   their own (.brand, .label, .row) and a dashboard rule reaching
   one of them would change a printed letter. */
:root {
  /* Dark theme (default) */
  --bg: #0f1117;
  --bg-2: #161a23;
  --bg-3: #1f2530;
  --fg: #e6e8eb;
  --fg-dim: #9aa3af;
  --accent: #4c8bf5;
  --accent-2: #6da5ff;
  --ok: #21bf73;
  --warn: #e0a233;
  --err: #e0533a;
  --run: #d68dff;
  --border: #2a3140;
  --terminal-bg: #0a0d12;
  --terminal-fg: #d8dbe2;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --mono: ui-monospace, "Cascadia Mono", "Consolas", "Menlo", monospace;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f6f8fb;
  --bg-2: #ffffff;
  --bg-3: #eef1f6;
  --fg: #1a1d24;
  --fg-dim: #5c6675;
  --accent: #2360c4;
  --accent-2: #1d4f9f;
  --ok: #0e8f54;
  --warn: #a16a05;
  --err: #c0392b;
  --run: #7a3aaf;
  --border: #d7dde8;
  --terminal-bg: #1a1d24;
  --terminal-fg: #e6e8eb;
  --shadow: 0 1px 3px rgba(15, 20, 35, 0.08);
  color-scheme: light;
}