/* Tokens MyLifeIsSoccer, premium herbouw.
   Merkkleuren opgemeten van het origineel (_referentie/huisstijl.md);
   typografie en ritme volgens het Helveron-designonderzoek. */
:root {
  /* Kleuren. Het blauw is het gemeten merkblauw; het verschijnt alleen
     als accent (nummers, een accentwoord, hairlines, randlicht),
     nooit als groot vlak of knopvulling. */
  --kleur-accent:          #176BE0;
  --kleur-accent-tekst:    #1256B4; /* accent als tekst op licht, 7,0:1 */
  --kleur-accent-op-donker:#5C9BFF; /* accent als tekst op navy, 6,8:1 */
  --kleur-inkt:            #16181B;
  --kleur-inkt-zacht:      #4A4F56;
  --kleur-papier:          #F6F5F2; /* warm off-white, geen hard wit */
  --kleur-papier-diep:     #EDEBE6; /* verdiepte vlakken op licht */
  --kleur-navy:            #0C1219; /* donkere ankers, geen puur zwart */
  --kleur-navy-vlak:       #111A24; /* verdiepte vlakken op donker */
  --kleur-op-donker:       #EDEEF0;
  --kleur-op-donker-zacht: #A7B0BC;
  --kleur-lijn:            #DCD9D2; /* hairlines op licht */
  --kleur-lijn-donker:     #26303C; /* hairlines op navy */
  --kleur-fout:            #B3261E;
  --kleur-succes:          #1E6B3A;
  --kleur-focus:           #176BE0;

  /* Compatibiliteit met bestaande paginastijlen */
  --kleur-primair:         var(--kleur-accent);
  --kleur-primair-donker:  var(--kleur-accent-tekst);
  --kleur-vlak:            var(--kleur-papier);
  --kleur-vlak-alt:        var(--kleur-papier-diep);

  /* Afstanden, 8px-raster */
  --r-1: 0.5rem;   /*  8px */
  --r-2: 1rem;     /* 16px */
  --r-3: 1.5rem;   /* 24px */
  --r-4: 2rem;     /* 32px */
  --r-5: 2.5rem;   /* 40px */
  --r-6: 3rem;     /* 48px */
  --r-8: 4rem;     /* 64px */
  --r-10: 5rem;    /* 80px */
  --r-12: 6rem;    /* 96px */

  /* Typografische schaal, vloeiend en getemperd (H1 max 68px) */
  --tekst-xs:  clamp(0.6875rem, 0.67rem + 0.1vw, 0.75rem);
  --tekst-s:   clamp(0.875rem, 0.85rem + 0.2vw, 0.9375rem);
  --tekst-m:   clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --tekst-l:   clamp(1.1875rem, 1.1rem + 0.5vw, 1.5rem);
  --tekst-xl:  clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  --tekst-2xl: clamp(1.875rem, 1.5rem + 1.8vw, 3.25rem);
  --tekst-3xl: clamp(2.625rem, 2rem + 3vw, 4.25rem);

  /* Vorm. Geen slagschaduwen, geen verlopen: een rand of geen rand. */
  --radius-s: 0.5rem;
  --radius-m: 0.75rem;
  --radius-pill: 62.4375rem; /* pill, alleen voor de nav-CTA */

  /* Lettertype: Space Grotesk voor koppen, systeemstack voor lopende tekst */
  --font-kop: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-basis: "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Maatvoering */
  --breedte-site: 72.5rem;  /* 1160px */
  --breedte-tekst: 62ch;

  /* Beweging: een curve, verschijnen 18px omhoog in 700 ms */
  --duur-kort: 180ms;
  --duur-normaal: 320ms;
  --duur-verschijn: 700ms;
  --curve: cubic-bezier(0.22, 0.61, 0.36, 1);
}