/*
 * Designtokens. Spiegelt DESIGN-SYSTEM.md sectie 5, een op een.
 *
 * Dit is het ENIGE bestand met kleurwaarden, maten, radii en duren. Een
 * hardgecodeerde #f5c52a of padding: 13px ergens anders is een fout: zo houdt
 * een designsysteem stilletjes op te bestaan, want de tweede hardgecodeerde
 * waarde laat de eerste normaal lijken. Stylelint blokkeert het.
 *
 * Buiten dit bestand mogen alleen 0, 1px voor haarlijnen, 100%, 50% en 1fr.
 */

:root {

  /* ---- Kleur ------------------------------------------------------------
   * Oker komt letterlijk uit het huisstijlblad van 2016 (#F5C52A, cmyk
   * 4 22 94 0). Karmijn is de rode mond uit het logo. Alle contrastwaarden
   * hieronder zijn doorgerekend, niet geschat.
   */
  --oker: #f5c52a;          /* alleen als vlak. Op wit is dit 1,63:1 en valt het door de mand */
  --oker-donker: #8a6408;   /* linktekst en focusring. 5,37:1 op wit */
  --oker-zacht: #fdf3d3;    /* okergeel op 18 procent, als rustig vlak achter tekst */
  --karmijn: #c62026;       /* aanmeldstop, foutmelding, actieve navigatie. 5,78:1 */
  --ink: #241f1b;           /* alle tekst. 16,32:1 op wit */
  --klei: #6f6458;          /* bijschriften en RIZIV-nummers. 5,77:1 op wit */
  --bot: #f7f1e4;           /* tweede vlak, de plaat over de fotoband. Ink erop is 14,50:1 */
  --zand: #e7dcc4;          /* haarlijnen en tabelregels */
  --wit: #ffffff;           /* paginavlak */

  /* Bot met doorzicht, voor tekst en lijnen OP de donkere voet. --klei is daar
   * te donker: die is gekozen voor tekst op wit. */
  --bot-gedempt: rgb(247 241 228 / 78%);
  --bot-lijn: rgb(247 241 228 / 20%);

  /* Het waas achter een venster. Inkt op 55 procent: donker genoeg om de
   * pagina eronder rustig te maken, licht genoeg om te zien dat hij er nog is. */
  --waas: rgb(36 31 27 / 55%);

  --fout: #c62026;          /* hergebruikt karmijn met opzet: een rood, niet twee */
  --goed: #2e6b4f;          /* bevestiging na versturen. 6,30:1 op wit */

  /* ---- Letter -----------------------------------------------------------
   * Een familie, Atkinson Hyperlegible Next, variabel 200 tot 800. Getekend
   * door het Braille Institute zodat letters niet met elkaar te verwarren
   * zijn. Deze praktijk behandelt lees- en leerproblemen, dus dat is hier een
   * merkargument en geen smaakkwestie.
   *
   * De huisletter is Tenso, maar daar is geen weblicentie voor. Zodra die er
   * is, verandert alleen --letter-display hieronder.
   */
  --letter-display: "Atkinson Hyperlegible Next", ui-sans-serif, sans-serif;
  --letter-tekst: "Atkinson Hyperlegible Next", ui-sans-serif, sans-serif;

  --gewicht-normaal: 400;
  --gewicht-half: 600;
  --gewicht-vet: 700;
  --gewicht-zwaar: 800;

  /* ---- Tekstgrootte ----------------------------------------------------- */
  --tekst-xs: 0.875rem;   /* 14px */
  --tekst-s: 1rem;        /* 16px */
  --tekst-m: 1.125rem;    /* 18px */
  --tekst-l: 1.3125rem;   /* 21px */
  --tekst-h3: 1.625rem;   /* 26px */
  --tekst-h2: clamp(1.75rem, 3.4vw, 2.375rem);
  --tekst-h1: clamp(2.25rem, 5.2vw, 3.75rem);

  --regelhoogte-krap: 1.06;
  --regelhoogte-kop: 1.18;
  --regelhoogte-h3: 1.3;
  --regelhoogte-lead: 1.55;
  --regelhoogte-tekst: 1.65;
  --regelhoogte-klein: 1.45;

  /* Maximale leesregel: 68 tekens. Langer leest slechter, en dat weegt hier
   * zwaarder dan gemiddeld. */
  --maat-tekst: 34rem;
  --maat-pagina: 80rem;

  /* De maat van een portret in de teamrij, en daarmee de bovengrens van een
   * kolom in dat raster. Zonder die grens groeit de cirkel mee als het team
   * kleiner wordt: met twee mensen werd hij ruim 500 pixels. Dit is wat een
   * van drie kolommen op 1440 al mat. */
  --portret-groot: 20.5rem;

  /* ---- Ruimte -----------------------------------------------------------
   * Basis 4px. Het sectieritme is bewust NIET uniform.
   */
  --ruimte-1: 0.25rem;
  --ruimte-2: 0.5rem;
  --ruimte-3: 0.75rem;
  --ruimte-4: 1rem;
  --ruimte-5: 1.5rem;
  --ruimte-6: 2rem;
  --ruimte-7: 3rem;
  --ruimte-8: 4rem;
  --ruimte-9: 6rem;
  --ruimte-10: 8rem;
  --ruimte-11: 11rem;

  --marge-buiten: var(--ruimte-5);
  --sectie-lucht: var(--ruimte-8);

  /* ---- Vorm -------------------------------------------------------------
   * Het merk IS een cirkel: een open mond, met twee bogen die eruit stralen.
   * De hele vormentaal komt daaruit. Geen willekeurige afronding en geen
   * blobs, maar een schaal die van de cirkel naar buiten loopt, met per
   * elementklasse een eigen waarde.
   *
   *   rond    de mond zelf: portretten en ronde markeringen
   *   pil     alles wat je aanraakt: knoppen, chips, het telefoonnummer
   *   plaat   de grote vlakken die als ronde platen over elkaar schuiven
   *   groot   kaarten en de fotoband
   *   midden  invoervelden
   *   klein   labels en kleine markeringen
   */
  --rond: 50%;
  --pil: 62.5rem;
  --radius-plaat: 2.5rem;
  --radius-groot: 1.5rem;
  --radius-midden: 0.75rem;
  --radius-klein: 0.375rem;

  --lijn: 1px solid var(--zand);
  --lijn-sterk: 2px solid var(--ink);

  /* Vaste hoogte voor elk enkelregelig invoerveld en voor de keuzelijst.
   * Niet aan de inhoud overlaten: een datumveld heeft in Chrome een interne
   * hoogte van 32px tegen 30px voor een tekstregel, en dan staat dat ene veld
   * twee pixels hoger dan de rest. In een rijtje zie je dat. */
  --veldhoogte: 3.625rem;

  /* Geen schaduw op deze site. De diepte komt van platen die over elkaar
   * schuiven, niet van een wazige rand onder alles. */

  /* ---- Beweging ---------------------------------------------------------
   * Er beweegt bewust iets, maar alles beantwoordt een handeling of het in
   * beeld komen van een sectie, en niets herhaalt zichzelf.
   *
   * De scroll-animaties lopen op animation-timeline: view(), dus zonder
   * JavaScript. In een browser die dat niet kent, staat alles er gewoon:
   * inhoud wordt nooit verborgen in afwachting van een script.
   */
  --ease-uit: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-zacht: cubic-bezier(0.4, 0, 0.2, 1);
  --duur-snel: 160ms;
  --duur-normaal: 240ms;
  --duur-traag: 520ms;

  /* Hoe ver iets opkomt bij het in beeld schuiven. Klein houden: boven de 20px
   * wordt het onrustig in plaats van levendig. */
  --opkomst: 14px;

  /* ---- Breekpunten (als documentatie; media queries kunnen geen var) ----
   *   480px  grote telefoon
   *   720px  tablet staand
   *   1024px tablet liggend en kleine laptop
   *   1280px desktop
   */
}

@media (min-width: 64rem) {
  :root {
    --marge-buiten: var(--ruimte-8);
    /* 6rem en niet 8rem. Boven en onder samen was dat 256 pixels tussen twee
     * secties, en met secties die maar de helft van de breedte gebruikten las
     * dat als een gat in plaats van als lucht. De secties zijn nu breed; dit
     * haalt het laatste overschot eraf. */
    --sectie-lucht: var(--ruimte-9);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duur-snel: 1ms;
    --duur-normaal: 1ms;
    --duur-traag: 1ms;
    --opkomst: 0;
  }
}