/* Kleur-tokens voor licht/donker thema. Geladen op elke pagina, óók login — dit is de enige
   plek waar deze waarden staan; alle andere CSS-bestanden verwijzen ernaar via var(--token).
   Bootstrap-componenten (kaarten, tabellen, modals, formulieren) volgen het donkere thema al
   automatisch via het data-bs-theme attribuut op <html>; deze tokens zijn voor de eigen,
   niet-Bootstrap onderdelen (bord, chips, badges, koppen). */
:root {
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8f9fa;
  --border: #dee2e6;
  --border-strong: #cfd4dc;
  --text: #212529;
  --text-muted: #6c757d;
  --text-faint: #adb5bd;
  --header-bg: #2c3e50;
  --accent: #3498db;
  --accent-soft: #dceefb;
  --success: #27ae60;
  --success-soft: #eafaf1;
  --danger: #e74c3c;
  --danger-soft: #fdecea;
  --danger-soft-border: #e8b4ae;
  --danger-text: #8e2820;
  --warning: #f1c40f;
  --warning-soft: #fdf0d5;
  --warning-soft-border: #e6b566;
  --warning-soft-hover: #f9e3b0;
  --warning-text: #8a5a00;
  --chip-bg: #e9ecef;
}

[data-theme="dark"] {
  --bg: #121722;
  --surface: #1b2330;
  --surface-2: #212b3a;
  --border: #313e4f;
  --border-strong: #3a4a5e;
  --text: #e7ecf2;
  --text-muted: #93a3b6;
  --text-faint: #5f7086;
  --header-bg: #223247;
  --accent: #5aa9e6;
  --accent-soft: #21374a;
  --success: #34c37c;
  --success-soft: #1b3327;
  --danger: #ef6455;
  --danger-soft: #3a1f1d;
  --danger-soft-border: #5c332e;
  --danger-text: #f3a89c;
  --warning: #f4cf4d;
  --warning-soft: #3a2f18;
  --warning-soft-border: #5c4a26;
  --warning-soft-hover: #46381d;
  --warning-text: #e8c37a;
  --chip-bg: #2a3341;
}

/* Thema-schakelaar in de navbar/login-kaart */
.theme-toggle {
  background: rgba(255,255,255,.1); border: none; color: #ccc; font-size: 14px;
  width: 28px; height: 28px; border-radius: 4px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { background: rgba(255,255,255,.18); }