/* BLOK — generated from tokens.json */

:root, [data-theme="licht"] {
  --surface: #F2F2F0;
  --surface-raised: #FAFAF8;
  --surface-sunken: #E8E8E5;
  --line: #D6D6D2;
  --line-strong: #8C8C86;
  --ink: #252523;
  --ink-muted: #5C5C58;
  --on-ink: #F2F2F0;
  --focus: var(--ink);
  --antraciet: #252523;
  --licht: #F2F2F0;
  --zalm: #E38876;
  --on-zalm: #252523;
  --olijf: #6E7340;
  --on-olijf: #F2F2F0;
  --petrol: #456E7E;
  --on-petrol: #F2F2F0;
  --oker: #A47D2C;
  --on-oker: #252523;
  --mos: #55684F;
  --on-mos: #F2F2F0;
  --bordeaux: #7A3A3A;
  --on-bordeaux: #F2F2F0;
  --salie: #9DB896;
  --hemel: #93AECF;
  --boter: #E5C47A;
  --lavendel: #AE9FD2;
  --on-pastel: #252523;
  --fout: #B3261E;
  --ok: var(--mos);
}
[data-theme="antraciet"] {
  --surface: #252523;
  --surface-raised: #2E2E2B;
  --surface-sunken: #1D1D1B;
  --line: #3D3D3A;
  --line-strong: #7A7A74;
  --ink: #F2F2F0;
  --ink-muted: #B8B8B2;
  --on-ink: #252523;
  --focus: var(--ink);
  --fout: #F2B8B5;
  --ok: var(--salie);
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  --radius-s: 4px;
  --radius-m: 12px;
  --radius-l: 24px;
  --radius-blok: 14.58%;
  --breedte-pagina: 1200px;
  --breedte-tekst: 65ch;
  --font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
.display { font-family: var(--font-sans); font-size: 96px; line-height: 88px; font-weight: 800; letter-spacing: -0.03em; }
.titel-1 { font-family: var(--font-sans); font-size: 56px; line-height: 56px; font-weight: 800; letter-spacing: -0.025em; }
.titel-2 { font-family: var(--font-sans); font-size: 36px; line-height: 40px; font-weight: 800; letter-spacing: -0.02em; }
.titel-3 { font-family: var(--font-sans); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
.intro { font-family: var(--font-sans); font-size: 20px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 17px; line-height: 27px; font-weight: 400; }
.body-sterk { font-family: var(--font-sans); font-size: 17px; line-height: 27px; font-weight: 600; }
.klein { font-family: var(--font-sans); font-size: 14px; line-height: 21px; font-weight: 400; }
.label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.data { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; }
.prijs { font-family: var(--font-mono); font-size: 18px; line-height: 24px; font-weight: 500; letter-spacing: 0; }