/* ─────────────────────────────────────────────────────────────────────────
   VP Service, centrale huisstijl-tokens (single source of truth, marketingsite).
   Wijzig kleuren/fonts HIER; alle pagina's laden dit bestand, dus een wijziging
   werkt overal door. Houd dit in sync met de app (globals.css) en CLAUDE.md §7.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  --ink:    #1b2a28;
  --teal:   #1e4a43;   /* pine (primair) */
  --teal2:  #2c6a5e;   /* lichter pine (accent/hover; factuur-PDF-accent) */
  --teal3:  #153630;   /* pine-deep */
  /* Primaire-knop-kleur. ÉÉN centrale plek: alle primaire knoppen (.btn-primary,
     .btn-nav, .btn-pricing-primary, .form-submit, .verify-form button, mobiele CTA)
     verwijzen hiernaar. Los van --teal zodat knoppen lichter kunnen zijn dan het
     donkere pine. In sync houden met de app (globals.css --btn). */
  --btn:       #35796b;
  --btn-hover: #2c6a5e;
  --slate:  #34433f;
  --cream:  #f1f4f2;
  --warm:   #e4eae7;
  --gold:   #9a7736;   /* brons (accent) */
  --muted:  #5c6b66;
  --light:  #c7d2cd;
  --pine-light: #7fa79b; /* "Service"/logo op donkere achtergrond */
  --white:  #fbfcfb;
  --red:    #C0392B;
  /* huisstijl-aliassen (zelfde waarden, sprekende namen) */
  --pine:      #1e4a43;
  --pine-deep: #153630;
  --brass:       #9a7736;
  /* Brons als knopvulling. Het merkbrons zelf haalt met witte tekst maar 4,15
     contrast; WCAG AA vraagt 4,5 voor normale tekst. Deze tint haalt 5,02 en
     blijft herkenbaar brons. Alleen voor gevulde knoppen, niet voor accenten. */
  --brass-btn:       #8a6a30;
  --brass-btn-hover: #7d5f2b;
  --brass-light: #d8b06a;
  --line:   #d6ded9;
  --card:   #fbfcfb;
  --paper:  #f1f4f2;
  --mint:   #dbe7e2;   /* subtiele pine-tint (intern-vs-extern Variant B) */
  --serif:  'Spectral', Georgia, serif;
  --sans:   'Inter', system-ui, sans-serif;
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Typografische ladder ────────────────────────────────────────────────
     Elke tekstmaat op de site komt hieruit. Vóór deze ladder stonden er 26
     verschillende groottes op de homepage, waarvan zes kaarttitels met exact
     dezelfde betekenis op 13, 15, 15, 16, 17 en 13px. Dat is wat "onrustig"
     veroorzaakt. Past iets niet in de ladder, dan hoort het er niet: kies een
     bestaande rung in plaats van een nieuwe waarde te typen.

     Twee harde regels die hierbij horen:
     1. HOOFDLETTERS alleen voor het sectielabel (.section-tag, --fs-label).
        Al het andere in gewone zinsvorm; 23 losse caps-blokken trokken de
        aandacht naar niets in het bijzonder en lezen bovendien trager (B1).
     2. CURSIEF in een kop markeert een tegenstelling ("De wet verplicht het.
        Wij maken het eenvoudig."). Zit die er niet in, dan geen cursief. */
  --fs-label:   10px;                     /* sectielabel, het enige element in hoofdletters */
  --fs-caption: 13px;                     /* bijschrift, meta, badge, kleine noot */
  --fs-card:    15px;                     /* tekst in kaarten, navigatie, knoppen */
  --fs-body:    16px;                     /* lopende tekst en intro */
  --fs-title:   17px;                     /* kaarttitel */
  --fs-h3:      24px;                     /* serif tussenkop, en cijfers in een compacte kaart */
  --fs-num:     34px;                     /* bedrag, stapnummer, statistiek */
  --fs-h2:      clamp(30px, 4vw, 40px);   /* sectiekop */
  --fs-h1:      clamp(36px, 5.2vw, 54px); /* hero, één per pagina */

  /* Tekstgewichten. Er waren er vier in gebruik (300, 500, 600, 700) zonder regel
     wanneer welk; dat is de "wel of niet dikgedrukt"-onrust. Nu drie:
     lopende tekst, de serif-koppen, en nadruk. Gewicht 300 is vervallen, dat las
     slecht op een lichte achtergrond en botste met de rest van de body. */
  --fw-body:   400;   /* lopende tekst */
  --fw-medium: 500;   /* Spectral-koppen en de navigatie */
  --fw-bold:   600;   /* labels, kaarttitels, knoppen, strong */

  /* Iconen zijn beeld, geen tekst, en staan daarom bewust buiten de ladder. */
  --icon-sm: 20px;
  --icon-md: 24px;
}