/* AI Gateway — Dark Theme Colors */
html[data-theme="dark"] {
  --bg-url: url('/htmx/aigateway-darkt.jpg');
  --glass-bg: oklch(0.15 0 0);
  --card-border: rgba(255,255,255,0.06);
  --card-shadow: 0 4px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
  --hero-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 20px rgba(99,102,241,0.15);
  --hero-hover-border: rgba(255,255,255,0.15);
  --table-rule: rgba(255,255,255,0.08);
  --table-hover: rgba(255,255,255,0.04);
  --dialog-backdrop: rgba(0,0,0,0.4);
  --btn-border: rgba(255,255,255,0.10);
  --btn-hover-border: rgba(255,255,255,0.20);
  --btn-shadow: none;
  --btn-color: #ccc;
  --chart-tick: #fff;
  --chart-grid: rgba(255,255,255,0.08);
  --badge-ok-bg: transparent;
  --badge-ok-text: #10b981;
  --badge-warn-bg: transparent;
  --badge-warn-text: #fbbf24;
  --badge-err-bg: var(--del-color, #ef4444);
  --badge-err-text: #fff;
  --text-primary: #e0e0e0;
  --text-muted: #999;
}

html[data-theme="dark"] body {
  color: var(--text-primary);
}
html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] strong, html[data-theme="dark"] th,
html[data-theme="dark"] td, html[data-theme="dark"] small {
  color: var(--text-primary);
}
html[data-theme="dark"] header hgroup h1 {
  color: #fff;
}
html[data-theme="dark"] header hgroup p {
  color: #999;
}
html[data-theme="dark"] .latency-card {
  border: 1px solid var(--card-border);
}
html[data-theme="dark"] .latency-card h2 { color: #fff; }
html[data-theme="dark"] .latency-card small { color: #ccc; }
html[data-theme="dark"] .hero-card h2 { color: #fff; }
html[data-theme="dark"] .hero-card small { color: #ccc; }