/* Kleuren, letters en maten uit het ontwerpsysteem van de app (src/thema.ts). */
@font-face { font-family: "Instrument Serif"; src: url("letters/InstrumentSerif_400Regular.ttf"); font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("letters/InstrumentSans_400Regular.ttf"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("letters/InstrumentSans_600SemiBold.ttf"); font-weight: 600; font-display: swap; }

:root {
  --ondergrond: #F6F2EB; --kaart: #FFFCF7; --tekst: #2A2622;
  --stil: #6E655B; --accent: #8A4A32; --lijnen: #DED5C8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ondergrond: #1E1B18; --kaart: #2A2622; --tekst: #F2ECE3;
    --stil: #B4AA9D; --accent: #D08A6C; --lijnen: #3D3732;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ondergrond); color: var(--tekst);
  font: 17px/1.5 "Instrument Sans", -apple-system, sans-serif;
}
main { max-width: 640px; margin: 0 auto; padding: 48px 24px 32px; }
h1, h2 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; line-height: 1.2; }
h1 { font-size: 44px; margin: 0 0 24px; }
h2 { font-size: 28px; margin: 40px 0 8px; }
p, ul { margin: 0 0 16px; }
ul { padding-left: 20px; }
li { margin-bottom: 8px; }
strong { font-weight: 600; }
a { color: var(--accent); }
.groot { font-size: 22px; color: var(--stil); }
.icoon { border-radius: 22px; margin-bottom: 24px; }
footer {
  max-width: 640px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--lijnen);
  color: var(--stil); font-size: 15px;
}
footer a { color: var(--stil); }