:root, :root[data-theme="dark"] {
  --bg: #0a0e17;
  --bg-soft: #0e1420;
  --card-solid: #111827;
  --text: #e5e9f0;
  --text-dim: #8b94a7;
  --accent: #1f50ff;
  --accent-2: #1f6cff;
  --accent-dark: #173bbf;
  --up: #10b981;
  --degraded: #f59e0b;
  --down: #ef4444;
  --maintenance: #eab308;
  --nodata: #2a3242;
  --border: color-mix(in srgb, #e5e9f0 12%, transparent);
  --card: color-mix(in srgb, #e5e9f0 3%, transparent);
}
:root[data-theme="light"] {
  --bg: #f5f7fb;
  --bg-soft: #ffffff;
  --card-solid: #ffffff;
  --text: #0f172a;
  --text-dim: #64748b;
  --accent: #1f50ff;
  --accent-2: #1f6cff;
  --accent-dark: #173bbf;
  --up: #059669;
  --degraded: #d97706;
  --down: #dc2626;
  --maintenance: #ca8a04;
  --nodata: #cbd5e1;
  --border: color-mix(in srgb, #0f172a 12%, transparent);
  --card: color-mix(in srgb, #0f172a 3%, transparent);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
  --bg: #f5f7fb;
  --bg-soft: #ffffff;
  --card-solid: #ffffff;
  --text: #0f172a;
  --text-dim: #64748b;
  --accent: #1f50ff;
  --accent-2: #1f6cff;
  --accent-dark: #173bbf;
  --up: #059669;
  --degraded: #d97706;
  --down: #dc2626;
  --maintenance: #ca8a04;
  --nodata: #cbd5e1;
  --border: color-mix(in srgb, #0f172a 12%, transparent);
  --card: color-mix(in srgb, #0f172a 3%, transparent);
  }
}