/* Gegenereerd door build.py uit tokens.json. Niet met de hand aanpassen. */
:root {

  /* Kleur: basispalet */
  --cl-kleur-wit: #FFFFFF;
  --cl-kleur-papier: #F4F2EE;
  --cl-kleur-karton: #E8D2B4;
  --cl-kleur-lijn: #E0E0DD;
  --cl-kleur-inkt: #231F20;
  --cl-kleur-inkt-zacht: #4D4849;
  --cl-kleur-inkt-subtiel: #6B6566;
  --cl-kleur-rand: #8A8485;
  --cl-kleur-grijs-op-donker: #B2B0B1;
  --cl-kleur-grafiet: #3A3536;
  --cl-kleur-fout: #9B2C2C;
  --cl-kleur-succes: #3D5A3F;
  --cl-kleur-let-op: #6E5312;

  /* Kleur: rollen */
  --cl-tekst-standaard: var(--cl-kleur-inkt);
  --cl-tekst-secundair: var(--cl-kleur-inkt-zacht);
  --cl-tekst-tertiair: var(--cl-kleur-inkt-subtiel);
  --cl-tekst-link: var(--cl-kleur-inkt);
  --cl-tekst-op-donker: var(--cl-kleur-wit);
  --cl-tekst-op-donker-zacht: var(--cl-kleur-grijs-op-donker);
  --cl-achtergrond-pagina: var(--cl-kleur-wit);
  --cl-achtergrond-zacht: var(--cl-kleur-papier);
  --cl-achtergrond-accent: var(--cl-kleur-karton);
  --cl-achtergrond-donker: var(--cl-kleur-inkt);
  --cl-achtergrond-donker-2: var(--cl-kleur-grafiet);
  --cl-rand-veld: var(--cl-kleur-rand);
  --cl-rand-veld-hover: var(--cl-kleur-inkt-zacht);
  --cl-rand-veld-focus: var(--cl-kleur-inkt);
  --cl-rand-gekozen: var(--cl-kleur-inkt);
  --cl-rand-decoratief: var(--cl-kleur-lijn);
  --cl-rand-veld-op-donker: var(--cl-kleur-grijs-op-donker);
  --cl-knop-primair-vlak: var(--cl-kleur-inkt);
  --cl-knop-primair-tekst: var(--cl-kleur-wit);
  --cl-knop-primair-hover: var(--cl-kleur-inkt-zacht);
  --cl-knop-secundair-vlak: var(--cl-kleur-wit);
  --cl-knop-secundair-rand: var(--cl-kleur-inkt);
  --cl-knop-secundair-tekst: var(--cl-kleur-inkt);
  --cl-knop-secundair-hover: var(--cl-kleur-inkt);
  --cl-knop-secundair-hover-tekst: var(--cl-kleur-wit);
  --cl-knop-op-donker-vlak: var(--cl-kleur-wit);
  --cl-knop-op-donker-tekst: var(--cl-kleur-inkt);
  --cl-knop-op-donker-hover: var(--cl-kleur-papier);
  --cl-knop-tertiair-tekst: var(--cl-kleur-inkt);
  --cl-knop-tertiair-hover-onderstreping: var(--cl-kleur-inkt-zacht);
  --cl-knop-tertiair-op-donker-tekst: var(--cl-kleur-wit);
  --cl-knop-tertiair-op-donker-hover-onderstreping: var(--cl-kleur-grijs-op-donker);
  --cl-link-hover-onderstreping: var(--cl-kleur-inkt-zacht);
  --cl-focus-ring: var(--cl-kleur-inkt);
  --cl-focus-ring-op-donker: var(--cl-kleur-wit);
  --cl-status-fout: var(--cl-kleur-fout);
  --cl-status-succes: var(--cl-kleur-succes);
  --cl-status-let-op: var(--cl-kleur-let-op);
  --cl-status-info: var(--cl-kleur-inkt);

  /* Fonts */
  --cl-font-familie-kop: "Trade Gothic Bold Condensed No. 20", "Trade Gothic Fallback", "Arial Narrow", sans-serif;
  --cl-font-familie-tekst: "Century Schoolbook", "Century Schoolbook Fallback", Georgia, serif;
  --cl-font-gewicht-regular: 400;
  --cl-font-gewicht-bold: 700;

  /* Tekststijlen (grootte schaalt vloeiend tussen 390px en 1280px) */
  --cl-display-grootte: clamp(2.25rem, 1.4831rem + 3.1461vw, 4rem);
  --cl-display-familie: var(--cl-font-familie-kop);
  --cl-display-gewicht: 700;
  --cl-display-regelhoogte: 1;
  --cl-display-tracking: 0.03em;
  --cl-display-hoofdletters: uppercase;
  --cl-h1-grootte: clamp(1.75rem, 1.3118rem + 1.7978vw, 2.75rem);
  --cl-h1-familie: var(--cl-font-familie-kop);
  --cl-h1-gewicht: 700;
  --cl-h1-regelhoogte: 1.05;
  --cl-h1-tracking: 0.03em;
  --cl-h1-hoofdletters: uppercase;
  --cl-h2-grootte: clamp(1.375rem, 1.1011rem + 1.1236vw, 2rem);
  --cl-h2-familie: var(--cl-font-familie-kop);
  --cl-h2-gewicht: 700;
  --cl-h2-regelhoogte: 1.1;
  --cl-h2-tracking: 0.03em;
  --cl-h2-hoofdletters: uppercase;
  --cl-h3-grootte: clamp(1.125rem, 0.9607rem + 0.6742vw, 1.5rem);
  --cl-h3-familie: var(--cl-font-familie-kop);
  --cl-h3-gewicht: 700;
  --cl-h3-regelhoogte: 1.15;
  --cl-h3-tracking: 0.04em;
  --cl-h3-hoofdletters: uppercase;
  --cl-h4-grootte: clamp(1rem, 0.9452rem + 0.2247vw, 1.125rem);
  --cl-h4-familie: var(--cl-font-familie-kop);
  --cl-h4-gewicht: 700;
  --cl-h4-regelhoogte: 1.2;
  --cl-h4-tracking: 0.05em;
  --cl-h4-hoofdletters: uppercase;
  --cl-knop-grootte: 1rem;
  --cl-knop-familie: var(--cl-font-familie-kop);
  --cl-knop-gewicht: 700;
  --cl-knop-regelhoogte: 1;
  --cl-knop-tracking: 0.06em;
  --cl-knop-hoofdletters: uppercase;
  --cl-label-grootte: 0.875rem;
  --cl-label-familie: var(--cl-font-familie-kop);
  --cl-label-gewicht: 700;
  --cl-label-regelhoogte: 1.25;
  --cl-label-tracking: 0.08em;
  --cl-label-hoofdletters: uppercase;
  --cl-intro-grootte: clamp(1.1875rem, 1.1053rem + 0.3371vw, 1.375rem);
  --cl-intro-familie: var(--cl-font-familie-tekst);
  --cl-intro-gewicht: 400;
  --cl-intro-regelhoogte: 1.5;
  --cl-intro-tracking: 0em;
  --cl-intro-hoofdletters: none;
  --cl-body-groot-grootte: clamp(1.125rem, 1.0702rem + 0.2247vw, 1.25rem);
  --cl-body-groot-familie: var(--cl-font-familie-tekst);
  --cl-body-groot-gewicht: 400;
  --cl-body-groot-regelhoogte: 1.65;
  --cl-body-groot-tracking: 0em;
  --cl-body-groot-hoofdletters: none;
  --cl-body-grootte: clamp(1rem, 0.9726rem + 0.1124vw, 1.0625rem);
  --cl-body-familie: var(--cl-font-familie-tekst);
  --cl-body-gewicht: 400;
  --cl-body-regelhoogte: 1.6;
  --cl-body-tracking: 0em;
  --cl-body-hoofdletters: none;
  --cl-klein-grootte: 0.875rem;
  --cl-klein-familie: var(--cl-font-familie-tekst);
  --cl-klein-gewicht: 400;
  --cl-klein-regelhoogte: 1.5;
  --cl-klein-tracking: 0.01em;
  --cl-klein-hoofdletters: none;
  --cl-prijs-grootte: clamp(1.125rem, 1.0702rem + 0.2247vw, 1.25rem);
  --cl-prijs-familie: var(--cl-font-familie-tekst);
  --cl-prijs-gewicht: 400;
  --cl-prijs-regelhoogte: 1.2;
  --cl-prijs-tracking: 0em;
  --cl-prijs-hoofdletters: none;
  --cl-prijs-groot-grootte: 1.25rem;
  --cl-prijs-groot-familie: var(--cl-font-familie-tekst);
  --cl-prijs-groot-gewicht: 400;
  --cl-prijs-groot-regelhoogte: 1.2;
  --cl-prijs-groot-tracking: 0em;
  --cl-prijs-groot-hoofdletters: none;

  /* Ruimte */
  --cl-ruimte-1: 0.25rem;
  --cl-ruimte-2: 0.5rem;
  --cl-ruimte-3: 0.75rem;
  --cl-ruimte-4: 1rem;
  --cl-ruimte-5: 1.25rem;
  --cl-ruimte-6: 1.5rem;
  --cl-ruimte-8: 2rem;
  --cl-ruimte-12: 3rem;
  --cl-ruimte-16: 4rem;
  --cl-ruimte-24: 6rem;
  --cl-ruimte-32: 8rem;
  --cl-ruimte-sectie: clamp(4rem, 2.2472rem + 7.1910vw, 8rem);
  --cl-ruimte-blok: clamp(2rem, 1.5618rem + 1.7978vw, 3rem);

  /* Vorm, raakvlak en focus */
  --cl-vorm-raakvlak-min: 44px;
  --cl-vorm-knop-hoogte: 48px;
  --cl-vorm-veld-hoogte: 58px;
  --cl-vorm-rand-veld: 1px;
  --cl-vorm-rand-veld-actief: 2px;
  --cl-vorm-rand-knop-secundair: 1.5px;
  --cl-vorm-focus-breedte: 2px;
  --cl-vorm-focus-afstand: 2px;
  --cl-vorm-hoekradius: 2px;
  --cl-vorm-hoekradius-beeld: 0px;

  /* Beweging */
  --cl-beweging-duur-direct: 100ms;
  --cl-beweging-duur-kort: 150ms;
  --cl-beweging-duur-middel: 250ms;
  --cl-beweging-duur-lang: 350ms;
  --cl-beweging-curve-uit: cubic-bezier(0.2, 0, 0, 1);
  --cl-beweging-curve-weg: cubic-bezier(0.4, 0, 1, 1);
  --cl-beweging-curve-standaard: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Layout (mobiel; grotere schermen hieronder) */
  --cl-container: 1280px;
  --cl-container-smal: 800px;
  --cl-tekstbreedte: 34em;
  --cl-marge: 20px;
  --cl-kolommen: 4;
  --cl-kolomafstand: 16px;
  --cl-kaarten-per-rij: 2;
}

@media (min-width: 48em) {
  :root {
    --cl-marge: 32px;
    --cl-kolommen: 8;
    --cl-kolomafstand: 24px;
    --cl-kaarten-per-rij: 3;
  }
}

@media (min-width: 62em) {
  :root {
    --cl-marge: 48px;
    --cl-kolommen: 12;
    --cl-kolomafstand: 40px;
    --cl-kaarten-per-rij: 3;
  }
}

@media (prefers-contrast: more) {
  :root {
    --cl-tekst-tertiair: var(--cl-kleur-inkt-zacht);
    --cl-rand-veld: var(--cl-kleur-inkt);
  }
}