/* Gegenereerd uit merk/tokens.json door tools/tokens-naar-css.py. Niet met de
   hand bewerken: pas tokens.json aan en draai het script opnieuw. */
:root {
  --kleur-grond: #f4ece0;
  --kleur-grond-diep: #ebe0cf;
  --kleur-vlak: #ffffff;
  --kleur-vlak-2: #fbf7f1;
  --kleur-rij: #efe4d5;
  --kleur-tekst: #211812;
  --kleur-tekst-2: #5b4d43;
  --kleur-tekst-3: #7a6b5d;
  --kleur-rand: #e6dac9;
  --kleur-rand-zacht: #efe6d8;
  --kleur-veld-rand: #7a6b5d;
  --kleur-merk: #211812;
  --kleur-op-merk: #f4ece0;
  --kleur-balk: #211812;
  --kleur-op-balk: #f4ece0;
  --kleur-link-op-balk: #dca63f;
  --kleur-focus-op-balk: #dca63f;
  --kleur-actie: #dca63f;
  --kleur-actie-hover: #c8942f;
  --kleur-op-actie: #211812;
  --kleur-link: #7a5310;
  --kleur-focus: #7a5310;
  --kleur-attentie: #c0553a;
  --kleur-attentie-diep: #9c3f28;
  --kleur-gelukt: #4c7a52;
  --kleur-fout: #c0392b;
  --kleur-accent-goud-was: #f4e4c0;
  --kleur-accent-klei-was: #f2ddd2;
  --kleur-accent-mos-was: #e4e9df;
  --kleur-accent-rood-was: #f6dcd8;
  --kleur-glas-vlak: #ffffff85;
  --kleur-glas-vol: #ffffffb3;
  --kleur-glas-rand: #ffffffd1;
  --kleur-glas-paneel: #ffffffa3;
  --kleur-glas-paneel-rand: #21181212;
  --kleur-glas-zacht: #2118120e;
  --kleur-glas-ring: #21181214;
  --kleur-glas-ring-hover: #21181224;
  --kleur-vlek-een: #f6d3bd;
  --kleur-vlek-twee: #dfe3cf;
  --kleur-vlek-drie: #f6e2a9;
  --type-familie-tekst: "Hanken Grotesk", system-ui, sans-serif;
  --type-familie-woordmerk: Fraunces, Georgia, serif;
  --type-gewicht-tekst: 400;
  --type-gewicht-menu: 500;
  --type-gewicht-label: 600;
  --type-gewicht-kop: 650;
  --type-gewicht-nadruk: 700;
  --type-gewicht-woordmerk: 520;
  --type-maat-display: clamp(2.9rem, 1.2rem + 7.6vw, 7.6rem);
  --type-maat-titel: clamp(2.3rem, 1.4rem + 3.6vw, 4.6rem);
  --type-maat-kop-2: clamp(2.2rem, 1.3rem + 3.8vw, 3.7rem);
  --type-maat-inleiding: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  --type-maat-tekst: clamp(1rem, .97rem + .2vw, 1.12rem);
  --type-maat-kaartkop: 17px;
  --type-maat-knop: 16px;
  --type-maat-veld: 16px;
  --type-maat-klein: 14px;
  --type-maat-bijschrift: 12.5px;
  --type-maat-groepslabel: 11.5px;
  --type-regel-kop: 1.06;
  --type-regel-tekst: 1.65;
  --type-regel-ui: 1.3;
  --type-spatie-kop: -0.03em;
  --type-spatie-groepslabel: 0.08em;
  --ruimte-blok-s: 16px;
  --ruimte-blok-m: 20px;
  --ruimte-blok-l: 24px;
  --ruimte-goot: clamp(1.25rem, 4vw, 3.25rem);
  --ruimte-sectie: clamp(2.25rem, 5vw, 3.5rem);
  --ruimte-meet: 66ch;
  --ruimte-breed: 1320px;
  --ruimte-knop: 44px;
  --ruimte-veld: 40px;
  --ruimte-tikdoel: 44px;
  --ruimte-focus-breedte: 2px;
  --ruimte-focus-afstand: 2px;
  --ruimte-focus-gloed: 4px;
  --ruimte-icoon-knop: 16px;
  --ruimte-icoon-nav: 18px;
  --ruimte-icoon-rond: 19px;
  --ruimte-icoon-kaart: 24px;
  --ruimte-ikoonknop: 40px;
  --ruimte-logo-min: 32px;
  --ruimte-merktegel: 48px;
  --radius-pil: 999px;
  --radius-kaart: 24px;
  --radius-paneel: 18px;
  --radius-tegel: 16px;
  --radius-veld: 12px;
  --radius-tip: 10px;
  --motion-curve-uit: cubic-bezier(0.22,1,0.36,1);
  --motion-curve-veer: cubic-bezier(0.34,1.4,0.64,1);
  --motion-duur-druk: 150ms;
  --motion-duur-hover: 200ms;
  --motion-duur-menu: 250ms;
  --motion-duur-kaart: 350ms;
  --motion-duur-lade: 450ms;
  --motion-duur-vouw: 633ms;
  --motion-duur-vullen: 1400ms;
  --motion-verplaatsing-kaart: 4px;
  --motion-verplaatsing-pijl: 3px;
  --motion-schaal-druk: 0.97;
  --motion-duo-schuif-een: 12%;
  --motion-duo-schuif-twee: -62%;
  --motion-duo-kanteling: 2deg;
  --schaduw-glas: inset 0px 1px 0px 0px #ffffffb3, 0px 24px 48px -30px #46321e4d;
  --schaduw-op: 0px 14px 30px 0px #21181221;
  --schaduw-tip: 0px 8px 24px 0px #2118122e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kleur-grond: #1a120c;
    --kleur-grond-diep: #140d08;
    --kleur-vlak: #241811;
    --kleur-vlak-2: #2a1d15;
    --kleur-rij: #2e2017;
    --kleur-tekst: #f4ece0;
    --kleur-tekst-2: #c3b2a2;
    --kleur-tekst-3: #998876;
    --kleur-rand: #3a2a1f;
    --kleur-rand-zacht: #31231a;
    --kleur-veld-rand: #998876;
    --kleur-merk: #f4ece0;
    --kleur-op-merk: #211812;
    --kleur-balk: #0f0a07;
    --kleur-op-balk: #f4ece0;
    --kleur-link-op-balk: #e6b34a;
    --kleur-focus-op-balk: #e6b34a;
    --kleur-actie: #e6b34a;
    --kleur-actie-hover: #f0c060;
    --kleur-op-actie: #211812;
    --kleur-link: #e6b34a;
    --kleur-focus: #e6b34a;
    --kleur-attentie: #d97a5c;
    --kleur-attentie-diep: #e8957a;
    --kleur-gelukt: #6d9a6f;
    --kleur-fout: #e06552;
    --kleur-accent-goud-was: #3b2b14;
    --kleur-accent-klei-was: #3d2219;
    --kleur-accent-mos-was: #22301f;
    --kleur-accent-rood-was: #3e1c17;
    --kleur-glas-vlak: #ffffff09;
    --kleur-glas-vol: #ffffff0f;
    --kleur-glas-rand: #ffffff12;
    --kleur-glas-paneel: #ffffff0a;
    --kleur-glas-paneel-rand: #ffffff0f;
    --kleur-glas-zacht: #ffffff0f;
    --kleur-glas-ring: #c3b2a229;
    --kleur-glas-ring-hover: #c3b2a261;
    --kleur-vlek-een: #3a2416;
    --kleur-vlek-twee: #1f2a1d;
    --kleur-vlek-drie: #33280f;
    --schaduw-glas: 0px 24px 48px -30px #000000b3;
    --schaduw-op: 0px 16px 34px 0px #00000073;
    --schaduw-tip: 0px 8px 24px 0px #00000080;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --kleur-grond: #1a120c;
  --kleur-grond-diep: #140d08;
  --kleur-vlak: #241811;
  --kleur-vlak-2: #2a1d15;
  --kleur-rij: #2e2017;
  --kleur-tekst: #f4ece0;
  --kleur-tekst-2: #c3b2a2;
  --kleur-tekst-3: #998876;
  --kleur-rand: #3a2a1f;
  --kleur-rand-zacht: #31231a;
  --kleur-veld-rand: #998876;
  --kleur-merk: #f4ece0;
  --kleur-op-merk: #211812;
  --kleur-balk: #0f0a07;
  --kleur-op-balk: #f4ece0;
  --kleur-link-op-balk: #e6b34a;
  --kleur-focus-op-balk: #e6b34a;
  --kleur-actie: #e6b34a;
  --kleur-actie-hover: #f0c060;
  --kleur-op-actie: #211812;
  --kleur-link: #e6b34a;
  --kleur-focus: #e6b34a;
  --kleur-attentie: #d97a5c;
  --kleur-attentie-diep: #e8957a;
  --kleur-gelukt: #6d9a6f;
  --kleur-fout: #e06552;
  --kleur-accent-goud-was: #3b2b14;
  --kleur-accent-klei-was: #3d2219;
  --kleur-accent-mos-was: #22301f;
  --kleur-accent-rood-was: #3e1c17;
  --kleur-glas-vlak: #ffffff09;
  --kleur-glas-vol: #ffffff0f;
  --kleur-glas-rand: #ffffff12;
  --kleur-glas-paneel: #ffffff0a;
  --kleur-glas-paneel-rand: #ffffff0f;
  --kleur-glas-zacht: #ffffff0f;
  --kleur-glas-ring: #c3b2a229;
  --kleur-glas-ring-hover: #c3b2a261;
  --kleur-vlek-een: #3a2416;
  --kleur-vlek-twee: #1f2a1d;
  --kleur-vlek-drie: #33280f;
  --schaduw-glas: 0px 24px 48px -30px #000000b3;
  --schaduw-op: 0px 16px 34px 0px #00000073;
  --schaduw-tip: 0px 8px 24px 0px #00000080;
  color-scheme: dark;
}
[data-vlak="licht"] {
  --kleur-grond: #f4ece0;
  --kleur-grond-diep: #ebe0cf;
  --kleur-vlak: #ffffff;
  --kleur-vlak-2: #fbf7f1;
  --kleur-rij: #efe4d5;
  --kleur-tekst: #211812;
  --kleur-tekst-2: #5b4d43;
  --kleur-tekst-3: #7a6b5d;
  --kleur-rand: #e6dac9;
  --kleur-rand-zacht: #efe6d8;
  --kleur-veld-rand: #7a6b5d;
  --kleur-merk: #211812;
  --kleur-op-merk: #f4ece0;
  --kleur-balk: #211812;
  --kleur-op-balk: #f4ece0;
  --kleur-link-op-balk: #dca63f;
  --kleur-focus-op-balk: #dca63f;
  --kleur-actie: #dca63f;
  --kleur-actie-hover: #c8942f;
  --kleur-op-actie: #211812;
  --kleur-link: #7a5310;
  --kleur-focus: #7a5310;
  --kleur-attentie: #c0553a;
  --kleur-attentie-diep: #9c3f28;
  --kleur-gelukt: #4c7a52;
  --kleur-fout: #c0392b;
  --kleur-accent-goud-was: #f4e4c0;
  --kleur-accent-klei-was: #f2ddd2;
  --kleur-accent-mos-was: #e4e9df;
  --kleur-accent-rood-was: #f6dcd8;
  --kleur-glas-vlak: #ffffff85;
  --kleur-glas-vol: #ffffffb3;
  --kleur-glas-rand: #ffffffd1;
  --kleur-glas-paneel: #ffffffa3;
  --kleur-glas-paneel-rand: #21181212;
  --kleur-glas-zacht: #2118120e;
  --kleur-glas-ring: #21181214;
  --kleur-glas-ring-hover: #21181224;
  --kleur-vlek-een: #f6d3bd;
  --kleur-vlek-twee: #dfe3cf;
  --kleur-vlek-drie: #f6e2a9;
  --schaduw-glas: inset 0px 1px 0px 0px #ffffffb3, 0px 24px 48px -30px #46321e4d;
  --schaduw-op: 0px 14px 30px 0px #21181221;
  --schaduw-tip: 0px 8px 24px 0px #2118122e;
  color-scheme: light;
}