/* Design tokens — Roy-palet (1 juli 2026): oranje accent, navy ink, Poppins.
   Alle thema-CSS hangt aan deze variabelen; dit bestand IS de site-brede skin. */
:root {
  --bn-font: "Poppins", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  /* Knoptekst: ÉÉN gewicht voor de hele site (besluit JJ 22 jul 2026). Het stond op vijf
     plekken los ingesteld op 700, 800 of 900, waardoor "word zakelijke klant" zwaarder
     oogde dan "bekijk product" op dezelfde pagina. Elke knopregel leest nu dit token;
     hier wijzigen = overal wijzigen. 700 omdat Poppins op 13–15px in wit-op-navy bij
     zwaardere gewichten dichtloopt. */
  --bn-btn-weight: 700;
  --bn-ink: #1a2340;
  --bn-text: #3a3a46;
  --bn-muted: #6b7280;
  --bn-line: #eceaee;
  --bn-page: #ffffff;
  --bn-soft: #f8f6f4;
  --bn-soft-2: #fbfaf9;
  /* Accent-rolverdeling (18 jul 2026, WCAG AA). Eén oranje kan niet én vlak én
     tekst zijn: als tekst haalt #f26722 maar 3,12:1 waar 4,5:1 moet. Daarom drie
     rollen, en ze zijn NIET onderling uitwisselbaar:
       --bn-accent        3,12:1 op wit  — ALLEEN vlakvulling, iconen, borders,
                                           focus-ringen (UI-componenten mogen 3:1).
                                           NOOIT als tekstkleur gebruiken.
       --bn-accent-text   4,84:1 op wit  — elke oranje TEKST op lichte achtergrond,
                                           én elke oranje ACHTERGROND met witte tekst.
       --bn-accent-on-dark 7,56:1 op --bn-ink — oranje tekst op de navy band/footer.
     --bn-accent-dark haalt 3,99:1 en is dus GEEN geldige tekstkleur; het blijft
     bestaan als hover-vulling.
     LET OP — --bn-accent-text is berekend tegen WIT. Op getinte vlakken zakt hij eronder:
     4,28:1 op de perzik-hero (#FDEEE7), 3,81:1 en 3,58:1 op de mobiele slides (#cfe8f7,
     #fad4de). Regel: oranje tekst alleen op wit of near-wit; op elk getint of gekleurd
     vlak --bn-ink (13,66:1 op perzik). Nog donkerder oranje lost het niet netjes op —
     dat leest als bruin en verliest het merk. */
  --bn-accent: #f26722;
  --bn-accent-text: #c44a12;
  --bn-accent-on-dark: #ff9d66;
  --bn-accent-dark: #d9551a;
  --bn-success: #00854a;
  --bn-warning: #ffd400;
  /* Radius-schaal (18 jul 2026): precies TWEE waarden, meer niet. Er stonden vier
     losse waarden door de CSS (8px 32x, 6px 14x, 4px 1x, 999px 8x) terwijl het toen
     nog 12px grote --bn-radius nul keer werd gebruikt — een token dat niemand volgt
     is geen systeem. 8px is de feitelijke meerderheid en wordt dus DE hoekradius;
     6px en 4px zijn erin opgegaan (bewust iets ronder). Alles wat een capsule moet
     zijn (badges, pills, zoekbalk) gebruikt --bn-radius-pill. Nieuwe componenten
     kiezen uit deze twee; een losse px-waarde is een regressie.
     Uitzondering: border-radius:50% voor echte cirkels blijft 50%. */
  --bn-radius: 8px;
  --bn-radius-pill: 999px;
  --bn-shadow: 0 20px 50px rgba(26, 35, 64, 0.08);
  --bn-shadow-sm: 0 1px 2px rgba(26, 35, 64, 0.05), 0 3px 10px rgba(26, 35, 64, 0.05);
  --bn-shadow-md: 0 6px 18px rgba(26, 35, 64, 0.1);
  --bn-container: 1440px;
  /* Z-index-schaal: één ladder voor de hele site. Nieuwe lagen kiezen een token,
     geen los getal — losse getallen veroorzaakten de cookiebalk-over-modal-bug. */
  --bn-z-base: 1;
  --bn-z-sticky: 100;
  --bn-z-overlay: 400;
  --bn-z-modal: 500;
  --bn-z-toast: 600;
}