/* ==========================================================
   TOKENS — fonts en kleurvariabelen, gedeeld door alle pagina's
   ========================================================== */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/Bricolage_Grotesque/BricolageGrotesque-VariableFont_opsz,wdth,wght.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter/Inter-VariableFont_opsz,wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --org: #FFA213; --org-deep: #d9860a; --org-light: #ffc24d; --org-tint: #fff6e9;
  /* Grijstinten voor secundaire tekst. Beide halen 4.5:1 op wit én op de lichtgrijze
     vlakken (#f6f6f6: zebra-rijen, zijbalken) — WCAG 1.4.3. Lichter dan dit kan niet
     zonder die eis te breken; ga dus niet terug naar #7a7a7a/#9a9a9a. */
  --inkt: #171717; --inkt-zacht: #666666; --inkt-vaag: #6f6f6f;
  --lijn: #ededed; --lijn-sterk: #e4e4e4;
  --gevaar: #c0392b;
  --kop-font: "Bricolage Grotesque", sans-serif;
  --radius: 12px;
  --focus: 0 0 0 2px #fff, 0 0 0 4px var(--inkt);
  /* Maximale paginabreedte (kop, main, voettekst) — de matrix en de roadmap gebruiken die
     helemaal. De maten hieronder hangen eraan vast; verander ze samen.
     --lade      : de kolom met nog te plaatsen wensen, links van de matrix/roadmap. Wordt
                   op een smaller scherm kleiner (zie exceptions.css); --matrix-aftrek volgt
                   vanzelf, want die rekent ermee.
     --matrix-aftrek: wat er van de breedte af gaat voordat de matrix overblijft:
                   2x40px main-padding + de lade + 24px gap (zie blocks.css).
     --merk-kolom: vaste breedte van het merk in de kop. De Verzamel-weergave lijnt hier
                   op uit (zie #paneel-wensen), zodat die met de H1 meeloopt.
     --kop-acties-kolom: vaste breedte van de knoppenkolom rechts in de kop; dankzij die
                   vaste maat staat de tabbalk in elke weergave op precies dezelfde plek,
                   ook al heeft Verzamel twee knoppen en de rest er één. */
  --breedte: 1600px;
  --lade: 380px;
  --matrix-aftrek: calc(80px + var(--lade) + 24px);
  --merk-kolom: 118px;
  --kop-acties-kolom: 272px;
  --kop-gap: 28px;
  /* Verzamel is een leeslijst, geen bord: die blijft smaller dan de volle paginabreedte. */
  --breedte-verzamel: 1000px;
}