/* WatKomtEr design tokens — bron: CONTEXT.md hoofdstuk 8 (Concept 4, Hybride).
   Wijzig kleuren en maten alleen hier. Geen dark mode in de MVP. */

@font-face {
	font-family: "Bricolage Grotesque";
	src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
	font-weight: 700 800;
	font-style: normal;
	font-display: swap;
	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: "Bricolage Grotesque";
	src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
	font-weight: 700 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-latin.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	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: "Hanken Grotesk";
	src: url("../fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
	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;
}

:root {
	color-scheme: light;

	/* Merk (8.1) */
	--wke-petrol: #0D4A47;
	--wke-petrol-hover: #0A3B39;
	--wke-petrol-dark: #072B29;
	--wke-mint: #BFE3D5;
	--wke-coral: #FF6B57;
	--wke-coral-text: #D2432F;
	--wke-bg: #F4F7F6;
	--wke-surface: #FFFFFF;
	--wke-text: #0E1C1B;
	--wke-muted: #4F6563;
	--wke-line: #D6E2DE;
	--wke-tint: #E3ECE9;

	/* Categorieën (8.2) */
	--wke-cat-build: #0D4A47;
	--wke-cat-build-tint: #E3ECE9;
	--wke-cat-build-icon: #0D4A47;
	--wke-cat-traffic: #FF6B57;
	--wke-cat-traffic-tint: #FFE6E2;
	--wke-cat-traffic-icon: #D2432F;
	--wke-cat-nature: #2F8F6A;
	--wke-cat-nature-tint: #DDF0E5;
	--wke-cat-nature-icon: #2F8F6A;
	--wke-cat-water: #3B7EA1;
	--wke-cat-water-tint: #E0ECF3;
	--wke-cat-water-icon: #3B7EA1;

	/* Status (8.3) */
	--wke-info-fg: #0D4A47;
	--wke-info-bg: #E3ECE9;
	--wke-success-fg: #1F6E4F;
	--wke-success-bg: #DDF0E5;
	--wke-warning-fg: #8A5300;
	--wke-warning-bg: #FFF1D6;
	--wke-error-fg: #B3261E;
	--wke-error-bg: #FFE6E2;

	/* Typografie (8.4) */
	--wke-font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--wke-font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--wke-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

	/* Spacing (8.9) */
	--wke-space-1: 4px;
	--wke-space-2: 8px;
	--wke-space-3: 12px;
	--wke-space-4: 16px;
	--wke-space-5: 20px;
	--wke-space-6: 24px;
	--wke-space-8: 32px;
	--wke-space-12: 48px;
	--wke-space-16: 64px;
	--wke-gutter: clamp(16px, 4vw, 44px);
	--wke-max: 1200px;
	--wke-section: 48px;

	/* Radius (8.8) */
	--wke-r-3: 3px;
	--wke-r-4: 4px;
	--wke-r-8: 8px;
	--wke-r-10: 10px;
	--wke-r-14: 14px;
	--wke-r-16: 16px;
	--wke-r-20: 20px;
	--wke-r-pill: 999px;

	/* Schaduwen (8.7) */
	--wke-shadow-card: 0 30px 60px -36px rgba(13, 74, 71, .4);
	--wke-shadow-mini: 0 24px 50px -20px rgba(13, 74, 71, .45);
	--wke-shadow-search: 0 18px 40px -24px rgba(13, 74, 71, .35);

	/* Beweging (8.14) */
	--wke-ease: 150ms ease;
	--wke-header-h: 64px;
}

@media (min-width: 1024px) {
	:root { --wke-section: 64px; --wke-header-h: 72px; }
}