/* ==========================================================================
   base.css — gedeelde basis: design tokens (licht + donker), de .btn-basis
   en de footer.

   Wordt door alle pagina's geladen via <link rel="stylesheet"
   href="/assets/base.css">, vóór header.css en vóór het pagina-eigen
   <style>-blok. header.css leunt op de tokens die hier staan.

   Wijzig tokens, .btn of de footer UITSLUITEND hier.

   Bewust NIET hier:
   - .ctaband/.band knopvarianten (.btn-primary, .btn-ghost, ...). Die zijn
     sectie-gebonden; ze globaal maken zou ze op andere pagina's laten
     aanslaan waar ze nu niet gelden.
   - de [data-theme="dark"] footer-regels. Die hebben dezelfde specificiteit
     als de donkere blokken die per pagina inline staan (.stem.navy,
     .chatkop, .toolbox) en winnen nu op volgorde. Hierheen verplaatsen zou
     die volgorde omdraaien en de witte hover in de footer slopen.
   ========================================================================== */

:root {
    --color-paper:           #FFFFFF;
    --color-ink:             #222222;
    --color-ink-2:           #4F4F4F;
    --color-blue:            #00A1E1;
    --color-blue-hover:      #0088C8;
    --color-blue-dark:       #006EAE;
    --color-navy:            #00004D;
    --color-navy-hover:      #000034;
    --color-baby-blue:       #D9F1FB;
    --color-baby-blue-light: #ECF8FD;
    --color-red:             #DC2E29;
    --color-red-dark:        #CD1712;
    --color-border:          rgba(34, 34, 34, 0.16);
    --radius-s: 2px;
    --radius-m: 4px;
    --radius-l: 8px;
    --radius-xl: 16px;
    --radius-round: 999px;
    --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'Mulish', Avenir, Arial, sans-serif;
    --dur: .15s;
    --ease-out: cubic-bezier(.2,.7,.2,1);
    --color-navy-text:       #00004D;
    --color-on-brand:        #FFFFFF;
    color-scheme: light;
  }
[data-theme="dark"] {
    --color-paper:           #0B0E1F;
    --color-ink:             #EDEFF7;
    --color-ink-2:           #A9AFC6;
    --color-blue:            #00A1E2;
    --color-blue-hover:      #5CC7ED;
    --color-blue-dark:       #7DD3F0;
    --color-navy:            #00004D;
    --color-navy-hover:      #000034;
    --color-navy-text:       #AFC2EE;
    --color-on-brand:        #FFFFFF;
    --color-baby-blue:       #14203A;
    --color-baby-blue-light: #101A30;
    --color-red:             #E4322E;
    --color-red-dark:        #DC2E29;
    --color-border:          rgba(237, 239, 247, 0.18);
    color-scheme: dark;
  }
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-family: var(--font-body); font-weight: 800; font-size: .95rem;
    text-decoration: none; white-space: nowrap;
    padding: .85rem 1.6rem; border-radius: var(--radius-m);
    border: 0; cursor: pointer;
    transition: background-color var(--dur), color var(--dur), border-color var(--dur);
  }
.footband { background: var(--color-navy); }
footer.site {
    padding: 2.5rem 0 3rem;
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  }
footer.site, footer.site a { color: var(--color-baby-blue); font-size: .85rem; text-decoration: none; }
footer.site a { text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur); }
footer.site a:hover { color: var(--color-on-brand); }
footer.site a:focus-visible { outline-color: var(--color-baby-blue); }
footer.site .label {
    font-family: var(--font-display); font-weight: 600; font-size: .95rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--color-on-brand);
  }

/* Tekst die alleen voor schermlezers bestaat, bijvoorbeeld de aankondiging
   dat een link in een nieuw tabblad opent. Niet `display: none` en niet
   `visibility: hidden`: die halen het element uit de toegankelijkheidsboom en
   dan wordt het juist niet voorgelezen. Vandaar het uitknippen tot 1px. */
.visueel-verborgen {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }