/*
 * Vaarmarkt design tokens (design system v1).
 * Enige bron van kleuren, fonts, maten en schaduwen. Componenten gebruiken
 * uitsluitend deze variabelen: geen losse hexcodes of fontnamen.
 * Dezelfde tokens worden gebruikt door de React-app op /m/.
 */

:root {
	/* Kleuren */
	--vm-blauw-900: #01234C;
	--vm-blauw-700: #004E8E;
	--vm-blauw-500: #0B5EA8;
	--vm-blauw-50: #EAF2F9;
	--vm-oranje: #F07F0C;
	--vm-knop: #E06F00;
	--vm-knop-hover: #C85F00;
	--vm-zand: #EFEAE4;
	--vm-creme: #FFFAF3;
	--vm-wit: #FFFFFF;
	--vm-lijn: #E5DED4;
	--vm-inkt: #1F2933;
	--vm-inkt-sterk: #111827;
	--vm-grijs: #4B5563;
	--vm-succes: #1E7B45;
	--vm-waarschuwing: #B45309;
	--vm-fout: #B42318;
	--vm-footer-onder: #003D70;

	/* Typografie (fonts worden zelf gehost; tot aanlevering geldt de fallback) */
	--vm-font-kop: 'Manrope', sans-serif;
	--vm-font-tekst: 'Inter', sans-serif;
	--vm-h1: clamp(26px, 4vw, 36px);
	--vm-h2: clamp(21px, 3vw, 26px);
	--vm-tekst: 15px;
	--vm-klein: 13px;
	--vm-veld: 16px;

	/* Radius */
	--vm-r-s: 8px;
	--vm-r-tegel: 10px;
	--vm-r-m: 12px;
	--vm-r-l: 16px;
	--vm-r-pil: 999px;

	/* Schaduw */
	--vm-sch-1: 0 1px 2px rgba(31, 41, 51, .04), 0 3px 8px rgba(31, 41, 51, .06);
	--vm-sch-2: 0 2px 4px rgba(31, 41, 51, .06), 0 10px 24px rgba(31, 41, 51, .10);

	/* Spacing */
	--vm-s1: 4px;
	--vm-s2: 8px;
	--vm-s3: 12px;
	--vm-s4: 16px;
	--vm-s5: 24px;
	--vm-s6: 32px;
	--vm-s7: 48px;
	--vm-s8: 64px;

	/* Layout */
	--vm-max: 1120px;
	--vm-rand: 16px;
}

@media (min-width: 600px) {
	:root {
		--vm-rand: 32px;
	}
}

@media (min-width: 1024px) {
	:root {
		--vm-rand: 80px;
	}
}