/* Design tokens — inherited into every component's shadow DOM */
:root {
  color-scheme: dark;
  --bg: #0b1220;
  --bg-grad: radial-gradient(1200px 600px at 10% -10%, #0e2a47 0%, transparent 60%), radial-gradient(900px 500px at 110% 0%, #1a1f4a 0%, transparent 55%);
  --surface: #111a2c;
  --surface-2: #16223a;
  --surface-3: #1d2b47;
  --border: #22314f;
  --text: #e6edf7;
  --text-2: #9fb0c9;
  --text-3: #6b7c97;
  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --accent-ink: #04121f;
  --ok: #22c55e;
  --ok-bg: rgba(34, 197, 94, .14);
  --warn: #f59e0b;
  --warn-bg: rgba(245, 158, 11, .15);
  --bad: #ef4444;
  --bad-bg: rgba(239, 68, 68, .15);
  --idle: #64748b;
  --idle-bg: rgba(100, 116, 139, .18);
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.25);
  --radius: 14px;
  --radius-sm: 9px;
  --font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "Cascadia Code", Consolas, ui-monospace, "SF Mono", monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6fb;
  --bg-grad: radial-gradient(1200px 600px at 10% -10%, #dbeefe 0%, transparent 60%), radial-gradient(900px 500px at 110% 0%, #e6e8ff 0%, transparent 55%);
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --surface-3: #eaf0f8;
  --border: #dbe3ef;
  --text: #0f1b2d;
  --text-2: #4a5b75;
  --text-3: #7b8aa3;
  --accent: #0284c7;
  --accent-strong: #0369a1;
  --accent-ink: #ffffff;
  --ok: #16a34a;
  --ok-bg: rgba(22, 163, 74, .12);
  --warn: #d97706;
  --warn-bg: rgba(217, 119, 6, .13);
  --bad: #dc2626;
  --bad-bg: rgba(220, 38, 38, .11);
  --idle: #64748b;
  --idle-bg: rgba(100, 116, 139, .14);
  --shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 6px 20px rgba(15, 27, 45, .06);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f3f6fb;
    --bg-grad: radial-gradient(1200px 600px at 10% -10%, #dbeefe 0%, transparent 60%), radial-gradient(900px 500px at 110% 0%, #e6e8ff 0%, transparent 55%);
    --surface: #ffffff;
    --surface-2: #f6f8fc;
    --surface-3: #eaf0f8;
    --border: #dbe3ef;
    --text: #0f1b2d;
    --text-2: #4a5b75;
    --text-3: #7b8aa3;
    --accent: #0284c7;
    --accent-strong: #0369a1;
    --accent-ink: #ffffff;
    --ok: #16a34a;
    --ok-bg: rgba(22, 163, 74, .12);
    --warn: #d97706;
    --warn-bg: rgba(217, 119, 6, .13);
    --bad: #dc2626;
    --bad-bg: rgba(220, 38, 38, .11);
    --idle: #64748b;
    --idle-bg: rgba(100, 116, 139, .14);
    --shadow: 0 1px 2px rgba(15, 27, 45, .05), 0 6px 20px rgba(15, 27, 45, .06);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg-grad), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}