/* ── Lab21 — ALLEEN het lettertype ───────────────────────────────────
 * Voor de losse pagina's die (bewust) niet de hele brand-shell laden maar wél
 * in het huislettertype horen te staan.
 *
 * ⚠️ Waarom dit bestand bestaat (klikronde 07-09-2026). Elf pagina's laadden
 * `shared/lab21-shell.js` niet en zetten in hun eigen <style> een
 * `body { font: 15px/1.5 -apple-system, … }`. Die stapel begint bij het
 * SYSTEEM-lettertype, dus die pagina's stonden in Segoe UI/Arial terwijl de
 * rest van de organisatie Inter is — op de zeven atelier-configurators samen
 * ruim 1.100 stukken tekst. Aan de code zie je dat niet: er faalt niets, en
 * een `font`-shorthand oogt onschuldig. Alleen een meting van het ECHT
 * gebruikte lettertype vindt het.
 *
 * Dit bestand doet met opzet NIETS anders dan het lettertype: geen kleuren,
 * geen maten, geen balk. De rest van de huisstijl op die pagina's is een
 * ontwerpkeuze en geen defect — die ligt bij Victor.
 *
 * `!important` omdat de pagina zijn eigen `body { font: … }` in een inline
 * <style> zet: gelijke specificiteit, en de volgorde is niet gegarandeerd. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/shared/fonts/inter-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html,
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Helvetica Neue", ui-sans-serif, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Een knop erft `font-family` NIET vanzelf — de browser geeft elk
 * formulier-element zijn eigen standaardlettertype. Zonder deze regel staat de
 * knop in Arial terwijl de tekst eromheen Inter is. */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Ook de losse pagina's zonder brand-shell moeten op een aanraakscherm met
 * een vinger bedienbaar blijven. Inline tekstlinks negeren min-maten; losse
 * knop-/flexlinks krijgen ze wel. */
@media (pointer: coarse) {
  button,
  summary,
  [role="button"],
  select,
  textarea,
  input:not([type="hidden"]),
  a {
    min-height: 44px;
    min-width: 44px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 44px;
    height: 44px;
  }
}