/* Kleurthema's livefree-ems.
   :root = dark (de oorspronkelijke kleuren, 1-op-1 de oude hex-waarden).
   [data-theme="light"] = light. De variabelen worden gezet door assets/theme.js
   (localStorage 'ems-theme', default dark) vóór de body rendert.
   In JS (Chart.js/canvas) lees je een waarde met cv('--muted'). */
:root, [data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f172a;          /* pagina-achtergrond + verdiepte vlakken */
  --bg-deep: #0b1220;     /* nog een tint dieper (statische lm-cellen) */
  --panel: #1e293b;       /* cards, topbar */
  --grid-line: #243044;   /* fijne gridlijnen in SVG-grafieken */
  --border: #334155;
  --border-2: #475569;    /* lichtere rand / uit-staat */
  --muted-2: #64748b;     /* zwakste tekst (subs, as-labels) */
  --muted: #94a3b8;       /* labels */
  --text-2: #cbd5e1;
  --text: #e2e8f0;
  --text-strong: #ffffff;
  --overlay: rgba(15, 23, 42, 0.85);
  --blue: #38bdf8;
  --blue-hover: #7dd3fc;
  --green: #4ade80;
  --red: #f87171;
  --yellow: #facc15;
  --orange: #fb923c;
  --amber: #f59e0b;
  --purple: #a855f7;
  --violet: #a78bfa;
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f5f9;
  --bg-deep: #e2e8f0;
  --panel: #ffffff;
  --grid-line: #e2e8f0;
  --border: #cbd5e1;
  --border-2: #94a3b8;
  --muted-2: #64748b;
  --muted: #475569;
  --text-2: #334155;
  --text: #0f172a;
  --text-strong: #0f172a;
  --overlay: rgba(241, 245, 249, 0.85);
  /* accenten een slag donkerder: de dark-tinten zijn onleesbaar op wit */
  --blue: #0284c7;
  --blue-hover: #0369a1;
  --green: #16a34a;
  --red: #dc2626;
  --yellow: #ca8a04;
  --orange: #ea580c;
  --amber: #d97706;
  --purple: #7c3aed;
  --violet: #6d28d9;
}

/* Thema-knop in de nav-rij */
.theme-toggle {
  padding: 0.4rem 0.6rem; border: 1px solid var(--border-2); border-radius: 6px;
  background: transparent; color: var(--muted); cursor: pointer; font-size: 0.85rem;
  line-height: 1; white-space: nowrap;
}
.theme-toggle:hover { border-color: var(--blue); color: var(--blue); }
@media (max-width: 600px) {
  .theme-toggle { padding: 0.2rem 0.45rem; font-size: 0.65rem; }
}