/* LTC console tokens. The same palette as the progress page (progress/style.css), so the console
   and the build page read as one product. Dark is the default. Light is its own token set, applied
   by prefers-color-scheme: light (unless dark was picked) or by data-theme="light". Text tokens are
   chosen for WCAG AA on the surfaces they sit on (measured in the browser; see docs/web.md). */
:root {
  color-scheme: dark;
  --bg: #0a0d12;
  --bg-raised: #10141b;
  --panel: #12161f;
  --panel-2: #161c27;
  --inset: #0d1015;
  --border: #232a38;
  --border-soft: #1a212c;
  --border-control: #5f6b7e; /* input/select/textarea/segmented edges: >= 3:1 on --inset, --panel, --panel-2, --bg-raised, --bg (WCAG 1.4.11) */
  --text: #e7eaf1;
  --text-dim: #9aa5b6;
  --text-faint: #808a98;
  --accent: #6c93ff;
  --accent-ink: #0a0d12;
  --accent-soft: #1b2440;
  --good: #34d399;
  --good-soft: #0f2a22;
  --bad: #f0554b;
  --bad-soft: #2d1515;
  --warn: #f5a623;
  --warn-soft: #2b2110;
  --s-p50: #8fa3bf;
  --s-p95: #6c93ff;
  --s-p99: #f5a623;
  --s-vus: #b99cff;
  --grid: #1e2533;
  --focus: #9db8ff;
  --mono: ui-monospace, "Cascadia Code", "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --tap: 44px; /* minimum touch target on phones and coarse pointers (touch.css) */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 8px 24px -12px rgb(0 0 0 / 0.6), 0 2px 6px -2px rgb(0 0 0 / 0.4);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f6f9; --bg-raised: #ffffff; --panel: #ffffff; --panel-2: #f1f4f8; --inset: #f7f8fb;
    --border: #d5dbe4; --border-soft: #e4e8ee; --border-control: #7f8a9b;
    --text: #121822; --text-dim: #455062; --text-faint: #5b6575;
    --accent: #2f58d0; --accent-ink: #ffffff; --accent-soft: #e6ecfc;
    --good: #0d7a50; --good-soft: #e3f4ec; --bad: #c22f26; --bad-soft: #fbe9e7; --warn: #935700; --warn-soft: #fbf0dc;
    --s-p50: #5b6575; --s-p95: #2f58d0; --s-p99: #b36b00; --s-vus: #6d3fc9;
    --grid: #e4e8ee; --focus: #2f58d0;
    --shadow: 0 8px 24px -14px rgb(20 30 50 / 0.2), 0 2px 6px -2px rgb(20 30 50 / 0.08);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f9; --bg-raised: #ffffff; --panel: #ffffff; --panel-2: #f1f4f8; --inset: #f7f8fb;
  --border: #d5dbe4; --border-soft: #e4e8ee; --border-control: #7f8a9b;
  --text: #121822; --text-dim: #455062; --text-faint: #5b6575;
  --accent: #2f58d0; --accent-ink: #ffffff; --accent-soft: #e6ecfc;
  --good: #0d7a50; --good-soft: #e3f4ec; --bad: #c22f26; --bad-soft: #fbe9e7; --warn: #935700; --warn-soft: #fbf0dc;
  --s-p50: #5b6575; --s-p95: #2f58d0; --s-p99: #b36b00; --s-vus: #6d3fc9;
  --grid: #e4e8ee; --focus: #2f58d0;
  --shadow: 0 8px 24px -14px rgb(20 30 50 / 0.2), 0 2px 6px -2px rgb(20 30 50 / 0.08);
}