/* Skillcercise theme */
:root {
  --canvas:        #f7f8fa;
  --surface:       #ffffff;
  --ink:           #0f1923;
  --ink-muted:     #64748b;
  --border:        #e2e8f0;
  --primary:       #1a3a5c;
  --primary-light: #e8f0f8;
  --primary-dark:  #0f2840;
  --amber:         #d97706;
  --teal:          #0d9488;
  --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). Skillcercise's navy primary is
   lifted to a brighter blue on dark for AA contrast against the dark
   surface (same lift pattern as vjs-cp which shares a navy primary). */

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

: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;
  --teal:          #5eead4;   /* brighter teal for OLED */
}

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