/* Ops Noir palette (AlertHub design-system.md). Dark-first.
   Use var(--color-*) or aliases (--bg, --ink, --card, …). No hardcoded page colors. */

:root {
  --radius: 6px;
  --radius-lg: 8px;

  --color-bg: #0c0c0f;
  --color-bg-subtle: #131318;
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-hover: rgba(255, 255, 255, 0.09);
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-hover: rgba(255, 255, 255, 0.16);

  --color-accent: #f59e0b;
  --color-accent-ring: rgba(245, 158, 11, 0.30);
  --color-accent-foreground: #0a0a0a;
  --color-accent-bg: rgba(245, 158, 11, 0.12);
  --color-accent-bg-hover: rgba(245, 158, 11, 0.2);
  --color-accent-border: rgba(245, 158, 11, 0.3);
  --color-accent-border-hover: rgba(245, 158, 11, 0.6);

  --color-critical: #dc2626;
  --color-critical-bg: rgba(220, 38, 38, 0.12);
  --color-high: #ea580c;
  --color-high-bg: rgba(234, 88, 12, 0.12);
  --color-average: #f59e0b;
  --color-average-bg: rgba(245, 158, 11, 0.12);
  --color-warning: #eab308;
  --color-warning-bg: rgba(234, 179, 8, 0.12);
  --color-info: #60a5fa;
  --color-info-bg: rgba(96, 165, 250, 0.12);
  --color-ok: #4ade80;
  --color-ok-bg: rgba(74, 222, 128, 0.12);

  --color-text: #eef0f2;
  --color-text-muted: #9aa0aa;
  --color-text-dim: #667084;

  --color-nav-active: #f59e0b;
  --color-nav-active-bg: rgba(245, 158, 11, 0.12);
  --color-nav-active-border: rgba(245, 158, 11, 0.25);

  --color-panel-bg: #16161a;
  --color-panel-border: rgba(255, 255, 255, 0.12);
  --color-panel-hover: #1e1e24;
  --color-panel-selected: #25252b;

  --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.22);

  --bg: var(--color-bg);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --line: var(--color-border);
  --accent: var(--color-accent);
  --accent-fg: var(--color-accent-foreground);
  --card: var(--color-panel-bg);
  --surface: var(--color-panel-bg);
  --surface-soft: var(--color-bg-subtle);
  --sidebar: var(--color-panel-bg);
  --sidebar-text: var(--color-text);
  --sidebar-muted: var(--color-text-muted);
  --input-bg: var(--color-bg);
  --hover: var(--color-surface-hover);
  --topbar: var(--color-panel-bg);
  --bad: var(--color-critical);
  --bad-bg: var(--color-critical-bg);
  --warn: var(--color-warning);
  --warn-bg: var(--color-warning-bg);
  --good: var(--color-ok);
  --good-bg: var(--color-ok-bg);

  color-scheme: dark;
}

html.light,
html[data-theme="light"],
html[data-theme-mode="light"] {
  --color-bg: #f4f4f5;
  --color-bg-subtle: #e4e4e7;
  --color-surface: rgba(0, 0, 0, 0.04);
  --color-surface-hover: rgba(0, 0, 0, 0.08);
  --color-border: rgba(0, 0, 0, 0.12);
  --color-border-hover: rgba(0, 0, 0, 0.2);

  --color-nav-active: #d97706;
  --color-nav-active-bg: rgba(217, 119, 6, 0.14);
  --color-nav-active-border: rgba(217, 119, 6, 0.35);

  --color-accent: #d97706;
  --color-accent-ring: rgba(217, 119, 6, 0.35);
  --color-accent-foreground: #ffffff;
  --color-accent-bg: rgba(217, 119, 6, 0.12);
  --color-accent-bg-hover: rgba(217, 119, 6, 0.2);
  --color-accent-border: rgba(217, 119, 6, 0.35);
  --color-accent-border-hover: rgba(217, 119, 6, 0.6);
  --color-average: #d97706;
  --color-average-bg: rgba(217, 119, 6, 0.12);

  --color-panel-bg: #ffffff;
  --color-panel-border: rgba(0, 0, 0, 0.12);
  --color-panel-hover: #f4f4f5;
  --color-panel-selected: #e4e4e7;

  --color-text: #18181b;
  --color-text-muted: #52525b;
  --color-text-dim: #71717a;

  --shadow-card: 0 6px 18px rgba(0, 0, 0, 0.06);

  --input-bg: var(--color-panel-bg);

  color-scheme: light;
}

html[data-theme="dark"],
html[data-theme-mode="dark"] {
  color-scheme: dark;
}

html {
  color-scheme: inherit;
}

body {
  color: var(--ink);
  background: var(--bg);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
select,
textarea {
  background: var(--input-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--color-accent-ring);
  outline-offset: 1px;
  border-color: var(--color-accent-border);
}