/* ===========================================================================
   FRANCHISEHUB, DE GEDEELDE TOKENS VAN DE PUBLIEKE PAGINA'S

   Kleur, ruimte, radii, elevatie, beweging en type. Verder niets: geen
   bouwstenen, geen componenten, geen indeling. Elke publieke pagina linkt dit
   bestand en schrijft daarna zijn eigen compositie.

   WAAROM DIT BESTAAT
   Tot 02-09-2026 droeg elke publieke pagina haar eigen kopie van deze waarden
   in een <style>-blok. Dat is een keer echt misgegaan: werken-bij.html bleef op
   het oude indigo palet staan (--primary:#4556d9) omdat de voorpagina bij het
   herontwerp een nieuw palet kreeg en die pagina niets deelde. Niemand zag het,
   want er is geen enkele plek waar die twee bestanden elkaar raken. Met zeven
   subpagina's erbij zou dat zeven keer opnieuw kunnen gebeuren.

   DE REGEL
   Een waarde die op meer dan een pagina hoort te kloppen, staat hier. Een
   waarde die bij een compositie hoort, staat bij die compositie. Zodra hier een
   klasse verschijnt in plaats van een variabele, is de grens overschreden.

   De contrastverhoudingen achter de inkten zijn numeriek doorgerekend tegen
   WCAG en niet geschat; de verhouding op wit staat per inkt vermeld. Wie een
   waarde wijzigt, rekent hem opnieuw door op de echte DOM.
   =========================================================================== */

:root{
  /* ---------- Kleur ----------
     Wit als basis met zacht blauw en zacht roze, plus lila als brug tussen die
     twee. Elke waarde hieronder is numeriek tegen WCAG doorgerekend, niet
     geschat: een bleek palet glijdt anders ongemerkt af naar onleesbaar. De
     verhouding op wit staat er per inkt bij. */

  /* Papier en oppervlakken */
  --wit:#ffffff;
  --papier:#f7f8fc;         /* koel bijna-wit, afwisselende sectie */
  --papier-roze:#fdf1f7;    /* vlek achter een roze accent */
  --papier-lila:#f2effd;
  --papier-mint:#e8f6ef;
  --papier-amber:#fdf2e3;

  /* Inkt */
  --ink-900:#161a3d;   /* 16,81 op wit, koppen */
  --ink-700:#3a3f63;   /* 10,14 op wit */
  --ink-600:#4b5175;   /*  7,68 op wit */
  --ink-500:#585e80;   /*  6,31 op wit, bodytekst */
  --ink-400:#656b8c;   /*  5,20 op wit, ondergrens voor leesbare tekst */
  --ink-300:#7d83a3;   /*  3,72 op wit, UITSLUITEND decoratie, nooit tekst */

  /* Randen */
  --rand-sterk:#ced4ec;
  --rand:#e2e6f5;
  --rand-zacht:#eceff9;

  /* Accenten */
  --blauw:#3455d4;          /* 6,18 op wit */
  --blauw-diep:#2440ad;     /* 8,71 op wit, hover en actief */
  --blauw-zacht:#dee7fd;
  --blauw-rand:#bccbfa;
  --blauw-waas:rgba(52,85,212,.11);

  --roze:#c22a72;           /* 5,43 op wit */
  --roze-diep:#9d1e5b;
  --roze-zacht:#fbdde9;
  --roze-rand:#f4c0d6;
  --roze-waas:rgba(194,42,114,.10);

  --lila:#6b4fce;           /* 5,78 op wit */
  --lila-zacht:#e6e0fb;
  --lila-rand:#cfc4f6;
  --lila-waas:rgba(107,79,206,.10);

  /* Status. Kleur is nooit de enige drager: elke status staat er ook in tekst. */
  --mint:#0f7a4d;           /* 5,37 op wit */
  --mint-rand:#8fd2b4;
  --amber:#8a5a12;          /* 5,91 op wit */
  --amber-rand:#ecc78c;

  /* De donkere band. Daarnaast een tweede, dieper oppervlak.
     Vier plekken op de pagina zijn donker: de cijferstrook, de bewijssectie,
     de modules en de voet. Op een enkele tint werden dat vier keer hetzelfde vlak.
     --band-diep is bijna zwart en draagt alleen de bewijssectie, die als enige
     met randlicht wordt aangelicht in plaats van met stippen of wolken.
     Contrast van --band-zacht op --band-diep is 15,4 en dus ruimer dan op de
     gewone band; er is aan leesbaarheid niets ingeleverd. */
  --band:#141a3c;
  --band-diep:#080b1f;
  --band-zacht:#c9cfee;     /* 10,98 op de band */
  --band-lila:#c3bdf5;      /*  9,59 op de band */
  --band-rand:rgba(255,255,255,.13);
  --band-rand-sterk:rgba(255,255,255,.24);

  /* ---------- Ruimte ----------
     Eén schaal in plaats van de 25 verschillende margin-top-waarden die hier
     stonden. */
  --r1:4px;  --r2:8px;  --r3:12px; --r4:16px; --r5:20px;
  --r6:26px; --r7:32px; --r8:40px; --r9:52px; --r10:64px;
  --r-sectie:clamp(72px,8vw,124px);
  --r-kant:clamp(20px,5vw,56px);
  --breed:1320px;

  /* ---------- Radii ----------
     Waren 16 losse waarden. Nu vijf, plus twee organische vormen. Die laatste
     zijn geen decoratie: ze dragen de overgangen en verankeren de composities. */
  --rond-xs:6px; --rond-sm:10px; --rond:14px; --rond-lg:20px; --rond-xl:28px;
  --rond-vol:999px;
  /* Vier ongelijke hoekparen. Hoe verder van 50% af, hoe minder de vorm als een
     ellips leest en hoe meer als iets dat met de hand is neergezet. */
  --blob-a:68% 32% 44% 56% / 40% 62% 38% 60%;
  --blob-b:34% 66% 58% 42% / 62% 36% 64% 38%;

  /* ---------- Elevatie ----------
     Was één schaduw, elf keer letterlijk herhaald. Vier niveaus plus twee
     gekleurde, zodat hoogte iets betekent. */
  --schaduw-1:0 2px 8px -4px rgba(22,26,61,.14);
  --schaduw-2:0 14px 32px -22px rgba(22,26,61,.22);
  --schaduw-3:0 28px 60px -34px rgba(22,26,61,.26);
  --schaduw-4:0 46px 96px -48px rgba(22,26,61,.34);
  --schaduw-blauw:0 18px 44px -20px rgba(52,85,212,.45);

  /* ---------- Beweging ---------- */
  --duur-kort:140ms;
  --duur:220ms;
  --duur-lang:420ms;
  --soepel:cubic-bezier(.22,.72,.28,1);

  /* ---------- Type ----------
     Geen halve pixels meer (14.5, 18.5, 10.5 stonden hier). Gewicht 400 is
     nieuw: alles was 600 of 700, waardoor er geen rust in de pagina zat. */
  --letter:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --t-2xs:11px;
  --t-xs:12px;
  --t-sm:13px;
  --t-md:14px;
  --t-base:15px;
  --t-lg:17px;
  --t-xl:20px;
  --t-2xl:24px;
  --t-h2:clamp(30px,4vw,52px);
  --t-h1:clamp(38px,5.4vw,74px);
  /* De displayschaal. Bewust geen zesde tussenmaat maar een sprong: hij mag
     op hoogstens vier plekken van de pagina staan en moet daar het verschil
     maken tussen een kop en een moment. Overal een beetje groot leest als
     toeval, één keer heel groot leest als regie. */
  /* De ondergrens stond op 64px. Dat was te hoog: op een venster van 320px is
     "afwijkingen" bij 64px zo'n 350px breed en werd het document dertig pixels
     breder dan het scherm. Gemeten, niet geschat. De ondergrens is nu 44px en
     de helling steiler, zodat het bovenaan even groot blijft. */
  --t-display:clamp(44px,8.6vw,132px);
}