/* Kleurtokens voor de hele site. Stonden eerst dubbel — in de <style> van
   index.html én in legal.css — en liepen daardoor al uit elkaar. Eén plek nu,
   want met een donkere modus erbij zijn het er twee keer zoveel.

   Oranje betekent overal hetzelfde: eigendom. Een baas, een plaats met een baas,
   de knop om er een over te nemen. Nergens decoratie, ook niet in het donker. */

:root{
 --bg:#FAF7F3;--card:#fff;--line:#EBE5DD;--line2:#F3EFE9;
 --ink:#1A1512;--ink2:#7A6E62;--ink3:#A89C8E;
 --or:#FF6B00;--or-s:#FFF3E9;--or-b:#FFD2AC;
 --gr:#0E9F6E;--gr-s:#E7F8F1;--gr-b:#B6E8D4;
 --bl:#2563EB;--bl-s:#EAF1FE;--bl-b:#C3D8FB;
 --sea:#F8FBFD;--land:#F8F3EC;--dot:#6E5D4E;--halo:#fff;
 --navbg:rgba(250,247,243,.9);
 --sh:0 1px 2px rgba(26,21,18,.05),0 8px 24px rgba(26,21,18,.05);
 /* Provincieschaal, licht: zand -> zachte klei. */
 --p1:248,243,236;--p2:240,229,213;--p3:230,211,188;--p4:218,194,166;
}

/* Donker blijft warm — dezelfde site bij avond, geen ander product. De kaart
   wordt aarde in plaats van zand; oranje houdt precies dezelfde waarde, zodat
   een baas er ook hier als enige uitspringt. */
html[data-theme=dark]{
 --bg:#14120F;--card:#1D1A16;--line:#312C25;--line2:#26221C;
 --ink:#F4F0E9;--ink2:#A2988A;--ink3:#7B7264;
 --or:#FF7A1A;--or-s:#2E1D0E;--or-b:#5A3818;
 --gr:#34D399;--gr-s:#0F2A20;--gr-b:#1E5540;
 --bl:#7DA6FF;--bl-s:#151F33;--bl-b:#2B406B;
 --sea:#100E0C;--land:#2A251F;--dot:#9A8B78;--halo:#2A251F;
 --navbg:rgba(20,18,15,.9);
 --sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
 --p1:42,37,31;--p2:56,48,39;--p3:72,61,49;--p4:90,76,60;
}

/* Zonder eigen keuze de systeemvoorkeur volgen. */
@media(prefers-color-scheme:dark){
 html:not([data-theme=light]){
  --bg:#14120F;--card:#1D1A16;--line:#312C25;--line2:#26221C;
  --ink:#F4F0E9;--ink2:#A2988A;--ink3:#7B7264;
  --or:#FF7A1A;--or-s:#2E1D0E;--or-b:#5A3818;
  --gr:#34D399;--gr-s:#0F2A20;--gr-b:#1E5540;
  --bl:#7DA6FF;--bl-s:#151F33;--bl-b:#2B406B;
  --sea:#100E0C;--land:#2A251F;--dot:#9A8B78;--halo:#2A251F;
  --navbg:rgba(20,18,15,.9);
  --sh:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --p1:42,37,31;--p2:56,48,39;--p3:72,61,49;--p4:90,76,60;
 }
}

/* Vlaggetje uit de navigatiebalk, ook bruikbaar als kaarticoon. */
.flag{width:34px;height:26px;border-radius:7px;overflow:hidden;flex-shrink:0;
 box-shadow:0 0 0 3px var(--line2);display:flex;flex-direction:column}
.flag i{flex:1}
.flag.sm{width:26px;height:20px;border-radius:5px;box-shadow:0 0 0 2px var(--line2)}

/* Thema-knop naast de taalkeuze. */
.themeb{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);
 background:var(--card);color:var(--ink2);font-size:15px;line-height:1;flex-shrink:0;
 display:grid;place-items:center}
.themeb:hover{color:var(--ink)}