/* SafetyRatios theme — copy to public/css/theme.css in vjs-sr */
:root {
  --canvas:        #f8f9fc;
  --surface:       #ffffff;
  --ink:           #0f1923;
  --ink-muted:     #64748b;
  --border:        #e2e8f0;
  --primary:       #0c6e84;
  --primary-light: #e0f4f8;
  --primary-dark:  #0a5a6d;
  --amber:         #ffd166;
  --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). Chart palettes (info-card-utils
   PALETTES, donut/treemap series colours) are pastel by design and stay
   legible on both — text on those tiles is already dark. */

:root[data-theme="dark-subtle"] {
  --canvas:        #1a1d23;
  --surface:       #242832;
  --ink:           #e5e7eb;
  --ink-muted:     #9ca3af;
  --border:        #2f3540;
  --primary:       #38bdb8;   /* lifted from #0c6e84 for contrast on dark */
  --primary-light: #1a3a40;
  --primary-dark:  #5dd2cd;
  --amber:         #ffd166;
}

:root[data-theme="dark-deep"] {
  --canvas:        #0a0b0d;
  --surface:       #14161b;
  --ink:           #f3f4f6;
  --ink-muted:     #a1a5ad;
  --border:        #1f242c;
  --primary:       #4dd0c9;   /* slightly brighter again for OLED contrast */
  --primary-light: #1a3138;
  --primary-dark:  #7be0db;
  --amber:         #ffd166;
}

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