/* CleverPATHS theme */
:root {
  --canvas:        #f9fafb;
  --surface:       #ffffff;
  --ink:           #1e293b;
  --ink-muted:     #64748b;
  --border:        #e2e8f0;
  --primary:       #003366;
  --primary-light: #e6eef5;
  --primary-dark:  #002244;
  --amber:         #ffd166;
  --gain:          #16a34a;
  --loss:          #dc2626;
  --font-sans:     system-ui, -apple-system, sans-serif;
  --font-mono:     monospace;
}

/* ── Dark themes — applied via document.documentElement.dataset.theme ───────
   Two tones available: 'dark-subtle' (slate-tinted, Linear/Notion feel) and
   'dark-deep' (near-black, OLED-friendly). CleverPATHS' deep-navy primary
   is lifted to a brighter teal/blue on dark for AA contrast against the
   dark surface, mirroring vjs-sr's approach. */

:root[data-theme="dark-subtle"] {
  --canvas:        #1a1d23;
  --surface:       #242832;
  --ink:           #e5e7eb;
  --ink-muted:     #9ca3af;
  --border:        #2f3540;
  --primary:       #5b9bd5;   /* lifted from #003366 for contrast on dark */
  --primary-light: #1e2a3a;
  --primary-dark:  #7eb4e0;
}

:root[data-theme="dark-deep"] {
  --canvas:        #0a0b0d;
  --surface:       #14161b;
  --ink:           #f3f4f6;
  --ink-muted:     #a1a5ad;
  --border:        #1f242c;
  --primary:       #6fb0e6;   /* slightly brighter again for OLED contrast */
  --primary-light: #1a2330;
  --primary-dark:  #94c5ed;
}

/* Smooth transition when the theme flips */
html, body { transition: background-color 0.15s, color 0.15s; }