:root {
  color-scheme: dark;

  --color-bg: #0e1015;
  --color-bg-glow: rgba(124, 92, 255, 0.14);
  --color-surface: #161922;
  --color-surface-alt: #1d212c;
  --color-surface-hover: #242938;
  --color-border: #2a3040;
  --color-text: #eceef3;
  --color-text-muted: #8f97a8;
  --color-accent: #7c5cff;
  --color-accent-2: #38bdf8;
  --color-accent-hover: #927aff;
  --color-accent-soft: rgba(124, 92, 255, 0.16);
  --color-danger: #f0525c;
  --color-ok: #34d399;

  --scale-a: #7c5cff;
  --scale-b: #f5a524;

  --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-glow: 0 0 0 3px var(--color-accent-soft);

  --header-h: 56px;
  --sidebar-w: 236px;
  --sidebar-w-rail: 64px;

  --font-sans: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}

/* Dark is the default; light is opt-in via the header toggle (data-theme). */
:root[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f3f4f8;
  --color-bg-glow: rgba(124, 92, 255, 0.1);
  --color-surface: #ffffff;
  --color-surface-alt: #f6f7fb;
  --color-surface-hover: #eceef6;
  --color-border: #d3d8e2;
  --color-text: #12151c;
  --color-text-muted: #4f596b;
  --color-accent: #6a48f0;
  --color-accent-hover: #5a38e0;
  --color-accent-soft: rgba(106, 72, 240, 0.12);
  --scale-a: #6a48f0;
  --scale-b: #e08200;

  --shadow-panel: 0 1px 2px rgba(20, 24, 40, 0.06), 0 8px 24px rgba(20, 24, 40, 0.06);
}