/**
 * Basisstijl (T22): reset, lettertypen (lokaal gehost, CLAUDE.md 2/12 —
 * geen Google Fonts CDN) en toegankelijke focusstijlen. Elk scherm laadt
 * tokens.css vóór dit bestand.
 */

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/baloo2-variable.woff2') format('woff2-variations'), url('/assets/fonts/baloo2-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/figtree-variable.woff2') format('woff2-variations'), url('/assets/fonts/figtree-variable.woff2') format('woff2');
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--kleur-achtergrond);
  color: var(--kleur-inkt);
  font-family: var(--lettertype-basis);
  font-size: var(--tekst-basis);
  line-height: var(--regelhoogte-basis);
}

h1, h2, h3 {
  font-family: var(--lettertype-koppen);
  font-weight: var(--gewicht-vet);
  line-height: var(--regelhoogte-krap);
  margin: 0;
}

h1 { font-size: var(--tekst-2xl); }
h2 { font-size: var(--tekst-xl); margin-bottom: var(--ruimte-4); }
h3 { font-size: var(--tekst-lg); }

p {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--kleur-primair);
}

a:hover {
  color: var(--kleur-primair-donker);
}

/* Zichtbare focus overal, ook voor toetsenbordnavigatie door het hele
   formulier (CLAUDE.md 8 "klaar wanneer"). :focus-visible onderdrukt de
   ring bij een muisklik, maar valt overal terug op :focus in browsers die
   :focus-visible niet kennen. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
  outline: none;
  box-shadow: var(--schaduw-focus);
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  box-shadow: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  box-shadow: var(--schaduw-focus);
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Alleen voor schermlezers: visueel verborgen, blijft in de
   toetsenbord-/voorleesvolgorde (gebruikt door o.a. groepen.php voor
   labels bij tabelvelden die al een zichtbare kolomkop hebben). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}