/* ==========================================================
   Let Them Play — design tokens
   Eén bron voor kleuren, typografie en ruimte.
   Zie BRANDING.md voor het gebruik.
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap");

:root {
  /* --- Basiskleuren --- */
  --ink: #1b1a3a;          /* tekst, donkere vlakken */
  --ink-soft: #4a4868;     /* secundaire tekst */
  --paper: #fff8ec;        /* achtergrond */
  --paper-deep: #f6ebd6;   /* afwisselende secties, kaarten */
  --white: #ffffff;

  /* --- Speelkleuren (de vier Twister-stippen) --- */
  --play-red: #e8432e;
  --play-blue: #2f5bea;
  --play-yellow: #ffc328;
  --play-green: #1fa35c;

  /* --- Functioneel --- */
  --link: var(--play-blue);
  --focus: var(--play-blue);
  --line: rgba(27, 26, 58, 0.14);

  /* --- Typografie --- */
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-sm: 0.9375rem;                         /* 15px */
  --text-base: 1.0625rem;                       /* 17px */
  --text-lg: 1.25rem;                           /* 20px */
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --text-hero: clamp(3.25rem, 1.8rem + 7vw, 7.5rem);

  --leading-tight: 1.02;
  --leading-snug: 1.2;
  --leading-body: 1.6;

  /* --- Ruimte (8px-raster) --- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;

  --section-pad: clamp(var(--space-8), 8vw, var(--space-12));
  --container: 68rem;
  --gutter: 1rem;

  /* --- Vorm --- */
  --radius-sm: 0.5rem;
  --radius: 1.25rem;
  --radius-pill: 999px;
  --shadow-pop: 6px 6px 0 var(--ink);  /* harde "sticker"-schaduw */
}

@media (min-width: 40rem) {
  :root { --gutter: 1.5rem; }
}