/* ==========================================================================
   Padexis — tokens
   GEGENEREERD uit context/design-system.md §2. Niet met de hand bijwerken:
   pas het design system aan en draai de generator opnieuw. Dat document is de
   bron, dit bestand is een afgeleide.
   ========================================================================== */

/* Raleway, self-hosted. Variable font: één bestand dekt 400-700.
   Geen Google-Fonts-call — scheelt een externe request en een consent-discussie.
   SIL Open Font License, self-hosten toegestaan. Zie design-system.md §1. */
@font-face{
  font-family:"Raleway";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("../fonts/raleway-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Raleway";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("../fonts/raleway-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* ---- neutralen: blauwgetint, familie van de navy ---- */
  --n-0:#ffffff;    /* grond, en de dominante kleur van deze richting */
  --n-25:#fbfcfd;   /* nauwelijks zichtbare sectiewissel */
  --n-50:#f5f7f9;   /* afwisselende sectie */
  --n-100:#eaeef2;  /* placeholdervlak, tabelkop */
  --n-200:#e2e8ee;  /* hairline — de standaardlijn van deze pagina */
  --n-300:#c2cad4;  /* zwaardere lijn, formulierrand */
  --n-400:#7c8798;  /* decoratief en iconen. NOOIT bodytekst (3.6:1) */
  --n-600:#566173;  /* captions, bijschriften, secundaire tekst (6.3:1) */
  --n-800:#1e293f;  /* bodytekst (14.5:1) */
  --n-900:#021126;  /* koppen — gelijk aan de merk-navy */

  /* ---- merk ---- */
  --brand:#021126;         /* donkere secties: hero en cijferstrook. Verder niet */
  --brand-ink:#ffffff;     /* tekst op navy (18.9:1) */
  --brand-ink-quiet:#aab6c6; /* secundaire tekst op navy (7.4:1) */
  --accent:#d8ea58;        /* uitsluitend actievlak */
  --accent-ink:#021126;    /* tekst op lime (15.7:1) */
  --accent-hover:#c8dc3e;  /* knop hover */

  /* ---- lijnen op donker ---- */
  --line-ink:rgba(255,255,255,.16);

  /* ---- status (formulier) ---- */
  --err:#b3261e;  --err-bg:#fdf3f2;
  --ok:#1f6b45;

  /* ---- focus: verschilt per grond, anders is hij onzichtbaar ---- */
  --focus:#021126;         /* op licht */
  --focus-on-ink:#d8ea58;  /* op navy */

  /* ---- spacing: basis 4px, ongewijzigd ---- */
  --s-3xs:4px; --s-2xs:8px; --s-xs:12px; --s-s:16px; --s-m:24px;
  --s-l:32px;  --s-xl:48px; --s-2xl:64px; --s-3xl:96px; --s-4xl:128px;

  /* ---- ritme: ruimer dan de wireframe, dat is de helft van de richting ---- */
  --r-tight:clamp(40px, 6vw, 64px);
  --r-base:clamp(64px, 9vw, 104px);
  --r-loose:clamp(88px, 12vw, 152px);

  /* ---- typografie ---- */
  --font:"Raleway", "Helvetica Neue", Arial, sans-serif;
  --t-caption:13px;
  --t-s:15px;
  --t-base:18px;
  --t-lead:21px;
  --t-h3:21px;
  --t-h2:clamp(28px, 1.1rem + 2.1vw, 40px);
  --t-h1:clamp(34px, 1.3rem + 3.1vw, 56px);
  --t-display:clamp(40px, 1.5rem + 4.4vw, 76px);
  --t-stat:clamp(32px, 1.2rem + 2.6vw, 52px);

  /* ---- breedtes: smalle tekstkolom, dat is monografie ---- */
  --w-narrow:680px;
  --w-base:1100px;
  --w-wide:1400px;

  /* ---- vorm: terughoudend, geen schaduw ---- */
  --radius-s:2px;
  --radius-m:4px;   /* knoppen, velden */
  --radius-l:8px;   /* beeldvlakken */
  --shadow-sticky:0 -1px 0 var(--n-200), 0 -8px 24px rgba(2,17,38,.06);

  /* ---- motion ---- */
  --ease:cubic-bezier(.2,.6,.2,1);
  --dur-hover:160ms;
  --dur-reveal:520ms;
  --gutter:var(--s-m);
}