html { background: var(--bg); }

:root {
  --bg: #0c1220;
  --surface: #111827;
  --surface-inset: #080c14;
  --surface-muted: #182233;
  --surface-hover: #1e293b;
  --surface-disabled: #182233;
  --surface-subtle: rgba(148, 163, 184, 0.08);
  --elevated: #182233;
  --border: #1e293b;
  --border-subtle: rgba(148, 163, 184, 0.08);

  --text: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-faint: #475569;
  --on-accent: #ffffff;
  --on-state: #080c14;

  --accent: #06b6d4;
  --accent-hover: #22d3ee;
  --accent-muted: rgba(6, 182, 212, 0.15);
  --accent-faint: rgba(6, 182, 212, 0.03);

  --good: #22c55e;
  --ok: #eab308;
  --bad: #ef4444;
  --vbad: #991b1b;

  --media-bg: #000000;
  --modal-backdrop: rgba(8, 12, 20, 0.92);
  --state-tint-base: #151515;

  --chart-axis: #1e293b;
  --chart-tick: #334155;
  --chart-grid: #182233;
  --chart-label: #64748b;
  --chart-label-strong: #94a3b8;
  --chart-point-stroke: #080c14;
  --chart-row-best: #0c2a1a;
  --chart-row-improved: #0f2d1e;

  --ar-phase-grid: #38bdf8;
  --ar-phase-random: #4ade80;
  --ar-phase-llm: #fb923c;
  --ar-phase-reference: #64748b;

  --st-empty: #64748b;
  --st-solo: #06b6d4;
  --st-parallel: #f59e0b;
  --st-near: #84cc16;
  --st-group: #f97316;
  --st-pulse: #3b82f6;
  --st-unreadable: #ef4444;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f1f5f9;
    --surface: #ffffff;
    --surface-inset: #ffffff;
    --surface-muted: #f8fafc;
    --surface-hover: #e2e8f0;
    --surface-disabled: #f1f5f9;
    --surface-subtle: rgba(15, 23, 42, 0.04);
    --elevated: #f1f5f9;
    --border: #cbd5e1;
    --border-subtle: rgba(15, 23, 42, 0.12);

    --text: #0f172a;
    --text-secondary: #334155;
    --text-muted: #475569;
    --text-faint: #64748b;

    --accent: #0891b2;
    --accent-hover: #06b6d4;
    --accent-muted: rgba(8, 145, 178, 0.1);
    --accent-faint: rgba(8, 145, 178, 0.07);

    --good: #16a34a;
    --ok: #d97706;
    --bad: #dc2626;
    --vbad: #b91c1c;

    --modal-backdrop: rgba(15, 23, 42, 0.7);
    --state-tint-base: #f8fafc;

    --chart-axis: #cbd5e1;
    --chart-tick: #94a3b8;
    --chart-grid: #e2e8f0;
    --chart-label: #64748b;
    --chart-label-strong: #475569;
    --chart-point-stroke: #ffffff;
    --chart-row-best: #dcfce7;
    --chart-row-improved: #f0fdf4;
  }
}