/* ─── Jtro huisstijl: tokens ──────────────────────────────────────────
   Alle kleuren, lettertypen en maten van de nieuwe site staan hier.
   Bron: jtro.nl en het logo (november 2026). Komt het officiële
   huisstijlmateriaal van Jtro, dan pas je alleen dit bestand aan.
   Uitleg in gewone woorden: docs/huisstijl.md. */

/* Lettertypen: lokaal, geen Google Fonts (AVG) */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Kleuren uit het logo en jtro.nl ─────────────────────────── */
  --jtro-blauw:   #005B82;  /* hoofdkleur: knoppen, koppen, links (jtro.nl; logo #00577D) */
  --jtro-diep:    #003552;  /* donker water: donkere vlakken, footer */
  --jtro-nacht:   #0D1321;  /* bijna zwart van jtro.nl */
  --jtro-inkt:    #1D1D1B;  /* zwart van het logo */
  --jtro-water:   #71A7BC;  /* lichte golflijn in het logo, alleen decoratief */
  --jtro-lucht:   #6EC1E4;  /* lichtblauw van jtro.nl: alleen op donker of decoratief */
  --jtro-groen:   #007B58;  /* groen accent van jtro.nl (Kloeke mannen) */
  --jtro-mint:    #09BC8A;  /* lichtgroen van jtro.nl, alleen op donker */
  --jtro-papier:  #FFFFFC;  /* achtergrond van jtro.nl */
  --jtro-nevel:   #EFF7FD;  /* lichtblauwe band van jtro.nl */

  /* ── Rollen (gebruik deze in de pagina's) ─────────────────────── */
  --kleur-achtergrond:   var(--jtro-papier);
  --kleur-vlak:          var(--jtro-nevel);
  --kleur-donker:        var(--jtro-diep);
  --kleur-tekst:         #2E3236;  /* 12,7:1 op papier */
  --kleur-tekst-zacht:   #5A6066;  /* 6,3:1 op papier */
  --kleur-kop:           var(--jtro-inkt);
  --kleur-accent:        var(--jtro-blauw);   /* 7,4:1 op papier */
  --kleur-accent-2:      var(--jtro-groen);   /* 5,3:1 op papier */
  --kleur-op-donker:     #E8F1F6;             /* 11:1 op diep */
  --kleur-op-donker-zacht: #A9C8D8;           /* 6,6:1 op diep */
  --kleur-lijn:          #D5E1E8;
  --kleur-lijn-donker:   rgba(110, 193, 228, .35);

  /* ── Typografie ───────────────────────────────────────────────── */
  --font-kop:   "Montserrat", "Segoe UI", system-ui, sans-serif;
  --font-tekst: "Roboto", "Segoe UI", system-ui, sans-serif;

  /* Vloeiende schaal: van telefoon (375px) naar desktop (1280px) */
  --tekst-klein: .875rem;
  --tekst-basis: 1.0625rem;
  --tekst-lead:  clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  --kop-4:       clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --kop-3:       clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  --kop-2:       clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  --kop-1:       clamp(2.375rem, 1.6rem + 3.4vw, 4.75rem);

  --regel-kop:   1.08;
  --regel-tekst: 1.65;
  --spatie-kop:  -.02em;   /* letterafstand grote koppen */
  --spatie-label: .14em;   /* letterafstand kleine kapitalen-labels */

  /* ── Ruimte (ritme op basis van 8px) ──────────────────────────── */
  --r-1: .5rem;
  --r-2: 1rem;
  --r-3: 1.5rem;
  --r-4: 2rem;
  --r-5: 3rem;
  --r-6: clamp(3rem, 2rem + 4vw, 6rem);    /* tussen secties */
  --r-7: clamp(4rem, 2.5rem + 6vw, 9rem);  /* grote adem */

  --breedte-max:   1200px;
  --breedte-tekst: 38rem;   /* prettige regellengte, ca. 68 tekens */
  --zijmarge:      clamp(1rem, .5rem + 3vw, 3rem);

  /* ── Details ──────────────────────────────────────────────────── */
  --hoek:        2px;       /* bijna recht: nuchter */
  --lijn-dun:    1px;
  --overgang:    .25s cubic-bezier(.2, .7, .2, 1);
}