/*
 * tokens.css — design tokens, light + dark (design §9).
 *
 * `:root` carries the light set; `[data-theme="dark"]` overrides it.
 * The pre-paint inline script in base.html sets data-theme on <html>
 * from localStorage before first render (WebView2-safe; no flash).
 * Only these custom properties define colors/radii — dashboard.css
 * consumes them and must not hardcode palette values.
 */

:root {
  /* Surfaces */
  --bg: #f5f6f8;
  --bg-raised: #ffffff;
  --bg-inset: #eceef2;
  --bg-overlay: rgba(20, 24, 32, 0.45);

  /* Text */
  --text: #1c2430;
  --text-muted: #5b6673;
  --text-faint: #8a93a1;
  --text-inverse: #f7f9fc;

  /* Accents & semantics */
  --accent: #2563eb;
  --accent-soft: #dbe7ff;
  --ok: #1a7f37;
  --ok-soft: #d9f0e1;
  --warn: #9a6700;
  --warn-soft: #fff2d0;
  --err: #cf222e;
  --err-soft: #ffe9ea;
  --idle: #6b7280;
  --idle-soft: #e8eaee;

  /* Lines & shape */
  --border: #d3d9e2;
  --border-strong: #b7c0cc;
  --radius: 6px;
  --radius-lg: 10px;

  /* Shadows (light) */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-2: 0 8px 24px rgba(16, 24, 40, 0.14);

  /* Charts / sparklines */
  --chart-line: #2563eb;
  --chart-fill: rgba(37, 99, 235, 0.15);

  /* Code / log surfaces */
  --mono-bg: #f2f4f7;
  --mono-text: #24303f;
}

[data-theme="dark"] {
  --bg: #10151d;
  --bg-raised: #1a212c;
  --bg-inset: #141a23;
  --bg-overlay: rgba(4, 6, 10, 0.6);

  --text: #e6ecf4;
  --text-muted: #9aa7b6;
  --text-faint: #6b7889;
  --text-inverse: #171e28;

  --accent: #6ea8fe;
  --accent-soft: #223354;
  --ok: #4ac26b;
  --ok-soft: #12301d;
  --warn: #d9a314;
  --warn-soft: #33270a;
  --err: #ff7b72;
  --err-soft: #3d1418;
  --idle: #9aa7b6;
  --idle-soft: #232b36;

  --border: #2c3644;
  --border-strong: #404c5d;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.55);

  --chart-line: #6ea8fe;
  --chart-fill: rgba(110, 168, 254, 0.18);

  --mono-bg: #0d1219;
  --mono-text: #cfe0f0;
}