/* ==================================================================
   Stapminder: design tokens, vierde iteratie.

   Richting: warm maar scherp. Crème papier, navy inkt, terracotta
   koper als accent, salie uitsluitend functioneel (status, succes).
   Vormtaal: dunne lijnen en witruimte doen het werk; een kader is de
   uitzondering, geen standaard. Koper markeert hooguit een paar
   plekken per pagina.

   Dit is de enige plek met kleurwaarden en met maatvoering. In
   main.css staan nergens losse hexcodes en geen losse font-sizes:
   alles komt uit de schaal hieronder. Zo kan er geen combinatie
   ontstaan die het contrast breekt en geen zevende tekstgrootte
   insluipen.

   Contrastregels (WCAG AA), afgedwongen via tools/contrast-check.mjs:
   - gewone tekst ≥ 4.5:1, grote koppen ≥ 3:1
   - op --navy staat uitsluitend --inkt-op-donker of --inkt-op-donker-body
   - --koper en --salie zijn decoratief; als tékstkleur alleen
     --koper-tekst en --salie-tekst
   ================================================================== */

:root {
  /* Achtergronden */
  --papier:        #FBF7F2;
  --papier-zacht:  #F6EFE6;
  --kaart:         #FFFDF9;
  --steen:         #EFE9E0;
  --navy:          #0B1D31;
  --navy-2:        #132A45;

  /* Tekst op licht papier */
  --inkt:          #0B1D31;
  --inkt-body:     #46505F;
  --inkt-gedempt:  #5D6472;

  /* Tekst op --navy: NOOIT iets donkerders gebruiken */
  --inkt-op-donker:      #F7F2EA;
  --inkt-op-donker-body: #C3CBD6;

  /* Koper: het accent */
  --koper:         #C97143;
  --koper-tekst:   #A9552F;
  --koper-diep:    #8C4526;

  /* Salie: uitsluitend functioneel groen (status, succes) */
  --salie-vlak:    #DCE5D6;
  --salie-tekst:   #40573D;

  /* ---- Afgeleiden (alleen mengsels van bovenstaande tokens) ---- */

  --lijn:          color-mix(in srgb, var(--navy) 14%, transparent);
  --lijn-zacht:    color-mix(in srgb, var(--navy) 8%, transparent);
  --lijn-op-donker: color-mix(in srgb, var(--inkt-op-donker) 18%, transparent);

  /* Achtergrondwas voor de hero; nooit achter lopende tekst een vlak */
  --was-hero:      linear-gradient(180deg, var(--papier), var(--papier-zacht));

  /* ------------------------------------------ Typografisch systeem ----
     Twee families: DM Sans doet al het werk, Source Serif 4 is het ene
     gebaar en staat alleen op h1 en h2. Zeven groottes, meer niet.
     Elke regel in main.css kiest er één; nergens een los getal. */

  --font-basis:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-kop:      "Source Serif 4", Georgia, "Times New Roman", serif;

  --t-h1:          clamp(2.1rem, 3vw, 2.85rem);   /* paginakop */
  --t-h2:          clamp(1.55rem, 2.2vw, 2.05rem); /* sectiekop */
  --t-h3:          1.125rem;                       /* blokkop */
  --t-lead:        1.0625rem;                      /* intro-alinea */
  --t-body:        1rem;                           /* lopende tekst */
  --t-klein:       0.9375rem;                      /* secundaire tekst */
  --t-mini:        0.8125rem;                      /* bijschrift, voetregel */
  --t-label:       0.75rem;                        /* kapitaal label */

  --gew-kop:       600;   /* serif-koppen */
  --gew-nadruk:    650;   /* h3, knoppen, labels in tekst */
  --gew-label:     700;   /* kapitaal label, nummers */

  --lh-kop:        1.12;
  --lh-body:       1.65;
  --sperring:      0.08em;  /* letterspacing van kapitaal labels */

  /* Maatvoering: 8px-systeem */
  --r-klein:       4px;
  --r-basis:       8px;
  --r-paneel:      12px;
  --omslag-breed:  77.5rem;   /* 1240px */
  --omslag-smal:   46rem;
  --kolom-hero:    32.5rem;   /* 520px: de hero-tekstkolom */
  --kolom-lees:    38rem;     /* comfortabele regellengte */

  /* Sectieritme: drie hoogtes, zodat de pagina niet in één maat loopt */
  --ruimte-sectie:      clamp(4rem, 7vw, 6.25rem);
  --ruimte-sectie-ruim: clamp(5.5rem, 9.5vw, 8.5rem);
  --ruimte-sectie-kort: clamp(3rem, 5vw, 4.25rem);

  /* ---------------------------- Ritme: één set waarden voor de site ----
     Beweging loopt uit, veert nooit terug: elastic en bounce staan hier
     bewust niet. Wat op het scherm beweegt hoort een proces te tonen,
     geen versiering. beweging.js leest --stagger hieruit, zodat de
     tijden op één plek staan.

     Secties komen binnen door alleen op te klaren: geen verschuiving,
     geen schaal. Een pagina waarop bij het scrollen niets verspringt
     leest rustiger, en de aandacht blijft bij de tekst in plaats van
     bij de entree ervan. Alleen twee dingen bewegen echt, omdat ze iets
     betekenen: de lijn van de tijdlijn die zich tekent en de balkjes
     van de procesbalk die zich aaneenrijgen. */

  --ease:           cubic-bezier(0.33, 1, 0.68, 1);    /* algemeen, zacht uit */
  --ease-uit:       cubic-bezier(0.16, 1, 0.3, 1);     /* rustig uitlopen */
  --ease-lijn:      cubic-bezier(0.65, 0, 0.35, 1);    /* langs een tracé */

  --duur-kort:      0.24s;   /* hover, focus, statuswissel */
  --duur-basis:     0.44s;   /* blok dat aan- of uitgaat */
  --duur-reveal:    0.85s;   /* sectie die binnenkomt */
  --stagger:        90ms;    /* stap tussen opeenvolgende kinderen */
}