/* Ronde 5: stijl A4 Merkblauw, gekozen door Jens; enkel --focus-merk is nieuw (focus op de blauwe vlakken).
   Versie A4, Merkblauw. Het logoblauw (#183957, gemeten in het officiële logo) draagt de kop, de
   tabbalk en de knoppen; de inhoud staat op licht, koel papier. Rustig en herkenbaar als B-Wise.
   De bliksem verschijnt enkel op het moment dat je dag ingediend is, in stroomgeel.
   Standaard licht: verkopers werken overdag buiten. Alle kleuren behalve het logoblauw zijn een
   voorstel (aanname), geen B-Wise-huisstijl. */

:root, :root[data-theme="light"] {
  --bg: #EEF2F6; --surface: #FFFFFF; --card: #FFFFFF; --card2: #F1F4F8;
  --border: #DCE3EB; --border2: #C3CEDA; --veld-rand: #6F8296;
  --brand: #183957; --text: #0F2236; --sub: #4B5F73; --muted: #4B5F73;
  --tint: #183957; --tint-tekst: #1D5A8F; --op-tint: #FFFFFF; --tint-bg: #E2ECF6; --tint-rand: #7FA6CB;
  --green: #1E9E5A; --green-tekst: #0D6A3A; --green-bg: #DFF3E7;
  --gold: #E6B93E; --gold-tekst: #7A5300; --gold-bg: #FFF2CC;
  --zilver: #B4BFCB; --brons: #CF915C; --op-podium: #0F2236;
  --red: #B42318; --red-tekst: #B42318; --red-bg: #FCE9E7; --blue: #2F7FC1;
  --focus: #1D5A8F; --focus-merk: #FFD84D; --schaduw: 0 16px 40px rgba(15, 34, 54, .2); --kaart-schaduw: 0 1px 2px rgba(15, 34, 54, .06);
  --demo-bg: #FFF2CC; --demo-tekst: #6A4A00;
  --kop-bg: #183957; --kop-tekst: #FFFFFF; --kop-rand: #183957; --kop-tint: #FFFFFF; --logo: #FFFFFF;
  --knop-bg: #E4EBF2; --knop-rand: transparent; --knop-tekst: #183957;
  --segment-bg: #E2E8EF; --segment-aan: #FFFFFF; --schakel-uit: #C9D3DE;
  --spoor: #E2E8EF; --voortgang: #2F7FC1; --projectie: #B3D0EC;
  --schijf1: #CFE2F4; --schijf2: #FFE7A3;
  --heat1: #DCE9F6; --heat2: #94BCE2; --heat3: #23598D; --op-heat: #0F2236; --op-heat3: #FFFFFF;
  --nav-bg: #183957; --nav-bg-vol: #183957; --nav-rand: #183957; --nav-tekst: #B9C9DA; --nav-actief: #FFFFFF;
  --onder-bg: #FFFFFF;
  --scrim: rgba(8, 18, 30, .45); --blad-bg: #FFFFFF; --greep: #C3CEDA;
  --ikoon-bg: #183957; --ikoon-tekst: #FFFFFF;
  --bedrag: #183957;
  --gelukt-bg: #183957; --gelukt-tekst: #FFFFFF; --gelukt-flits-bg: rgba(255, 216, 77, .16); --gelukt-flits: #FFD84D; --gelukt-vak: rgba(255, 255, 255, .1);
  --onthaal-bg: #183957;
  --rail-bg: #183957; --rail-rand: #183957; --rail-tekst: #B9C9DA; --rail-tekst-aan: #FFFFFF; --rail-hover: rgba(255, 255, 255, .08); --rail-aan-bg: rgba(255, 255, 255, .14); --rail-aan: #FFFFFF; --rail-logo: #FFFFFF;
  --f-getal: "Avenir Next", "Avenir", var(--f-tekst);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0B1826; --surface: #10223A; --card: #132840; --card2: #18324F;
  --border: #213F5E; --border2: #2D5277; --veld-rand: #5F84AA;
  --brand: #183957; --text: #EAF1F8; --sub: #A3B8CC; --muted: #A3B8CC;
  --tint: #7DB8F0; --tint-tekst: #8EC3F3; --op-tint: #0B1826; --tint-bg: #1A3A5C; --tint-rand: #4F86BB;
  --green: #34C47A; --green-tekst: #6FDCA1; --green-bg: #0F3324;
  --gold: #E8BE4A; --gold-tekst: #F2D27A; --gold-bg: #392D0B;
  --zilver: #B8C4D0; --brons: #D39A68; --op-podium: #0B1826;
  --red: #FF8A80; --red-tekst: #FF8A80; --red-bg: #3A1616; --blue: #7DB8F0;
  --focus: #FFD84D; --focus-merk: #FFD84D; --schaduw: 0 16px 40px rgba(0, 0, 0, .5); --kaart-schaduw: none;
  --demo-bg: #2A220A; --demo-tekst: #F2D27A;
  --kop-bg: #183957; --kop-tekst: #FFFFFF; --kop-rand: #183957; --kop-tint: #FFFFFF; --logo: #FFFFFF;
  --knop-bg: #1D3A5A; --knop-rand: transparent; --knop-tekst: #EAF1F8;
  --segment-bg: #0E1F33; --segment-aan: #2D5277; --schakel-uit: #2D4A68;
  --spoor: #1D3753; --voortgang: #7DB8F0; --projectie: #2D5A85;
  --schijf1: #1F4A73; --schijf2: #5A4813;
  --heat1: #1B3A5A; --heat2: #2B5F8F; --heat3: #8EC3F3; --op-heat: #EAF1F8; --op-heat3: #0B1826;
  --nav-bg: #10223A; --nav-bg-vol: #10223A; --nav-rand: #213F5E; --nav-tekst: #A3B8CC; --nav-actief: #FFFFFF;
  --onder-bg: #10223A;
  --scrim: rgba(0, 0, 0, .6); --blad-bg: #132840; --greep: #3B5C80;
  --ikoon-bg: #2D5277; --ikoon-tekst: #FFFFFF;
  --bedrag: #EAF1F8;
  --gelukt-bg: #183957; --gelukt-tekst: #FFFFFF; --gelukt-flits-bg: rgba(255, 216, 77, .16); --gelukt-flits: #FFD84D; --gelukt-vak: rgba(255, 255, 255, .1);
  --onthaal-bg: #183957;
  --rail-bg: #183957; --rail-rand: #183957; --rail-tekst: #B9C9DA; --rail-tekst-aan: #FFFFFF; --rail-hover: rgba(255, 255, 255, .08); --rail-aan-bg: rgba(255, 255, 255, .14); --rail-aan: #FFFFFF; --rail-logo: #FFFFFF;
  color-scheme: dark;
}

/* Eigen accenten van A4: koppen in Avenir Next, het logo blijft wit in de blauwe kop. */
h1 { font-weight: 700; letter-spacing: -.015em; }
.navbalk a[aria-current="page"] svg { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .18)); }
.kop.ingeklapt .logo { opacity: 0; }
.kop .logo { transition: opacity var(--duur); }