/* Nwerkt — huisstijlvariabelen. Gegenereerd door tools/bouw_tokens.py uit tokens.json; niet met de hand wijzigen. */
@import url('../fonts/fonts.css');

:root {
  --nw-wit: #F7F5F0;
  --nw-wit-puur: #FFFFFF;
  --nw-antraciet: #2A2926;
  --nw-oranje: #E4572E;
  --nw-oranje-donker: #B8401C;
  --nw-oranje-diep: #9E3616;
  --nw-perzik: #F3DCCF;
  --nw-steen: #EDE9E1;
  --nw-lijn: #E3DED4;
  --nw-antraciet-zacht: #5A5750;
  --nw-succes: #2E6B4F;
  --nw-succes-vlak: #E3EFE7;
  --nw-fout: #B3261E;
  --nw-fout-vlak: #F8E1DE;
  --nw-let-op: #E9B949;
  --nw-let-op-tekst: #7A5300;
  --nw-let-op-vlak: #FBF0D4;
  --nw-uit: #8C877D;
  --nw-donker-vlak: #34332F;
  --nw-donker-lijn: #46443F;
  --nw-donker-tekst-zacht: #C9C4BA;
  --nw-donker-oranje: #F07A55;
  --nw-donker-succes: #7CC4A0;
  --nw-donker-fout: #F28B82;
  --nw-donker-let-op: #F2C66D;
  --nw-font-kop: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --nw-font-tekst: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --nw-fs-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --nw-fs-h2: clamp(2rem, 1.5rem + 2vw, 3rem);
  --nw-fs-h3: 1.5rem;
  --nw-fs-h4: 1.25rem;
  --nw-fs-tekst: 1.0625rem;
  --nw-fs-klein: 0.9375rem;
  --nw-fs-label: 0.8125rem;
  --nw-lh-kop: 1.1;
  --nw-lh-tekst: 1.6;
  --nw-ruimte-1: 4px;
  --nw-ruimte-2: 8px;
  --nw-ruimte-3: 12px;
  --nw-ruimte-4: 16px;
  --nw-ruimte-5: 24px;
  --nw-ruimte-6: 32px;
  --nw-ruimte-7: 48px;
  --nw-ruimte-8: 64px;
  --nw-rond-s: 4px;
  --nw-rond-m: 8px;
  --nw-rond-l: 16px;
  --nw-rond-rond: 999px;
  --nw-schaduw-s: 0 1px 2px rgba(42, 41, 38, 0.08);
  --nw-schaduw-m: 0 4px 16px rgba(42, 41, 38, 0.10);
  --nw-achtergrond: var(--nw-wit);
  --nw-vlak: var(--nw-wit-puur);
  --nw-vlak-2: var(--nw-steen);
  --nw-tekst-kleur: var(--nw-antraciet);
  --nw-tekst-zacht: var(--nw-antraciet-zacht);
  --nw-rand: var(--nw-lijn);
  --nw-accent: var(--nw-oranje);
  --nw-accent-tekst: var(--nw-oranje-donker);
  --nw-knop: var(--nw-oranje-donker);
  --nw-knop-tekst: var(--nw-wit-puur);
  --nw-succes-tekst: var(--nw-succes);
  --nw-fout-tekst: var(--nw-fout);
  --nw-let-op-kleur: var(--nw-let-op-tekst);
}

[data-thema="donker"] {
  --nw-achtergrond: var(--nw-antraciet);
  --nw-vlak: var(--nw-donker-vlak);
  --nw-vlak-2: var(--nw-donker-vlak);
  --nw-tekst-kleur: var(--nw-wit);
  --nw-tekst-zacht: var(--nw-donker-tekst-zacht);
  --nw-rand: var(--nw-donker-lijn);
  --nw-accent: var(--nw-oranje);
  --nw-accent-tekst: var(--nw-donker-oranje);
  --nw-knop: var(--nw-oranje-donker);
  --nw-knop-tekst: var(--nw-wit-puur);
  --nw-succes-tekst: var(--nw-donker-succes);
  --nw-fout-tekst: var(--nw-donker-fout);
  --nw-let-op-kleur: var(--nw-donker-let-op);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  [data-thema="auto"] {
    --nw-achtergrond: var(--nw-antraciet);
    --nw-vlak: var(--nw-donker-vlak);
    --nw-vlak-2: var(--nw-donker-vlak);
    --nw-tekst-kleur: var(--nw-wit);
    --nw-tekst-zacht: var(--nw-donker-tekst-zacht);
    --nw-rand: var(--nw-donker-lijn);
    --nw-accent: var(--nw-oranje);
    --nw-accent-tekst: var(--nw-donker-oranje);
    --nw-knop: var(--nw-oranje-donker);
    --nw-knop-tekst: var(--nw-wit-puur);
    --nw-succes-tekst: var(--nw-donker-succes);
    --nw-fout-tekst: var(--nw-donker-fout);
    --nw-let-op-kleur: var(--nw-donker-let-op);
    color-scheme: dark;
  }
}