/*
 * EBA Construct design tokens. The single source for colours, type and
 * spacing; theme.json holds the same palette for the editor.
 * Do not add colours here without approval (see the eba-huisstijl skill).
 */
:root {
	/* Brand */
	--eba-primair: #356BD8;
	--eba-primair-hover: #2A5BC0;
	--eba-link: #2457B8;
	--eba-lichtblauw: #7FA8F0;
	--eba-tint: #E4ECFA;
	--eba-tint-hover: color-mix(in srgb, var(--eba-tint) 88%, var(--eba-primair));
	--eba-donker: #191919;
	/* Derived from --eba-donker, so a new dark colour (Site-instellingen › Huisstijl) carries through:
	   #191919 at 60% over black is exactly the prototype's #0f0f0f. */
	--eba-zwart: color-mix(in srgb, var(--eba-donker) 60%, #000);
	--eba-donker-hover: color-mix(in srgb, var(--eba-donker) 55%, #000);
	--eba-tekst: #1c2028;
	--eba-tekst-zacht: #3d4452;
	--eba-gedempt: #5b6270;
	--eba-achtergrond: #F4F6FA;
	--eba-rand: #DEE3EC;
	--eba-invoer-rand: #C9D0DC;
	--eba-ster: #F5B301;

	/* Text on dark backgrounds */
	--eba-op-donker: #dfe5ee;
	--eba-op-donker-zacht: #c9ced8;
	--eba-op-donker-grijs: #8b93a1;

	/* Status */
	--eba-groen: #34C77B;
	--eba-groen-tekst: #1f7a4a;
	--eba-groen-tint: #E3F5EB;

	/* Type */
	--eba-font-kop: Montserrat, sans-serif;
	--eba-font-tekst: Inter, sans-serif;
	--eba-basis: 1.0625rem;

	/* Layout */
	--eba-max: 1200px;
	--eba-max-header: 1280px;
	--eba-goot: 24px;
	--eba-header-hoogte: 108px;

	/* Section padding (as in the prototype) */
	--eba-pad-a: clamp(3.5rem, 7vw, 5.5rem);
	--eba-pad-b: clamp(3.5rem, 7vw, 5rem);
	--eba-pad-c: clamp(4rem, 8vw, 6rem);
	--eba-pad-d: clamp(3rem, 6vw, 5rem);
	--eba-pad-e: clamp(2.5rem, 5vw, 4rem);

	/* Titles */
	--eba-h1-foto: clamp(2rem, 4.2vw, 3.25rem);
	--eba-h2-groot: clamp(1.75rem, 3.2vw, 2.5rem);
	--eba-h2: clamp(1.625rem, 3vw, 2.25rem);
	--eba-h2-cta: clamp(1.5rem, 2.6vw, 2rem);
	--eba-h2-klein: clamp(1.5rem, 2.6vw, 1.875rem);

	/* Radius */
	--eba-r-knop: 4px;
	--eba-r-veld: 6px;
	--eba-r-kaart: 10px;

	/* Shadows */
	--eba-schaduw-kaart: 0 1px 2px rgba(20, 30, 50, .06), 0 8px 24px rgba(20, 30, 50, .06);
	--eba-schaduw-kaart-hover: 0 2px 4px rgba(20, 30, 50, .08), 0 16px 40px rgba(20, 30, 50, .12);
}