/* OnzeSpeeltuin.nl: design tokens. Eén plek voor kleur, letter, ruimte, vorm en beweging.
   Bron van de kleuren: het thema van De Linde en het platform (--color-groen #2b4b2d, Renoud 03-10). */
:root {
  /* ── kleur: primitieven ── */
  --groen-900: #1f3821;   /* donkerste vlak (aanmelden in stappen) */
  --groen-800: #2b4b2d;   /* het donkergroen: tekst, koppen, knoppen */
  --groen-700: #466548;   /* vlak op groen (antwoord, tabs) */
  --groen-500: #5d6e5e;   /* zachte tekst */
  --groen-400: #9fb79b;   /* labels op groen */
  --groen-300: #b8cdb2;
  --groen-250: #b5d5aa;   /* grond van de footer */
  --groen-200: #cfe0c9;   /* tekst op groen */
  --groen-150: #d6dfd1;   /* lijnen */
  --groen-120: #e4ece1;
  --groen-100: #e6ece1;   /* zand: kaarten op licht */
  --groen-80:  #e7eee3;   /* vlak "kennisbank" */
  --groen-60:  #eef3e9;   /* lucht van de illustratie */
  --groen-50:  #f0f4ed;   /* licht: de achtergrond */
  --wit: #ffffff;
  --geel-500: #ffc311;    /* het geel: knoppen en de zwevende CTA */
  --zwart-scherm: #f3f4f3;
  --balk: #e4ebe0; --balk-stip: #c7d2c2;

  /* ── kleur: betekenis ── */
  --kleur-tekst: var(--groen-800);
  --kleur-tekst-zacht: var(--groen-500);
  --kleur-tekst-op-groen: var(--groen-200);
  --kleur-label-op-groen: var(--groen-400);
  --kleur-achtergrond: var(--groen-50);
  --kleur-vlak: var(--wit);
  --kleur-vlak-zacht: var(--groen-100);
  --kleur-lijn: var(--groen-150);
  --kleur-accent: var(--geel-500);
  --kleur-donker: var(--groen-800);
  --kleur-donker-2: var(--groen-700);
  --kleur-donkerst: var(--groen-900);
  --kleur-lucht: var(--groen-60);
  --kleur-grond: var(--groen-250);
  --schaduw-kaart: 0 34px 70px -34px rgb(43 75 45 / .5);
  --schaduw-scherm: 0 40px 90px -40px rgb(0 0 0 / .55);
  --schaduw-site: 0 30px 60px -24px rgb(0 0 0 / .35);
  --schaduw-pil: 0 14px 30px -14px rgb(0 0 0 / .3);
  --sluier: rgb(20 34 21 / .88);
  --stippel: rgb(43 75 45 / .45);
  --veld-op-groen: rgb(239 233 225 / .1);
  --veld-rand-op-groen: rgb(239 233 225 / .2);
  --lijn-op-groen: rgb(240 244 237 / .16);

  /* ── letter ── */
  --font-kop: "Bricolage Grotesque", system-ui, sans-serif;   /* alle titels: ExtraBold (800), opsz 96 */
  --font-tekst: "DM Sans", system-ui, sans-serif;
  --gewicht-kop: 800;
  --tekst-basis: 1.06rem;
  --regel-basis: 1.6;
  --kop-1: clamp(2.5rem, 6.4vw, 5.6rem);
  --kop-2: clamp(2.1rem, 4.4vw, 3.8rem);
  --kop-3: clamp(1.2rem, 1.6vw, 1.4rem);
  --tekst-label: .82rem;
  --tekst-klein: .9rem;

  /* ── ruimte ── */
  --ruimte-1: 4px; --ruimte-2: 8px; --ruimte-3: 12px; --ruimte-4: 16px; --ruimte-5: 20px; --ruimte-6: 24px;
  --ruimte-7: 28px; --ruimte-8: 32px; --ruimte-9: 40px; --ruimte-10: 48px; --ruimte-11: 56px; --ruimte-12: 64px; --ruimte-13: 72px;
  --ruimte-sectie: clamp(104px, 11vw, 176px);   /* tussen secties: de pagina moet ademen */
  --breedte: 1280px;
  --kantlijn: 20px;

  /* ── vorm ── */
  --r-klein: 14px; --r-midden: 20px; --r: 24px; --r-kaart: 28px; --r-tegel: 30px; --r-groot: 36px; --r-pil: 99px;

  /* ── beweging ── */
  --uit: cubic-bezier(.34, 1.56, .64, 1);   /* ease-out back, zoals de letters van het logo */
  --duur-kort: .25s; --duur: .5s; --duur-lang: .6s;
}
@media (max-width: 900px) { :root { --ruimte-sectie: 96px; } }