/* ============================================================
   1. tokens.css — integraal ge-embed (standalone preview; bron: design/tokens.css)
   ============================================================ */
:root {
  /* ---------- 1. PRIMITIVES (ruwe waarden — merk naar0) ---------- */
  --prim-wit: #ffffff;                  /* zuiver wit — mens 2026-07-03: óók vlakken-basis toegestaan */
  --prim-papier: #ffffff;               /* MENS 2026-07-03 — zuiver witte pagina-basis */
  --prim-warmwit: #ffffff;              /* MENS 2026-07-03 — kaartvlak = wit (naam historisch-canoniek) */
  --prim-inkt: #152a33;                 /* bijna-zwart blauwgroen, tekst */
  --prim-grijs-900: #0c3c52;            /* donker merk-blauw (zware tekst op tint-vlak) */
  --prim-grijs-600: #3a5560;            /* secundaire tekst */
  --prim-grijs-300: #cfe3ed;            /* MENS 2026-07-03 — koele hemel-hairline (decoratief; geen tekstkleur) */
  --prim-grijs-100: #eaf6fb;            /* MENS 2026-07-03 — zeer licht hemel-vlak */
  --prim-offwhite: #dbeef6;             /* SITE-hemel — licht hemelsblauw sectievlak (mens 2026-07-03) */
  --prim-merk: #0c5a78;                 /* merk-blauw: structuur/markers/randen, tekst-veilig op licht */
  --prim-merk-donker: #0c3c52;
  --prim-merk-tint: #c7e6f2;            /* SITE-hemel — dieper hemelsblauw merk-/paneelvlak (palet D) */
  --prim-accent: #ffc24d;               /* amber; UITSLUITEND de primaire CTA (R8) */
  --prim-accent-hover: #f0b133;         /* hover van de CTA */
  --prim-accent-tekst: #3a2400;         /* diep-amber op accent; NOOIT wit-op-amber (9,13:1) */
  --prim-groen: #157a3c;                /* functioneel goed (R11) */
  --prim-rood:  #b3261e;                /* functioneel niet (R11) */

  --prim-font-kop:  "Mulish", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --prim-font-body: "Mulish", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --prim-font-accent-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --prim-type-xs:  0.8125rem;  --prim-type-s: 0.9375rem;  --prim-type-m: 1.0625rem;
  --prim-type-l:   1.375rem;   --prim-type-xl: 1.875rem;  --prim-type-2xl: 2.75rem;
  --prim-lijnhoogte: 1.6;  --prim-lijnhoogte-kop: 1.15;

  --prim-radius-sm: 6px;  --prim-radius-md: 12px;  --prim-radius-lg: 20px;  --prim-radius-pill: 999px;
  --prim-elevatie-sm: 0 1px 2px rgba(12,60,82,.06), 0 1px 3px rgba(12,60,82,.08);
  --prim-elevatie-md: 0 4px 10px rgba(12,60,82,.08), 0 2px 4px rgba(12,60,82,.06);
  --prim-elevatie-lg: 0 12px 28px rgba(12,60,82,.12), 0 4px 8px rgba(12,60,82,.06);

  /* ---------- ruimte-schaal ---------- */
  --ruimte-100: 4px; --ruimte-200: 8px; --ruimte-300: 16px; --ruimte-400: 24px;
  --ruimte-500: 32px; --ruimte-600: 48px; --ruimte-700: 64px; --ruimte-800: 96px;

  /* ---------- maatvoering (één set, sitebreed) ---------- */
  --content: 1200px;
  --measure-narrow: 720px;

  /* ---------- 2. SEMANTIC ---------- */
  --kleur-tekst: var(--prim-inkt);
  --kleur-tekst-zacht: var(--prim-grijs-600);
  --kleur-achtergrond: var(--prim-papier);
  --kleur-offwhite: var(--prim-offwhite);
  --kleur-merk: var(--prim-merk);
  --kleur-merk-vlak: var(--prim-merk);
  --kleur-marker: var(--prim-merk);
  --kleur-vlak-subtiel: var(--prim-merk-tint);
  --kleur-lijn: var(--prim-grijs-300);
  --kleur-functioneel-groen: var(--prim-groen);
  --kleur-functioneel-rood: var(--prim-rood);
  --kleur-ster: #f5b301;                /* review-sterren — warm goud-geel (mens-eis 2026-07-03; ook toegevoegd aan design/tokens.css) */
  --kleur-accent: var(--prim-accent);
  --kleur-accent-tekst: var(--prim-accent-tekst);

  /* ---------- 3. COMPONENT ---------- */
  --cta-bg: var(--kleur-accent);  --cta-tekst: var(--kleur-accent-tekst);  --cta-radius: var(--prim-radius-md);
  --cta-min-hoogte: 44px;
  --cta-padding: var(--ruimte-300) var(--ruimte-500);
  --kaart-bg: var(--prim-warmwit);  --kaart-border: var(--kleur-lijn);  --kaart-radius: var(--prim-radius-md);
  --kaart-elevatie: var(--prim-elevatie-sm);  --kaart-padding: var(--ruimte-400);
  --formulier-kaart-radius: var(--prim-radius-lg);  --formulier-kaart-elevatie: var(--prim-elevatie-md);
}