/* -----------------------------------------------------------------------------
   OVERGENOMEN BESTAND — NIET HIER WIJZIGEN.

   Coen Design System v2.1, bestand base.css?v=2
   Bron:      Jugoo Dash, http://18.157.134.137:8090/css/ds/base.css
   Opgehaald: 2 september 2026

   Moet hier iets veranderen, pas het dan in de bron aan en haal dit bestand
   opnieuw op. Wijzig je het hier, dan is de volgende vergelijking met de bron
   niet meer te lezen.

   Wat het design-system mist, staat in aanvulling.css ernaast.
   ----------------------------------------------------------------------------- */

/* ═══════════════════════════════════════════════════════════════
   Coen Design System — Base (v2)
   Reset + typografie + basisdefaults.
   Laadt NA tokens.css en VÓÓR components.css.
   Bevat geen app-specifieke achtergrond — dat bepaalt de app zelf.
   ═══════════════════════════════════════════════════════════════ */

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

html {
  font-size: var(--fs-md);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Koppen ── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: -.1px;
  color: var(--text-primary);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { color: var(--text-secondary); }

/* ── Links ── */
a {
  color: var(--text-accent);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
a:hover { text-decoration: underline; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ── Lijsten zonder marker als default ── */
ul, ol { list-style: none; }

/* ── Afbeeldingen ── */
img, svg, video { max-width: 100%; display: block; }

/* ── Formulier-resets ── */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: none; }

/* ── Code ── */
code, kbd, pre, samp { font-family: var(--font-mono); font-size: .9em; }

/* ── Material Symbols utilities ── */
.mi      { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; }
.mi-fill { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 20; }
.mi-sm   { font-size: 18px; }
.mi-md   { font-size: 20px; }
.mi-lg   { font-size: 24px; }
.mi-xl   { font-size: 32px; }

/* ── Scrollbars (subtiel) ── */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: var(--border-subtle); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ── Selection ── */
::selection { background: var(--accent-100); color: var(--text-primary); }

/* ── Focus-indicator — consistent voor alle controls ── */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Utility: screenreader-only ── */
.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;
}