@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url("../fonts/montserrat-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Google Sans Flex";
font-style: normal;
font-weight: 400 500;
font-stretch: 100%;
font-display: swap;
src: url("../fonts/google-sans-flex-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Montserrat Fallback";
src: local("Arial"), local("ArialMT"), local("Liberation Sans");
font-weight: 500;
size-adjust: 114.62%;
ascent-override: 84.45%;
descent-override: 21.90%;
line-gap-override: 0%;
}
@font-face {
font-family: "Montserrat Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
font-weight: 600;
size-adjust: 108.90%;
ascent-override: 88.89%;
descent-override: 23.05%;
line-gap-override: 0%;
}
@font-face {
font-family: "Montserrat Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold");
font-weight: 700;
size-adjust: 110.85%;
ascent-override: 87.33%;
descent-override: 22.64%;
line-gap-override: 0%;
}
@font-face {
font-family: "Google Sans Flex Fallback";
src: local("Arial"), local("ArialMT"), local("Liberation Sans");
font-weight: 400;
size-adjust: 100.45%;
ascent-override: 96.16%;
descent-override: 28.47%;
line-gap-override: 0%;
}
@font-face {
font-family: "Google Sans Flex Fallback";
src: local("Arial"), local("ArialMT"), local("Liberation Sans");
font-weight: 500;
size-adjust: 103.38%;
ascent-override: 93.44%;
descent-override: 27.67%;
line-gap-override: 0%;
}
:root {
--olijf-50:  #F4F5EC;
--olijf-100: #E6E9D3;
--olijf-200: #CDD3A9;
--olijf-300: #AEB87A;
--olijf-400: #869352;
--olijf-500: #606C38;
--olijf-600: #4E5A2C;
--olijf-700: #3E4823;
--bosgroen:  #283618;
--linnen:       #F5EBE0;
--linnen-donker:#E7D7C4;
--wit: #FFFFFF;
--neutraal-50:  #F7F7F3;
--neutraal-100: #EDEEE7;
--neutraal-200: #DCDED3;
--neutraal-300: #C3C6B8;
--neutraal-400: #9DA192;
--neutraal-500: #767A6B;
--neutraal-600: #5A5E50;
--neutraal-700: #43463B;
--neutraal-800: #2D3027;
--neutraal-900: #1A1C16;
--succes-600: #276B2B;  --succes-50: #E8F3E8;
--waarschuwing-600: #8A5A00; --waarschuwing-400: #E0A526; --waarschuwing-50: #FFF4DC;
--fout-600: #B3261E;    --fout-50: #FCEBEA;
--info-600: #1F5F8B;    --info-50: #E7F1F8;
--label-a4: #004B24;
--label-a3: #005C2C;
--label-a2: #006E35;
--label-a1: #00813D;
--label-a:  #00A94F;
--label-b:  #51B848;
--label-c:  #BDD630;
--label-d:  #FFF200;
--label-e:  #FDB913;
--label-f:  #F37021;
--label-g:  #E2231A;
--font-heading: "Montserrat", "Montserrat Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-body: "Google Sans Flex", "Google Sans Flex Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-heading: 600;
--font-weight-button: 600;
--text-display-1: clamp(2.75rem, 2.1rem + 2.667vw, 4.5rem);
--text-display-2: clamp(2.375rem, 1.911rem + 1.905vw, 3.625rem);
--text-h1: clamp(2.125rem, 1.846rem + 1.143vw, 2.875rem);
--text-h2: clamp(1.75rem, 1.564rem + 0.762vw, 2.25rem);
--text-h3: clamp(1.375rem, 1.236rem + 0.571vw, 1.75rem);
--text-h4: clamp(1.1875rem, 1.118rem + 0.286vw, 1.375rem);
--text-body-lg: 1.125rem;
--text-body: 1rem;
--text-body-sm: 0.875rem;
--text-caption: 0.75rem;
--leading-tight: 1.08;
--leading-snug: 1.2;
--leading-body-lg: 1.65;
--leading-body: 1.5;
--tracking-display-1: -0.03em;
--tracking-display: -0.018em;
--tracking-heading: -0.01em;
--tracking-eyebrow: 0.08em;
--measure: 68ch;
--measure-narrow: 48ch;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.5rem;
--space-6: 2rem;
--space-7: 2.5rem;
--space-8: 3rem;
--space-9: 4rem;
--space-10: 5rem;
--space-11: 7rem;
--space-12: 10rem;
--container: 80rem;
--container-narrow: 48rem;
--page-padding: clamp(1.25rem, 0.229rem + 4.19vw, 4rem);
--section-padding: clamp(4rem, 2.886rem + 4.571vw, 7rem);
--section-padding-sm: clamp(3rem, 2.443rem + 2.286vw, 4.5rem);
--gap-split: clamp(2.5rem, 1.571rem + 3.81vw, 5rem);
--gap-grid: clamp(1rem, 0.629rem + 1.524vw, 2rem);
--aside-min: 20rem;
--aside: 26rem;
--radius: 0;
--radius-pill: 0;
--radius-circle: 50%;
--border-width: 1px;
--border-width-strong: 2px;
--shadow-raised: 0 1px 2px rgb(26 28 22 / 0.06), 0 8px 24px rgb(26 28 22 / 0.08);
--opacity-disabled: 0.45;
--tap-target: 2.75rem;
--icon-size: 1.5rem;
--icon-size-sm: 1.25rem;
--duration-fast: 150ms;
--duration: 200ms;
--ease: cubic-bezier(0.2, 0, 0, 1);
--ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--reveal-stap: calc(var(--duration-fast) / 5);
--reveal-volgorde: var(--duration-fast);
--reveal-uitkomst: calc(var(--duration) * 1.5);
--reveal-foto: calc(var(--duration) * 3);
--reveal-scan: calc(var(--duration) * 5);
--reveal-afstand: var(--space-3);
--color-bg: var(--wit);
--color-bg-subtle: var(--neutraal-50);
--color-surface-warm: var(--linnen);
--color-surface-brand: var(--olijf-500);
--color-surface-dark: var(--bosgroen);
--color-text: var(--neutraal-900);
--color-text-muted: var(--neutraal-600);
--color-heading: var(--neutraal-900);
--color-eyebrow: var(--olijf-500);
--color-link: var(--olijf-600);
--color-link-hover: var(--bosgroen);
--color-action: var(--olijf-500);
--color-action-hover: var(--olijf-600);
--color-action-text: var(--wit);
--color-action-secondary: var(--neutraal-900);
--color-border: var(--neutraal-200);
--color-border-strong: var(--neutraal-500);
--color-focus: var(--bosgroen);
--color-placeholder-bg: var(--neutraal-100);
--color-placeholder-fg: var(--neutraal-600);
}
.surface-white {
background-color: var(--wit);
color: var(--color-text);
--color-bg: var(--wit);
--color-text: var(--neutraal-900);
--color-text-muted: var(--neutraal-600);
--color-heading: var(--neutraal-900);
--color-eyebrow: var(--olijf-500);
--color-link: var(--olijf-600);
--color-link-hover: var(--bosgroen);
--color-action: var(--olijf-500);
--color-action-hover: var(--olijf-600);
--color-action-text: var(--wit);
--color-action-secondary: var(--neutraal-900);
--color-border: var(--neutraal-200);
--color-border-strong: var(--neutraal-500);
--color-focus: var(--bosgroen);
--color-placeholder-bg: var(--neutraal-100);
--color-placeholder-fg: var(--neutraal-600);
}
.surface-warm {
background-color: var(--linnen);
color: var(--color-text);
--color-bg: var(--linnen);
--color-border: var(--linnen-donker);
--color-placeholder-bg: var(--linnen-donker);
--color-placeholder-fg: var(--neutraal-700);
}
.surface-brand {
background-color: var(--olijf-500);
color: var(--color-text);
--color-bg: var(--olijf-500);
--color-text: var(--wit);
--color-text-muted: var(--wit);
--color-heading: var(--wit);
--color-eyebrow: var(--wit);
--color-link: var(--wit);
--color-link-hover: var(--wit);
--color-action: var(--wit);
--color-action-hover: var(--neutraal-100);
--color-action-text: var(--neutraal-900);
--color-action-secondary: var(--wit);
--color-border: rgb(255 255 255 / 0.28);
--color-border-strong: var(--wit);
--color-focus: var(--wit);
--color-placeholder-bg: var(--olijf-600);
--color-placeholder-fg: var(--wit);
}
.surface-dark {
background-color: var(--bosgroen);
color: var(--color-text);
--color-bg: var(--bosgroen);
--color-text: var(--wit);
--color-text-muted: var(--neutraal-200);
--color-heading: var(--wit);
--color-eyebrow: var(--wit);
--color-link: var(--wit);
--color-link-hover: var(--wit);
--color-action: var(--wit);
--color-action-hover: var(--neutraal-100);
--color-action-text: var(--neutraal-900);
--color-action-secondary: var(--wit);
--color-border: rgb(255 255 255 / 0.2);
--color-border-strong: var(--olijf-300);
--color-focus: var(--wit);
--color-placeholder-bg: var(--olijf-700);
--color-placeholder-fg: var(--wit);
}