/* Design tokens — Geert van Eeuwijk, stijl "Wegwijzer"
   Geïnspireerd op bewegwijzering in de zorg: borden, pictogrammen, routelijnen. */

/* Lettertype lokaal gehost (geen Google Fonts, beter voor privacy).
   Atkinson Hyperlegible — ontworpen door het Braille Institute voor maximale leesbaarheid. */
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('fonts/atkinson-hyperlegible-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('fonts/atkinson-hyperlegible-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Kleuren ──────────────────────── */
    --kleur-ondergrond:  #DCEBE1;   /* licht celadon — de "muur" waar de borden op hangen */
    --kleur-inkt:        #102A3A;   /* hoofdtekst en donkere wegwijzerborden */
    --kleur-inkt-zacht:  #2E4757;   /* lopende tekst, onderschriften */
    --kleur-bord:        #0B4F8A;   /* bordblauw — hoofdborden en de route "Ervaring" */
    --kleur-lijn-groen:  #1D6B45;   /* tweede routelijn: "Opleidingen" */
    --kleur-signaal:     #F5CE3E;   /* signaalgeel — jaartallen, contactbord, accenten */
    --kleur-op-bord:     #FFFFFF;   /* tekst en pictogramvlak op een gekleurd bord */

    /* ── Typografie ───────────────────── */
    --font:          'Atkinson Hyperlegible', system-ui, sans-serif;
    --tekst-basis:   1.1875rem;                      /* 19px */
    --tekst-klein:   0.9375rem;                      /* 15px */
    --tekst-kop-3:   1.5rem;                         /* 24px */
    --tekst-kop-2:   clamp(1.75rem, 3.4vw, 2.5rem);  /* 28–40px */
    --tekst-intro:   clamp(1.375rem, 2.3vw, 1.75rem);

    /* ── Ruimte ───────────────────────── */
    --rand-pagina:   clamp(16px, 4vw, 48px);
    --breedte-max:   1240px;
    --sectie-ruimte: clamp(72px, 9vw, 112px);
    --kop-ruimte:    40px;

    /* ── Vormen ───────────────────────── */
    --radius-bord:   14px;
    --radius-groot:  22px;
    --radius-klein:  6px;
    --lijndikte:     6px;   /* dikte van de routelijnen */
}