/* GT Cars Events · design tokens
   ──────────────────────────────────────────────────────────────────────────
   Eén bron van waarheid voor de publieke site. Komt uit het ontwerp van
   oktober 2026 (_design/tokens.css), met vijf bewuste afwijkingen die in
   DESIGN.md §0 staan opgeschreven:

     1. het accent is #DB0404 (het rood van gtcarsevents.be), niet #FF5B1F
     2. de ondergrens voor tekst blijft 13px, niet 10px
     3. geen gekleurde gloed — een rand doet hetzelfde zonder te stralen
     4. geen magnetische knoppen
     5. de aftelling is een dagental, geen tikkende klok

   Het beheer laadt dit bestand niet. Dat blijft op base.css draaien, en
   blijft er dus uitzien zoals het eruitzag.
   ────────────────────────────────────────────────────────────────────────── */

/* ── letters ─────────────────────────────────────────────
   Zelf gehost als woff2 uit node_modules; geen Google Fonts-CDN. Archivo is
   één variabel bestand met twee assen: breedte 62–125 en gewicht 100–900.
   Display staat op wdth 125 (smal-hoog, de letter van een rallyplaat),
   lopende tekst op 100. Dat is dezelfde letter, twee standen — geen tweede
   download. */
@font-face {
  font-family: 'Archivo';
  src: url('/vendor/fonts/archivo/archivo-latin-standard-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/vendor/fonts/jetbrains/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/vendor/fonts/jetbrains/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/vendor/fonts/jetbrains/jetbrains-mono-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ── kleur: de twee ondergronden ───────────────────────
     De site speelt zich af op twee materialen: asfalt en papier. Asfalt is
     waar gereden wordt (hero, wagens, oproep), papier is het roadbook (de
     agenda, de reacties, de lange teksten). Dat is geen decoratie maar
     oriëntatie: je ziet aan de ondergrond of je kijkt of leest. */
  --asfalt:        #0E0E0F;
  --asfalt-2:      #141416;  /* kaart of paneel op asfalt */
  --asfalt-3:      #1C1C1F;  /* cijfervenster, skeleton */
  --papier:        #F2EEE6;
  --papier-2:      #FAF8F3;  /* kaart op papier */
  --papier-3:      #FFFDF9;  /* chatballon, invoerveld */
  --inkt:          #0E0E0F;  /* tekst op papier */

  /* ── kleur: één accent ─────────────────────────────────
     #DB0404 komt van de merksite. Wit erop haalt 5,2:1, dus knoppen met
     witte tekst zijn in orde. Als tékst op zwart haalt hij maar 4,0:1 —
     daarvoor is --signaal-licht. Als tekst op papier haalt hij 4,50:1, en
     dat is te krap om op te bouwen: daar staat --signaal-inkt (5,9:1). */
  --signaal:       #DB0404;
  --signaal-hover: #B80303;
  --signaal-licht: #FF2E2E;  /* rode TEKST op asfalt (5,7:1) */
  --signaal-inkt:  #B80303;  /* rode TEKST op papier (5,9:1) */

  /* ── kleur: grijzen ────────────────────────────────────
     Warm, niet koel: ze liggen naast papier en moeten er niet blauw bij
     afsteken. Elke waarde met zijn gemeten contrast erachter. */
  --lijn-donker:        #2A2A2D;
  --lijn-donker-sterk:  #3A3A3E;
  --tekst-donker-2:     #9A968F;  /* secundair op asfalt (6,7:1) */
  --tekst-donker-body:  #D6D1C8;  /* lopende tekst op asfalt */
  --lijn-papier:        #CFC7B8;
  --lijn-papier-sterk:  #B9B1A2;  /* stippellijn, gestreepte rand */
  --tekst-papier-2:     #5E5A54;  /* secundair op papier (5,9:1) */
  --tekst-papier-body:  #3B3833;

  /* ── kleur: betekenis ──────────────────────────────────
     Alleen als statusdrager, nooit decoratief. */
  --fout:          #C4231A;  /* op papier (5,0:1) */
  --fout-donker:   #FF7A6B;  /* op asfalt (7,6:1) */
  --fout-vlak:     #FBE9E6;
  --ok:            #1E6B3A;  /* op papier */
  --ok-donker:     #5BD08A;  /* op asfalt */
  --wacht:         #FF9F0A;  /* open betaling, aandacht */

  /* ── typografie ────────────────────────────────────────
     Archivo voor alles wat je leest, JetBrains Mono voor alles wat je
     afleest: cijfers, datums, km, pk, bedragen, labels. */
  --display:       'Archivo', system-ui, sans-serif;
  --sans-nieuw:    'Archivo', system-ui, sans-serif;
  --mono-nieuw:    'JetBrains Mono', ui-monospace, Consolas, monospace;
  --wdth-display:  125%;

  --fs-display-xl: clamp(38px, 9.2vw, 116px);  /* h1 hero — 900, kapitalen, lh .9 */
  --fs-display-l:  clamp(31px, 5vw, 76px);     /* h2 sectie — 900, kapitalen */
  --fs-display-m:  clamp(28px, 3.7vw, 56px);   /* h2 in een kolom */
  --fs-display-s:  clamp(22px, 2.3vw, 34px);   /* h3 kaart — 800 */
  --fs-display-xs: clamp(19px, 1.6vw, 23px);   /* h3 punt — 800 */
  --fs-body-l:     clamp(16px, 1.25vw, 18px);  /* intro — lh 1.6 */
  --fs-body:       16px;                       /* lh 1.55 */
  --fs-body-s:     14px;
  /* Het ontwerp zette deze twee op 12 en 10px. De ondergrens in dit project
     is 13px en wordt door ontwerpcontrole afgedwongen: een label dat niemand
     op een telefoon kan lezen is een label dat je net zo goed weglaat. */
  --fs-label:      14px;
  --fs-label-s:    13px;
  --fs-data-xl:    clamp(68px, 8.4vw, 128px);  /* kilometerteller — mono 700 */
  --fs-data-l:     clamp(28px, 3vw, 44px);     /* dagental — mono 700 */
  --fs-data-m:     clamp(18px, 1.6vw, 22px);   /* telemetrie — mono 700 */
  --fs-data-s:     14px;                       /* datum, km in een kaart */

  --sp-display:    -0.012em;
  --sp-label:      0.08em;
  --sp-label-s:    0.12em;

  /* ── ruimte: 4-puntsschaal ─────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;
  --s-sectie: clamp(80px, 10vw, 152px);

  /* ── maatvoering ───────────────────────────────────────── */
  --max-w:        1440px;
  --goot-route:   clamp(44px, 10vw, 152px);  /* linkermarge: routelijn + tulpen */
  --goot-r:       clamp(16px, 4vw, 64px);
  --balk-m:       64px;                      /* mobiel: één balk */
  /* Het ontwerp zette de tripteller-strip op 32px. Dan is de telefoonlink
     erin 17px hoog, en de regel in DESIGN.md is dat je elk raakvlak moet
     kunnen raken. 40px is de ondergrens die breedtecontrole meet; de strip
     is daarmee precies zo hoog als zijn kleinste knop. */
  --strip-h:      40px;
  --balk-d:       104px;                     /* desktop: 40 tripteller + 64 hoofdbalk */

  /* ── radius ────────────────────────────────────────────
     Standaard nul. Een roadbook heeft rechte hoeken; afgeronde kaarten zijn
     van een andere site. */
  --r-0:    0;
  --r-s:    2px;    /* vinkvakje */
  --r-chat: 18px;   /* chatballon */
  --r-staart: 4px;  /* de hoek waar de staart van de ballon zit */
  --r-pill: 999px;  /* statusstip, avatar */

  /* ── lijnen ────────────────────────────────────────────── */
  --bw:       1px;
  --bw-route: 2px;
  --bw-focus: 2px;

  /* ── diepte ────────────────────────────────────────────
     Spaarzaam, en altijd zwart. Een schaduw in een kleur is een gloed, en
     in een interface straalt niets licht uit — daarom heeft de routekop een
     rand gekregen in plaats van de oranje gloed uit het ontwerp. */
  --sh-lift:    0 22px 40px -26px rgba(0, 0, 0, .55);
  --sh-overlay: 0 30px 80px -20px rgba(0, 0, 0, .6);

  /* ── beweging ──────────────────────────────────────────
     Vier curves, allemaal uitdempend. Geen bounce op iets wat informatie
     draagt; --ease-pop bestaat alleen voor het vinkje van een keuzekaart. */
  --ease-uit:    cubic-bezier(.2, .7, .2, 1);
  --ease-snel:   cubic-bezier(.16, .84, .24, 1);
  --ease-odo:    cubic-bezier(.12, .75, .18, 1);
  --ease-pop:    cubic-bezier(.2, .9, .25, 1.25);
  --d-vlug:   160ms;   /* kleurwissel bij hover */
  --d-basis:  260ms;   /* knop, kaart, menu, paginaovergang */
  --d-onthul: 900ms;   /* verschijnen bij het scrollen */
  --d-woord:  820ms;   /* hero-titel per woord, 95ms ertussen */
  --d-odo:    1600ms;  /* kilometerteller */
  --d-krant:  42s;     /* lichtkrant, één lus */
  --d-film:   90s;     /* filmstrip, één lus */

  /* ── stapelvolgorde ────────────────────────────────────
     Gebruik deze namen, nooit losse getallen. */
  --z-kaart-overlay: 2;
  --z-sticky: 50;
  --z-nav: 100;
  --z-rit-hud: 200;
  --z-lade-achtergrond: 500;
  --z-lade: 510;
  --z-lichtbak: 600;
  --z-toast: 700;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-vlug: 0ms; --d-basis: 0ms; --d-onthul: 0ms; --d-woord: 0ms; --d-odo: 0ms;
  }
}

/* ── de gewichtsas vrijgeven ─────────────────────────────
   base.css zet `font-variation-settings: 'wght' 400` op de body. Dat was een
   truc voor Manrope: kleine letters hebben optisch meer gewicht nodig dan
   grote. Maar font-variation-settings erft én wint van font-weight, dus
   stond élke kop op deze site in werkelijkheid op 400 terwijl er 900 in de
   opmaak staat. Je zag het niet meteen, want Archivo op wdth 125 oogt uit
   zichzelf al stevig — maar het was niet de letter die bedoeld was.

   Hier geven we de as terug aan font-weight. De optische correctie voor
   smalle schermen blijft, nu via font-weight zodat koppen hun eigen gewicht
   houden. Deze regels staan niet in base.css en raken het beheer dus niet. */
body { font-variation-settings: normal; font-weight: 400; }
@media (max-width: 560px) { body { font-weight: 440; } }

/* ── overgangsbrug ───────────────────────────────────────
   De pagina's worden één voor één omgezet. Tot dat af is, verwijzen de oude
   namen uit base.css naar de nieuwe waarden, zodat elke nog niet omgezette
   pagina mee verandert in plaats van half oud te blijven staan.

   Deze hele blok verdwijnt bij de opruiming, wanneer elke publieke pagina
   op de nieuwe namen draait. Staat hij er dan nog, dan is er een pagina
   vergeten. */
:root {
  --bg:        var(--asfalt);
  --bg-deep:   var(--asfalt);
  --panel:     var(--asfalt-2);
  --panel-2:   var(--asfalt-3);
  --panel-3:   #0B0B0C;
  --line:      var(--lijn-donker);
  --line-soft: #202023;
  --text:      #F2EEE6;
  --sub:       var(--tekst-donker-body);
  --mut:       var(--tekst-donker-2);
  --dim:       var(--tekst-donker-2);
  --soft:      var(--tekst-donker-body);
  --body:      var(--tekst-donker-body);
  --red:        var(--signaal);
  --red-hover:  var(--signaal-hover);
  --red-bright: var(--signaal-licht);
  --green:      var(--ok-donker);
  --green-soft: #9BD8B7;
  --amber:      var(--wacht);
  --grey:       var(--tekst-donker-2);
  --sans:    var(--sans-nieuw);
  --mono:    var(--mono-nieuw);
}

/* ── papier ──────────────────────────────────────────────
   Een sectie met data-tint="papier" draait de hele kleurenladder om. Omdat
   alles via dezelfde namen loopt, hoeft geen enkele regel verderop te weten
   op welke ondergrond hij staat: koppen, lopende tekst, haarlijnen en
   randen pakken vanzelf de inkt-variant.

   Dat is precies waarom de brug hierboven bestaat. Zonder die namen zou elke
   sectie twee keer opgeschreven moeten worden. */
[data-tint="papier"] {
  background: var(--papier);
  color: var(--inkt);
  --bg:        var(--papier);
  --bg-deep:   var(--papier);
  --panel:     var(--papier-2);
  --panel-2:   var(--papier-3);
  --panel-3:   #EFEAE0;
  --line:      var(--lijn-papier);
  --line-soft: #DCD5C7;
  --text:      var(--inkt);
  --sub:       var(--tekst-papier-body);
  --mut:       var(--tekst-papier-2);
  --dim:       var(--tekst-papier-2);
  --soft:      var(--tekst-papier-body);
  --body:      var(--tekst-papier-body);
  /* Op papier haalt #DB0404 als tekst maar 4,50:1 — net aan, en te krap om
     op te bouwen. Als vlak met witte tekst blijft hij wel #DB0404. */
  --red-bright: var(--signaal-inkt);
  --green:      var(--ok);
  --amber:      #9A5B00;
}