/*
  één tas · huisstijl als CSS-variabelen
  ──────────────────────────────────────
  Laad dit bestand in elke pagina vóór je eigen CSS:
    <link rel="stylesheet" href="tokens.css">
  De lettertypes staan in ./fonts en worden hier zelf gehost (geen Google Fonts-verbinding nodig).
  Licentie lettertypes: SIL Open Font License 1.1, zie fonts/OFL-*.txt.
*/

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/geist-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('fonts/geist-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Kleuren: basis */
  --kleur-wit: #F6F7F8;         /* achtergrond: pagina, stroken, keuzehulpkaart */
  --kleur-helder-wit: #FFFFFF;  /* kaarten, kop en eerste scherm */
  --kleur-grafiet: #15181C;     /* tekst, woordmerk, rand van de tweede knop */
  --kleur-staal: #59636F;       /* bijtekst, labels */
  --kleur-mist: #DCE1E6;        /* lijnen, kaartranden, inactieve chips */
  --kleur-kobalt: #2B44D6;      /* het enige accent: beeldmerk, hoofdknop, links, actief */

  /* Kleuren: afgeleid */
  --kleur-kobalt-donker: #1C2F9E;  /* hover van links en kobalt knoppen */
  --kleur-kobalt-licht: #E6EAFB;   /* achtergrond van het TOPPICK-label */
  --kleur-vlak: #E7EBEF;           /* spoor van segmentknoppen, lijnen binnen kaarten */
  --kleur-vlak-licht: #EEF1F4;     /* maat-chips zoals "35 L" */
  --kleur-aantal-actief: #C9D0D8;  /* aantal in een actieve (grafiet) filterchip */

  /* Lettertypes */
  --font-tekst: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', 'SFMono-Regular', Menlo, monospace;

  /* Tekstgroottes (desktop; op mobiel schalen de koppen mee met clamp) */
  --tekst-h1: clamp(2.5rem, 1.7rem + 3.2vw, 4rem);      /* 40 → 64 px, Geist 600, −0.045em */
  --tekst-h2: clamp(2rem, 1.5rem + 2vw, 2.75rem);       /* 32 → 44 px, Geist 600, −0.035em */
  --tekst-h3: 1.625rem;                                 /* 26 px, Geist 600, −0.03em */
  --tekst-intro: 1.125rem;                              /* 18 px */
  --tekst-basis: 1rem;                                  /* 16 px */
  --tekst-klein: 0.875rem;                              /* 14 px */
  --tekst-label: 0.75rem;                               /* 12 px, Geist Mono, hoofdletters */
  --regelhoogte-tekst: 1.55;
  --regelhoogte-kop: 1;
  --letterafstand-h1: -0.045em;
  --letterafstand-h2: -0.035em;
  --letterafstand-h3: -0.03em;
  --letterafstand-label: 0.06em;

  /* Vormen */
  --radius-klein: 6px;      /* labels, maat-chips */
  --radius-knop: 10px;      /* knoppen, zoekveld */
  --radius-segment: 12px;   /* spoor van segmentknoppen; knoppen erin 9px */
  --radius-kaart: 16px;     /* kaarten en vlakken */
  --radius-pil: 999px;      /* filterchips, Bewaar-knop */
  --rand: 1px solid var(--kleur-mist);
  --schaduw-actief: 0 1px 3px rgba(21, 24, 28, 0.14);  /* actieve segmentknop */

  /* Maten */
  --hoogte-knop: 48px;
  --hoogte-klikdoel: 44px;  /* minimum voor alles wat klikbaar is */
  --hoogte-kop: 72px;
  --breedte-max: 1280px;
  --marge-pagina: clamp(20px, 6vw, 96px);
  --ruimte-sectie: clamp(56px, 8vw, 88px);
  --ruimte-1: 4px;
  --ruimte-2: 8px;
  --ruimte-3: 12px;
  --ruimte-4: 16px;
  --ruimte-5: 24px;
  --ruimte-6: 32px;
  --ruimte-7: 48px;
  --ruimte-8: 64px;
}