/**
 * Design tokens (T22, CLAUDE.md 8) — overgenomen uit het Claude Design-
 * bestand in /design (Huisstijl.dc.html en "Rommeldam Aanmelden.dc.html").
 * Buiten dit bestand staat geen hex-kleur en geen harde pixelwaarde voor
 * spacing: alle andere CSS-bestanden gebruiken uitsluitend var(--...).
 *
 * De kleurwaarden uit het designbestand waren organisch (veel losse
 * oklch()-tinten voor bijna dezelfde grijstint). Hier teruggebracht tot een
 * consistente schaal met dezelfde huetonen, zodat nieuwe schermen niet
 * opnieuw een tint hoeven te verzinnen.
 *
 * Let op: CSS custom properties werken niet in @media-queries. De
 * breakpoint-tokens hieronder zijn dus documentatie/referentie; elk
 * component-stylesheet herhaalt de pixelwaarde zelf in zijn @media-regel
 * met een verwijzing naar de tokennaam in een commentaar.
 */
:root {
  /* Kleur — merk */
  --kleur-primair: #0d8bf0;
  --kleur-primair-donker: #0a6fc2;
  --kleur-accent: oklch(74% 0.15 55);
  --kleur-accent-donker: oklch(60% 0.15 55);

  /* Kleur — status */
  --kleur-succes: oklch(65% 0.14 145);
  --kleur-succes-donker: oklch(50% 0.14 145);
  --kleur-waarschuwing-bg: oklch(94% 0.04 80);
  --kleur-waarschuwing-rand: oklch(80% 0.06 80);
  --kleur-waarschuwing-tekst: oklch(35% 0.1 60);
  --kleur-info-bg: oklch(92% 0.05 250);
  --kleur-info-rand: oklch(82% 0.07 250);
  --kleur-info-tekst: oklch(30% 0.05 250);
  --kleur-gevaar: oklch(50% 0.15 30);
  --kleur-gevaar-donker: oklch(40% 0.15 30);
  --kleur-gevaar-bg: oklch(94% 0.06 30);
  --kleur-gevaar-rand: oklch(82% 0.09 30);

  /* Kleur — badges (groepen/wachtlijst) */
  --kleur-groep-a: var(--kleur-primair);
  --kleur-groep-b: var(--kleur-accent);
  --kleur-wachtlijst-bg: oklch(90% 0.03 80);
  --kleur-wachtlijst-tekst: oklch(30% 0.02 260);

  /* Kleur — grijswaarden en oppervlakken */
  --kleur-achtergrond: oklch(98% 0.008 90);
  --kleur-oppervlak: #ffffff;
  --kleur-op-kleur: #ffffff; /* tekst/iconen op een verzadigde achtergrond (knoppen, badges) */
  --kleur-inkt: oklch(24% 0.02 260);
  --kleur-inkt-gedempt: oklch(45% 0.02 260);
  --kleur-inkt-zacht: oklch(38% 0.02 260);
  --kleur-rand: oklch(90% 0.008 90);
  --kleur-rand-sterk: oklch(85% 0.008 90);
  --kleur-uitgeschakeld-bg: oklch(94% 0.008 90);
  --kleur-uitgeschakeld-tekst: oklch(55% 0.02 260);

  /* Typografie */
  --lettertype-koppen: 'Baloo 2', sans-serif;
  --lettertype-basis: 'Figtree', sans-serif;

  --tekst-xs: 0.75rem;    /* 12px — badges, meta */
  --tekst-sm: 0.8125rem;  /* 13px — labels, hulptekst */
  --tekst-basis: 0.9375rem; /* 15px — lopende tekst, invoervelden */
  --tekst-md: 1rem;       /* 16px — knoppen, subkoppen */
  --tekst-lg: 1.1875rem;  /* 19px — kaartkoppen */
  --tekst-xl: 1.5rem;     /* 24px — schermkoppen */
  --tekst-2xl: 1.75rem;   /* 28px — sectiekoppen */
  --tekst-3xl: 2.5rem;    /* 40px — grote koppen */

  --gewicht-normaal: 400;
  --gewicht-medium: 500;
  --gewicht-halfvet: 600;
  --gewicht-vet: 700;
  --gewicht-extravet: 800;

  --regelhoogte-krap: 1.1;
  --regelhoogte-basis: 1.5;
  --regelhoogte-ruim: 1.7;

  /* Ruimte (4px-raster) */
  --ruimte-1: 0.25rem;  /* 4px */
  --ruimte-2: 0.5rem;   /* 8px */
  --ruimte-3: 0.75rem;  /* 12px */
  --ruimte-4: 1rem;     /* 16px */
  --ruimte-5: 1.25rem;  /* 20px */
  --ruimte-6: 1.5rem;   /* 24px */
  --ruimte-8: 2rem;     /* 32px */
  --ruimte-10: 2.5rem;  /* 40px */
  --ruimte-12: 3rem;    /* 48px */
  --ruimte-16: 4rem;    /* 64px */
  --ruimte-20: 5rem;    /* 80px */

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-vol: 999px;

  /* Schaduwen */
  --schaduw-sm: 0 1px 3px oklch(24% 0.02 260 / 0.08);
  --schaduw-md: 0 8px 24px oklch(24% 0.02 260 / 0.12);
  --schaduw-focus: 0 0 0 3px oklch(74% 0.13 235 / 0.45);

  /* Breakpoints (referentie, zie toelichting hierboven) */
  --breakpoint-sm: 480px;
  --breakpoint-md: 760px;
  --breakpoint-lg: 1040px;

  /* Raakvlakken (CLAUDE.md 8: minimaal 44px) */
  --raakvlak-min: 44px;
}