:root {
	/* Dagmodus (standaard) */
	--bg:         					#ffffff;
	--bg-surface: 					rgba(255, 255, 255, 1);
	--bg-footer: 					#eef5f8;
	--text:       					#1a1a1a;
	--text-contrast: 				#FFF;
	--text-muted: 					#6b6b6b;
	--accent:     					#2c5f8a;
	--border:     					rgba(0, 0, 0, 0.1);
	--overlay:    					rgba(0, 0, 0, 0.04);

	--header-h1: 					linear-gradient(to right, #1E88E5 0%, #283593 100%);
	--nav-a-lijn: 					#1E88E5;

	--logo-voorpagina: 				#1a1a1a;
	--sticky-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

	--bg-hero: 						linear-gradient(to right, #1E88E5 0%, #283593 100%);
	--bg-contact: 					linear-gradient(to right, #1E88E5 0%, #283593 100%);
	--bg-hero-projecten:			linear-gradient(to right, #1E88E5 0%, #283593 100%);
	--bg-hero-projecten-shadow:		0 0 10px rgba(0,0,0,0.2);
	--bg-contact-hover: 			#FFF;
	--bg-hero-grijs: 				#f4f4f5;
	--bg-infoblok: 					#f4f4f5;
	--infoblok-kop: 				#283593;
	--hr: 							#283593;

	--a: 							#1E88E5;
	--a-hover: 						#2b3894;

	--btn-zwart: 					#000;
	--btn-nav-hover:				#1e88e5;

	--transition-theme: background-color 0.3s ease, color 0.3s ease;
	--bite-depth: 25px; /* Hoe diep het hapje is */
	--bite-width: 50px; /* Hoe breed het hapje is */
}

/* ============================================
	2A. AUTOMATISCH: OS-instelling detecteren
	============================================ */

@media (prefers-color-scheme: dark) {
	:root {
		--bg:         					#111111;
		--bg-surface: 					rgba(30, 30, 30, 1);
		--bg-footer: 					rgba(30, 30, 30, 1);
		--text:       					#e8e8e4;
		--text-contrast: 				#FFF;
		--text-muted: 					#9a9a94;
		--accent:     					#6aa3d0;
		--border:     					rgba(255, 255, 255, 0.08);
		--overlay:    					rgba(255, 255, 255, 0.04);

		--header-h1: 					linear-gradient(to right, #FFFFFF 0%, #CFD8DC 100%);
		--nav-a-lijn:  					#CFD8DC;

		--sticky-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

		--logo-voorpagina: 				#FFF;

		--bg-hero: 						rgba(30, 30, 30, 1);
		--bg-contact: 					rgba(238, 238, 238, 1);
		--bg-contact-hover: 			#1e1e1e;
		--bg-hero-projecten:			rgba(30, 136, 229, 0.5);
		--bg-hero-projecten-shadow: 	none;
		--bg-infoblok: 					rgba(30, 30, 30, 1);
		--bg-hero-grijs: 				#1e1e1e;
		--infoblok-kop: 				#e8e8e4;
		--hr: 							rgba(30, 30, 30, 1);

		--a: 							#1E88E5;
		--a-hover: 						#CFD8DC;

		--btn-zwart: 					#FFF;
		--btn-nav-hover:				#1e88e5;
	}
}