/* VLAME design tokens. Enige plek voor kleur, ritme en typografie. */

/* Twee families dragen de pagina, plus een derde die alleen nog
   materiaalopschrift is. Alle drie lokaal gebundeld (SIL OFL 1.1); zie
   assets/fonts/LICENSE-fonts.txt. Geen enkel extern verzoek. */
/* Anybody is een echte variabele font: beide assen blijven open, zodat
   .vl-stretch de breedte-as (font-stretch) kan animeren en Taak 19 hem later
   tegen de scrollpositie kan scrubben. Eén bestand, twee assen. */
/* font-display:block (2026-09-15, klant: "bij scrollen laat hij nog een keer zo'n
   andere titel zien"): met swap tekende de browser een kop eerst in Impact en
   daarna nog eens in Anybody. De face is gepreload (inc/enqueue.php) en 60 KB;
   even wachten is beter dan twee koppen. De broodtekst blijft swap. */
@font-face{font-family:'Anybody';src:url('../fonts/anybody-var.woff2') format('woff2');font-weight:100 900;font-stretch:50% 150%;font-style:normal;font-display:block}
/* Bricolage Grotesque is variabel op drie assen: optische maat, breedte en
   gewicht. Eén bestand dekt dus 400 en 600, en de opsz-as zorgt dat kleine
   tekst iets opener staat dan grote. */
@font-face{font-family:'Bricolage Grotesque';src:url('../fonts/bricolage-grotesque-var.woff2') format('woff2');font-weight:200 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
/* Het accent: een typewriter. Sinds 2026-09-15 de enige derde face, op
   verzoek van de klant ("maximaal twee fonts en een accentfont, een soort
   typewriter"): bijschriften, labels, tape, de pas en de citaten. Chakra Petch
   en Instrument Serif zijn eruit. */
@font-face{font-family:'Courier Prime';src:url('../fonts/courier-prime-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('../fonts/courier-prime-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#F7F4F1;
  --paper-2:#EDE7E3;
  --ink:#17111A;
  --ink-2:#1F1723;
  --muted:#6B6169;
  --line:#DAD1CC;
  --amber:#FFB13C;
  --orange:#FF8A3D;
  --coral:#FF5C3E;
  --pink:#F0407A;
  --magenta:#E12C7B;
  --violet:#8B2BB0;
  --flame:linear-gradient(100deg,var(--amber) 0%,var(--coral) 38%,var(--magenta) 72%,var(--violet) 100%);
  --pad:clamp(20px,5vw,72px);
  --maxw:1360px;

  /* motion */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --dur-fast:.25s;
  --dur-mid:.45s;
  --dur-slow:.7s;

  /* tape */
  --tape:#E9E1DA;

  /* ---------- ontwerptaal ---------- */

  /* Drie typografische rollen, twee families die je echt leest. Eén plek zet
     de hele site om. Display staat in hoofdletters; het accentwoord gebruikt
     diezelfde face en maat en krijgt zijn nadruk van het vuur (2.2), niet van
     een vierde lettertype. --font-tech is sinds 2026-09-14 alleen nog
     materiaalopschrift: de laminate-pas, de barcode en de gaffertape.

     De body-face is op 2026-09-14 gewisseld naar Bricolage Grotesque. Reden is
     niet smaak maar herkenbaarheid: de vorige keuze is de body-face van
     wearecrotona.nl, de opdrachtgever waar Vera zelf voor werkt, en haar site
     mag niet op die van haar klant lijken. */
  --font-display:'Anybody',Impact,'Arial Black',system-ui,sans-serif;
  --font-body:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Twee families en één accent (klant, 2026-09-15). --font-tech en
     --font-quote bestaan nog als rolnamen, maar wijzen allebei naar dezelfde
     typewriter: materiaalopschrift én citaten zijn het accent. */
  --font-mono:'Courier Prime','Courier New',Courier,monospace;
  --font-tech:var(--font-mono);
  --font-quote:var(--font-mono);

  /* Vuur. De hete kern zit boven het vlampalet: bijna wit geel, de kleur van
     de punt van een vlam waar hij het heetst is. Alleen daarvoor. */
  --fire-tip:#FFE9A8;
  --fire-deep:#B2202B;
}