/* ============================================================
   OMMETOER — TYPE-SCALE  (single source of truth)
   ------------------------------------------------------------
   Wijzig je een maat hier, dan verandert ze OVERAL waar
   var(--t-…) wordt gebruikt. Gebruik nooit losse vw-getallen
   voor koppen of bodytekst — gebruik deze tokens.

   • vw  = de exacte maat op normale schermen (referentie ~1280px)
   • clamp(min, vw, max) = vangnet zodat tekst niet onleesbaar
     klein wordt op tablet, of reusachtig op grote schermen
   • ≤760px schakelt naar de mobiele maat

   ROLLEN
   --t-hero     paginatitel / hero-H1
   --t-title    sectiekoppen  → "titelgrootte"
   --t-sub      subkoppen / kaarttitels
   --t-body     lopende tekst → "bodygrootte"
   --t-eyebrow  labels / eyebrows (kapitaal)
   ============================================================ */
:root{
  /* ---- font-sizes ---- */
  --t-hero:    clamp(30px, 3.6vw, 86px);
  --t-title:   clamp(24px, 2.72vw, 60px);
  --t-sub:     clamp(18px, 1.7vw, 30px);
  --t-body:    clamp(15px, 1.10vw, 19px);
  --t-eyebrow: clamp(11px, 0.82vw, 14px);

  /* ---- regelafstand (uniform per rol) ---- */
  --lh-hero:    1.05;
  --lh-title:   1.1;
  --lh-sub:     1.2;
  --lh-body:    1.55;
  --lh-eyebrow: 1.2;

  /* ---- letterafstand (uniform per rol) ---- */
  --ls-hero:    -0.02em;
  --ls-title:   -0.02em;
  --ls-sub:     -0.02em;
  --ls-body:    -0.01em;
  --ls-eyebrow:  0.08em;

  /* ---- horizontale paginamarge (links/rechts) ----
     Eén gutter voor de hele site. clamp = vangnet op heel
     smal/breed. --pad is een alias zodat de homepage/salespages
     (die var(--pad) gebruiken) automatisch meeschuiven. */
  --gutter: clamp(22px, 9.375vw, 180px);
  --pad:    var(--gutter);
}

@media(max-width:760px){
  :root{
    --t-hero:    7.2vw;
    --t-title:   7.5vw;
    --t-sub:     5vw;
    --t-body:    3.6vw;
    --t-eyebrow: 3.2vw;
  }
}