/* Tokens: alle waarden van het ontwerp staan hier. */
@font-face {
	font-family: "Audiowide";
	src: url("../fonts/audiowide.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	ascent-override: 98.97%;
	descent-override: 28.52%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	ascent-override: 96.88%;
	descent-override: 24.12%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/space-grotesk.woff2") format("woff2");
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
	ascent-override: 98.4%;
	descent-override: 29.2%;
	line-gap-override: 0%;
}

/* Sleuteltokens van het ontwerp. Maten komen van de preview-site (container 1372, sectie 120, kolommen 32). */
:root {
	/* Kleur */
	--color-heading: #232c33;
	--color-text: #656565;
	--color-text-soft: #767676;
	--color-text-faint: #e0e0e0;
	--color-brand: #4986d5;
	--color-action: #2f6cbf;
	--color-action-hover: #232c33;
	--color-on-dark-accent: #8db6ee;
	--color-bg: #f2f2f2;
	--color-surface: #fff;
	--color-line: rgb(113 113 113 / 15%);
	--color-line-strong: rgb(113 113 113 / 31%);
	--color-divider: rgb(35 44 51 / 25%);
	--color-dark: #232c33;
	--color-dark-text: #dfe4e8;
	--color-focus: #2f6cbf;
	--color-error: #b42318;
	--color-success: #0f7a3d;

	/* Lettertypes */
	--font-heading: "Audiowide", "Arial Black", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-eyebrow: "Space Grotesk", "Inter", system-ui, sans-serif;

	/* Tekst */
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-tiny: 0.75rem;
	--fs-h1: clamp(2rem, 4.64vw, 3.7125rem);
	--fs-h1-long: clamp(1.85rem, 3.7vw, 3.1rem);
	--fs-h2: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
	--fs-h3: 1.375rem;
	--fs-h4: 1.125rem;
	--fs-h5: 1rem;
	--lh-body: 1.4;
	--lh-heading: 1.2;

	/* Ruimte */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--section-y: 7.5rem;
	--section-y-md: 4.375rem;
	--section-y-sm: 3.125rem;
	--gutter: 1.875rem;
	--gutter-sm: 1.25rem;
	--container: 85.75rem;
	--col-gap: 2rem;

	/* Vorm: het ontwerp is vlak, zonder afronding */
	--radius: 0;
	--radius-pill: 999px;
	--border: 1px solid var(--color-line);
	--shadow: 0 8px 28px rgb(35 44 51 / 12%);

	/* Knoppen */
	--btn-fs: 0.875rem;
	--btn-py: 1.25rem;
	--btn-px: 2.5rem;
	--btn-outline-py: 0.875rem;
	--btn-outline-px: 1.5rem;
	--touch-min: 3rem;

	/* Beweging */
	--dur: 300ms;
	--dur-slow: 600ms;
	--dur-image: 1000ms;
	--ease: ease-in-out;

	/* Header */
	--header-pad: 2.5rem;
	--z-header: 50;
	--z-menu: 60;
	--bp-menu: 1119px;
}

@media (max-width: 767px) {
	:root {
		--gutter: var(--gutter-sm);
		--header-pad: 1.25rem;
	}
}