/* CaveHosting — merktokens die de MARKETINGSITE deelt met het paneel.
 *
 * WAAROM DIT BESTAAT (23 augustus 2026). De merkkleuren stonden op vier plekken:
 * `panel/static/css/merk.css` (de paneelbron), `website/css/style.css`,
 * `website/coming-soon.html` en `website/js/main.js`. Allemaal dezelfde waarden, geen
 * enkele koppeling. Wijzigt de merkkleur, dan volgt het paneel wel en de site niet —
 * stil, want er gaat niets stuk. Precies de "twee bronnen lopen uiteen"-faalvorm die
 * AGENTS.md overal elders verbiedt.
 *
 * Gemeten die dag: vier hexwaarden komen in beide voor (het TODO-punt zei "de ENIGE
 * gedeelde kleur" — dat was er één, het zijn er vier):
 *
 *     #5B8CFF   paneel --ch-paars     = site --accent
 *     #9CC0FF   paneel --ch-paars-l   = site --accent-l
 *     #7DD3FC   paneel --ch-cyaan     = site --cyan-l
 *     #38BDF8   paneel --cyan         = site --cyan
 *
 * WAAROM DE SITE NIET GEWOON merk.css LAADT. `cavehosting.com` en
 * `panel.cavehosting.com` zijn aparte hosts en er is geen `location /static` in de
 * site-config — gemeten. Let op de val: een curl naar
 * `https://cavehosting.com/static/css/merk.css` geeft HTTP 200, maar met
 * `content-type: text/html` en nul treffers op `ch-paars`; een pad dat zeker niet
 * bestaat geeft óók 200. De statuscode bewijst hier niets, alleen de inhoud.
 * De site van het klantpaneel laten afhangen zou bovendien betekenen dat de
 * verkooppagina onleesbaar wordt zodra het paneel plat ligt.
 *
 * BENCHMARK (gelezen 23 augustus 2026, officiële bronnen). De W3C Design Tokens
 * Community Group (w3.org/community/design-tokens/, spec stabiel sinds oktober 2025),
 * GitHub Primer (primer.style/product/primitives/token-names/) en Adobe Spectrum
 * (spectrum.adobe.com/page/design-tokens/) werken alle drie met één tokenbron die
 * platformcode GENEREERT. Dat vraagt een buildstap.
 * WAT WIJ BEWUST ANDERS DOEN: `website/` heeft geen buildstap (AGENTS.md) en krijgt er
 * hier ook geen. MDN en de CSS-spec (developer.mozilla.org/en-US/docs/Web/CSS/--*,
 * w3.org/TR/css-variables-1/) laten zien dat custom properties in een gedeeld
 * stylesheet dit zonder enige tooling doen. Wij nemen dus het IDEE over (één bron) en
 * niet de machinerie.
 *
 * WAAROM <link> EN GEEN @import. web.dev en MDN zijn eenduidig: `@import` introduceert
 * een extra round trip omdat het bestand pas wordt ontdekt nadat de eerste CSS is
 * opgehaald en geparsed (web.dev/learn/performance/optimize-resource-loading,
 * developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@import). De HTML laadt
 * dit bestand dus met een eigen `<link>`.
 *
 * WAAROM DE FALLBACKS BLIJVEN STAAN in de var()-aanroepen elders. De CSS-spec
 * (w3.org/TR/css-variables-1/) zegt dat een `var()` naar een ongedefinieerde property
 * ZONDER fallback de regel "invalid at computed-value time" maakt — de styling valt dan
 * gewoon weg. Laadt dit bestand ooit niet, dan houdt de fallback de site heel.
 * Volgorde maakt niet uit: substitutie gebeurt op computed-value time, niet bij het
 * parsen. Dit bestand mag dus vóór of ná style.css staan.
 *
 * DE BORGING. `preflight.check_merktokens_een_bron` vergelijkt de waarden hieronder met
 * `panel/static/css/merk.css` en maakt de gate rood zodra ze uiteenlopen — óók als er
 * een VIJFDE gedeelde kleur bijkomt die hier niet staat. Zonder die check is dit
 * bestand alleen een nettere kopie, en dat lost niets op.
 *
 * WIJZIG JE EEN KLEUR? Doe het in `panel/static/css/merk.css` en neem hem hier over;
 * de check bewaakt dat je het tweede deel niet vergeet. Klantsites vallen hier BUITEN:
 * die dragen hun eigen merk (gemeten: nul eigen accent-tokens, dus geen overlap).
 */
:root {
  /* Merkaccent — gelijk aan --ch-paars in het paneel. */
  --accent:   #5B8CFF;
  --accent-l: #9CC0FF;

  /* WIT OP HET ACCENT HAALT GEEN WCAG AA — daarom dit diepere token (25 aug 2026).
     Gemeten met Lighthouse op de LIVE site: elke primaire knop (`a.btn`,
     `a.btn-primary`) haalt 3,16:1 met witte tekst, waar AA 4,5:1 eist. Dat is geen
     nieuwe ontdekking: het paneel loste dit op 19 juli 2026 al zo op, met
     `--ch-knop:#3D6BD6` (4,92:1 met wit). Die fix is toen NIET naar de marketingsite
     gekomen — dezelfde blinde vlek als de emoji-checks, die ook alleen `panel/` lezen.

     DE MERKKLEUR ZELF BLIJFT ONGEMOEID. `AGENTS.md` is daar expliciet over: verander
     niet het merk maar voeg een token toe dat ALLEEN achtergrond-onder-witte-tekst is.
     Randen, iconen en tekstkleuren houden `--accent`; als tekst op donker haalt die
     namelijk prima 5,8:1. Het faalt op precies één combinatie. */
  --accent-knop: #3D6BD6;

  /* RAM-tier-markering op de pakketkaarten (25 aug 2026). Dit waren kleur-emoji
     (blauw/paars/geel/rood vierkantje); nu CSS-stippen. Tokens en geen kale hex in
     style.css, want de kleurdrift-ratel telt losse hexwaarden — en terecht: een
     tier-kleur is een besluit dat op één plek hoort te leven. */
  --stip-blauw: #5B8CFF;   /* = --ch-paars  */
  --stip-cyaan: #7DD3FC;   /* = --ch-cyaan  */
  --stip-geel:  #e0a83f;   /* = --geel      */
  --stip-rood:  #F0594F;   /* = --rood      */

  /* Cyaan-familie — gelijk aan --cyan en --ch-cyaan in het paneel. */
  --cyan:     #38BDF8;
  --cyan-l:   #7DD3FC;
}