/* Formulieren: eigen huisstijl. Salie papier, groen-zwarte inkt, kobalt als actiekleur. */
@font-face {
  font-family: "Bricolage";
  src: url("/static/fonts/bricolage.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  --papier: #EEF1EC;
  --vel: #FFFFFF;
  --inkt: #15271F;
  --mos: #5B6F64;
  --lijn: #CDD5CE;
  --lijn-zacht: #E2E7E2;
  --kobalt: #2747E0;
  --kobalt-diep: #1B34B0;
  --kobalt-zacht: #E3E8FC;
  --op-kobalt: #FFFFFF;
  --rood: #B93A26;
  --rood-zacht: #F7E3DE;
  --amber: #A9760B;
  --amber-zacht: #F7EDD3;
  --groen: #2A7A50;
  --groen-zacht: #DDEFE4;
  --focus: 0 0 0 3px color-mix(in srgb, var(--kobalt) 35%, transparent);
  --letter: "Bricolage", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #0F1C17; --vel: #17271F; --inkt: #E6ECE6; --mos: #9DB0A5; --lijn: #2C3E35; --lijn-zacht: #213229;
    --kobalt: #7D93FF; --kobalt-diep: #A3B3FF; --kobalt-zacht: #1D2A5C; --op-kobalt: #0B1440;
    --rood: #F08C78; --rood-zacht: #3A1D17; --amber: #E7B64A; --amber-zacht: #33270C; --groen: #6BCB95; --groen-zacht: #12301F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #0F1C17; --vel: #17271F; --inkt: #E6ECE6; --mos: #9DB0A5; --lijn: #2C3E35; --lijn-zacht: #213229;
  --kobalt: #7D93FF; --kobalt-diep: #A3B3FF; --kobalt-zacht: #1D2A5C; --op-kobalt: #0B1440;
  --rood: #F08C78; --rood-zacht: #3A1D17; --amber: #E7B64A; --amber-zacht: #33270C; --groen: #6BCB95; --groen-zacht: #12301F;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--letter);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--kobalt); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--kobalt); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}