/* Alle maten, kleuren en radii van de website ("zacht en rond"). site.css gebruikt alleen deze
   tokens; test_stijl bewaakt dat er niets buiten bestaat. De tintklasse op <body> (tint() in
   routes.py) zet de drie tintkleuren per sitegroep. */
:root {
  --letter-kop: "Instrument Sans", "Figtree", system-ui, sans-serif;
  --letter-tekst: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --f-titel: clamp(36px, 1.6rem + 2.6vw, 54px);
  --f-kop: clamp(28px, 1.2rem + 1.4vw, 36px);
  --f-sub: 22px;
  --f-tekst: 18px;
  --f-klein: 15px;

  --inkt: #12343b;
  --inkt-70: rgba(18, 52, 59, 0.72);
  --donker: #0b4a4e;
  --primair: #01998e;
  --primair-hover: #017f76;
  --wit: #ffffff;
  --lijn: #dfe6e9;
  --rand-veld: #7b878e;
  --goed: #5f9a52;
  --fout: #b71215;

  --tint: #e3f3f0;
  --tint-sterk: #c9e8e2;
  --tint-zacht: #f1f9f7;

  --breed: 1200px;
  --lees: 680px;
  --marge: clamp(20px, 4vw, 32px);
  --gat: 24px;
  --ruimte: clamp(56px, 8vw, 96px);
  --binnen: clamp(32px, 5vw, 64px);

  --r-groot: 28px;
  --r: 18px;
  --r-klein: 10px;
  --r-rond: 999px;
  --t-snel: 150ms ease;
}

/* De afspraakflow en het aanvulformulier lezen als een invulscherm en krijgen overal een stap
   kleiner: het boekingsblok, het overzicht van de afspraak en de paginatitel erboven. */
.boeking, .boekingskeuze {
  --f-sub: 20px;
  --f-tekst: 16px;
  --f-klein: 14px;
  font-size: var(--f-tekst);
}
.pagina:has(.boeking) {
  --f-titel: clamp(30px, 1.3rem + 2vw, 44px);
}

.tint-blauw {
  --tint: #e5eff6;
  --tint-sterk: #cfe2ee;
  --tint-zacht: #f2f7fb;
}

.tint-groen {
  --tint: #e7f1e2;
  --tint-sterk: #d3e7ca;
  --tint-zacht: #f3f8f0;
}