/* ── Dark mode (default) ── */
:root {
  --bg-base: #0a0a1a;
  --bg-surface: #141428;
  --bg-elevated: #1e1e3a;

  --text-primary: #e8e8f0;
  --text-secondary: #9898b8;
  --text-muted: #8585c5;

  --accent: #6366f1;
  --accent-hover: #818cf8;
  --accent-dim: rgba(99, 102, 241, 0.15);
  /* Accent for heading/inline text — must hold 4.5:1 on bg-base in each theme */
  --heading-accent: #818cf8;

  --border: rgba(99, 102, 241, 0.2);
  --border-subtle: rgba(99, 102, 241, 0.12);

  --shadow: rgba(0, 0, 0, 0.4);
  --tooltip-bg: #1e1e3a;

  --spiro-1:  #f87171;
  --spiro-2:  #fb923c;
  --spiro-3:  #facc15;
  --spiro-4:  #a3e635;
  --spiro-5:  #4ade80;
  --spiro-6:  #34d399;
  --spiro-7:  #38bdf8;
  --spiro-8:  #60a5fa;
  --spiro-9:  #818cf8;
  --spiro-10: #a78bfa;
  --spiro-11: #e879f9;
  --spiro-12: #f472b6;

  --canvas-bg-dark: #050510;
  --canvas-bg-light: #ffffff;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --transition-theme: background 0.25s, color 0.25s, border-color 0.25s;
}

/* ── Light mode ── */
[data-theme="light"] {
  --bg-base: #f4f4fc;
  --bg-surface: #ffffff;
  --bg-elevated: #eaeaf6;

  --text-primary: #1a1a2e;
  --text-secondary: #44446e;
  --text-muted: #62628e;

  --accent: #4f51d0;
  --accent-hover: #6366f1;
  --accent-dim: rgba(79, 81, 208, 0.1);

  --border: rgba(79, 81, 208, 0.2);
  --border-subtle: rgba(79, 81, 208, 0.1);

  --shadow: rgba(0, 0, 0, 0.12);
  --tooltip-bg: #ffffff;
}

/* Respect system preference when no explicit theme is set */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-base: #f4f4fc;
    --bg-surface: #ffffff;
    --bg-elevated: #eaeaf6;
    --text-primary: #1a1a2e;
    --text-secondary: #44446e;
    --text-muted: #62628e;
    --accent: #4f51d0;
    --accent-hover: #6366f1;
    --accent-dim: rgba(79, 81, 208, 0.1);
    --heading-accent: #4f51d0;
    --border: rgba(79, 81, 208, 0.2);
    --border-subtle: rgba(79, 81, 208, 0.1);
    --shadow: rgba(0, 0, 0, 0.12);
    --tooltip-bg: #ffffff;
  }
}