/* Eén plek voor alle kleuren. Donker is de basis; data-theme="licht" overschrijft alleen deze set.
   Interface: rustig en gedempt. Data: fel en betekenisvol. JT Blauw (--merk) is nooit een datakleur. */
:root, :root[data-theme="donker"] {
  color-scheme: dark;
  --bg-deep:#131315; --bg-panel:#1c1c1e; --bg-panel-2:#161618; --bg-hover:#242427;
  --line:#2b2b2e; --line-soft:#242427;
  --txt:#F5F5F7; --txt-dim:#a0a0a8; --txt-faint:#8a8a92;
  --antraciet:#3B3A39; --merk:#008ACA; --merk-knop:#00709f; --merk-glow:rgba(0,138,202,.4); --focus:#4db8ee;
  --warn:#ff4d4d; --ok:#37d67a;
  /* data */
  --d-magenta:#e84393; --d-geel:#f6c945; --d-teal:#00d1b2; --d-oranje:#ff8a3d; --d-violet:#a78bfa; --d-lime:#a3e635; --d-roze:#f9a8d4;
  --lap-1:var(--d-magenta); --lap-2:var(--d-geel); --lap-3:var(--d-teal); --lap-4:var(--d-oranje); --lap-5:var(--d-violet); --lap-6:var(--d-lime);
  --cursor-punt:#ffffff; --pit:#d4d6da;
  --map-weg:#3f3f46; --grid:#2a2a2e;
  --plaatje-bg-1:#1d2026; --plaatje-bg-2:#121417; --plaatje-vlak:rgba(0,138,202,.18);
}
/* Indeling, geen kleur: voor elk thema gelijk. Staat bewust buiten de themablokken: een regel in `:root, :root[data-theme="donker"]` wint van een media-query op `:root` en gaf in het donker een andere breedte dan in het licht. */
:root {
  /* bovenbalk en hero: altijd donker (het logo heeft lichte letters), in elk thema */
  --balk-bg:#0f1012; --balk-txt:#f5f5f7; --balk-dim:#a0a0a8; --balk-lijn:#26272b; --balk-veld:#1b1d21; --balk-rand:#3b3a39; --balk-accent:#33a8dd; --balk-hoogte:52px;
  /* paginaraam: overal dezelfde marge en maximale breedte, in elk thema */
  --pagina-max:1600px; --pagina-rand:clamp(16px,3vw,48px); --pagina-pad:max(var(--pagina-rand),calc((100% - var(--pagina-max)) / 2));
}
@media (min-width:2200px){:root{--pagina-max:1920px}}
:root[data-theme="licht"] {
  color-scheme: light;
  --bg-deep:#eceef1; --bg-panel:#ffffff; --bg-panel-2:#f4f5f7; --bg-hover:#e9ebef;
  --line:#d5d8de; --line-soft:#e3e5ea;
  --txt:#1b1c1f; --txt-dim:#50535b; --txt-faint:#6b6e76;
  --antraciet:#3B3A39; --merk:#00709f; --merk-knop:#00709f; --merk-glow:rgba(0,138,202,.25); --focus:#005f88;
  --warn:#c81e1e; --ok:#12804a;
  --d-magenta:#d1267d; --d-geel:#b58900; --d-teal:#00917c; --d-oranje:#d85c0a; --d-violet:#6d4bd8; --d-lime:#5c8f00; --d-roze:#c2528c;
  --cursor-punt:#1b1c1f; --pit:#4a4d52;
  --map-weg:#c4c7ce; --grid:#e3e5ea;
  --plaatje-bg-1:#ffffff; --plaatje-bg-2:#e6ebf1; --plaatje-vlak:rgba(0,112,159,.16);
}