/*
 * JobsGenerator designsysteem v1.0 (8 oktober 2026): de tokens.
 *
 * Dit is de enige plek waar een kleur, een lettergrootte, een gewicht of een hoekradius wordt vastgelegd. Alle andere stijlen
 * verwijzen hiernaar met var(--...). Een test (test/ontwerpsysteem.test.ts) weigert een kleur, maat, gewicht of radius buiten dit bestand.
 *
 * Principes (bronnen en meting: docs/onderzoek/kleur-typografie-grootte.md, besluit A-105):
 *  - Eén kleur, één betekenis. Blauw = "dit kun je doen" en "hier ben je". Groen = klaar. Amber = onderweg (concept, deels).
 *    Rood = fout. Al het andere is neutraal.
 *  - Zes tekstmaten, drie gewichten, twee hoekradii. Een scherm gebruikt er hooguit drie tegelijk in de kern.
 *  - Toegankelijkheid is een eis (WCAG 2.2 AA, A-100): tekst minstens 4,5:1, randen van velden en focusring minstens 3:1,
 *    knoppen minstens 44 px hoog, zichtbare focus, status nooit alleen met kleur. De test test/toegankelijkheid-kleuren.test.ts bewaakt dit.
 */
:root {
  /* Lettertype */
  --lettertype: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Grootte: zes stappen voor het product, plus twee schermvullende maten voor marketingpagina's (rem, zodat de tekst meeschaalt met de instelling van de bezoeker) */
  --maat-label: 0.75rem;   /* 12 px: labels, eyebrows, kleine hulpteksten; nergens kleiner */
  --maat-klein: 0.875rem;  /* 14 px: hulptekst, tabellen, secundaire tekst */
  --maat-basis: 1rem;      /* 16 px: lopende tekst, knoppen, velden */
  --maat-kop: 1.25rem;     /* 20 px: kop van een blok */
  --maat-titel: 1.75rem;   /* 28 px: titel van een pagina */
  --maat-groot: 2.5rem;    /* 40 px: alleen een groot getal (score, prijs) */
  --maat-hero: clamp(2.625rem, 5.6vw, 4.125rem);   /* 42 tot 66 px: alleen de kop bovenaan een marketingpagina (de check), niet in de app */
  --maat-sectie: clamp(1.875rem, 4vw, 2.75rem);    /* 30 tot 44 px: een sectiekop op een marketingpagina, niet in de app */

  /* Gewicht: drie stappen */
  --gewicht-normaal: 400;
  --gewicht-halfvet: 600;
  --gewicht-vet: 700;

  /* Regelhoogte */
  --regel-tekst: 1.5;
  --regel-kop: 1.25;

  /* Kleur: tekst (drie neutrale tinten) */
  --kleur-tekst: #111827;        /* koppen en tekst */
  --kleur-tekst-zacht: #4B5563;  /* lopende tekst en uitleg */
  --kleur-tekst-stil: #5F6877;   /* hulptekst: minstens 4,5:1 ook op de zachte vlakken */

  /* Kleur: vlakken en randen (neutraal) */
  --kleur-vlak: #FFFFFF;
  --kleur-vlak-zacht: #F8FAFC;
  --kleur-vlak-glas: rgba(255, 255, 255, 0.95);   /* een balk die over de pagina schuift */
  --kleur-tekst-op-donker: #C7D0DB;               /* tekst op een donker vlak (dat vlak is --kleur-tekst; witte tekst is --kleur-vlak) */
  --kleur-op-donker-rand: rgba(255, 255, 255, 0.16);   /* lijn op een donker vlak */
  --kleur-rand: #D1D5DB;
  --kleur-veldrand: #868E9C;     /* rand van een invoerveld: minstens 3:1 tegen wit */

  /* Kleur: actie en "hier ben je" (de enige felle kleur) */
  --kleur-actie: #1D4ED8;
  --kleur-actie-hover: #1E40AF;
  --kleur-actie-zacht: #EFF6FF;
  --kleur-actie-rand: #BFDBFE;
  --kleur-focus: #1E3A8A;        /* de ring om wat je met het toetsenbord kiest */

  /* Kleur: status, alleen voor status */
  --kleur-klaar: #047857;
  --kleur-klaar-vlak: #ECFDF5;
  --kleur-klaar-rand: #A7F3D0;
  --kleur-onderweg: #7A5600;
  --kleur-onderweg-vlak: #FFF4D6;
  --kleur-onderweg-rand: #D99A00;
  --kleur-fout: #B42318;
  --kleur-fout-vlak: #FEF2F2;
  --kleur-fout-rand: #FECACA;

  /* Vorm: twee hoekradii en drie schaduwen */
  --radius-kaart: 8px;
  --radius-pil: 999px;
  --schaduw-laag: 0 4px 16px rgba(17, 24, 39, 0.08);   /* een kaart waar je op wijst */
  --schaduw-hoog: 0 12px 32px rgba(17, 24, 39, 0.2);   /* iets dat boven de pagina zweeft */
  --schaduw-balk: 0 -8px 24px rgba(17, 24, 39, 0.06);  /* een balk die onderaan blijft staan */

  /* Ruimte (4-8-16-24-32-48-64); nog niet afgedwongen, zie docs/designsysteem/README.md */
  --ruimte-1: 0.25rem;
  --ruimte-2: 0.5rem;
  --ruimte-3: 1rem;
  --ruimte-4: 1.5rem;
  --ruimte-5: 2rem;
  --ruimte-6: 3rem;
  --ruimte-7: 4rem;

  /* Interactie */
  --hoogte-knop: 2.75rem;        /* 44 px */
  --focus-ring: 3px solid var(--kleur-focus);
}