/**
 * Drie-O ontwerptokens.
 *
 * Dit bestand is de fallback met de waarden uit het Claude Design-ontwerp.
 * Zodra de huisstijl in Drie-O > Huisstijl is opgeslagen, wordt er een eigen
 * tokens.css gegenereerd in wp-content/uploads/drieo/ die dit bestand vervangt.
 *
 * Harde regel voor de rest van de CSS: nooit een letterlijke kleur, lettertypenaam
 * of radius. Altijd var(--drieo-...). Er staat een lintcontrole op.
 */

:root {
	/* --- Kleuren: merk --- */
	--drieo-blauw: #0978BF;
	--drieo-blauw-hover: #147AC0;
	--drieo-blauw-knop-hover: #0A67A3;
	--drieo-marine: #242D54;
	--drieo-marine-diep: #1B2444;
	--drieo-oranje: #E15C11;
	--drieo-oranje-hover: #C74E0B;
	--drieo-oranje-licht: #F0A05A;
	--drieo-geel: #FCB217;

	/* --- Kleuren: vlakken --- */
	--drieo-wit: #FFFFFF;
	--drieo-vlak-licht: #F7F9FB;
	--drieo-vlak-tint: #F4F8FD;
	--drieo-vlak-zebra: #FBFCFD;
	--drieo-vlak-oranje: #FDF0E7;
	--drieo-vlak-actief: #E4ECF5;
	--drieo-vlak-hover: #F0F4F8;
	--drieo-beeld-leeg: #DCE8F3;
	--drieo-beeld-leeg-donker: #3B4A78;

	/* --- Kleuren: lijnen --- */
	--drieo-lijn: #E6E9EE;
	--drieo-lijn-sterk: #C8D6E5;
	--drieo-lijn-zacht: #DDE4EB;
	--drieo-lijn-oranje: #F3C7A8;
	--drieo-lijn-op-donker: rgba(181, 219, 229, .25);
	--drieo-lijn-op-donker-sterk: rgba(181, 219, 229, .45);

	/* --- Kleuren: tekst --- */
	--drieo-tekst: #5A7490;
	--drieo-tekst-diep: #3F5570;
	--drieo-tekst-kop: #242D54;
	--drieo-tekst-zacht: #9FB0C4;
	--drieo-tekst-zachter: #7C8FA5;
	--drieo-tekst-op-donker: #C7D3E8;
	--drieo-tekst-op-donker-zacht: #8EA0C4;
	--drieo-tekst-op-blauw: #DDECF8;
	--drieo-cyaan: #B5DBE5;
	--drieo-oranje-op-donker: #E9A075;

	/* --- Kleuren: status --- */
	--drieo-goed-vlak: #EAF4EC;
	--drieo-goed-tekst: #2E7D4F;
	--drieo-goed-lijn: #C3E0D0;
	--drieo-let-op-vlak: #FDF0E7;
	--drieo-let-op-tekst: #C74E0B;
	--drieo-fout-vlak: #FBE9E9;
	--drieo-fout-tekst: #B03636;

	/* --- Schaduw --- */
	--drieo-schaduw-kaart: 0 12px 28px rgba(36, 45, 84, .14);
	--drieo-schaduw-groot: 0 16px 36px rgba(36, 45, 84, .14);
	--drieo-schaduw-menu: 0 14px 28px rgba(36, 45, 84, .16);
	--drieo-schaduw-oranje: 0 8px 26px rgba(225, 92, 17, .10);
	--drieo-schaduw-oranje-zacht: 0 8px 22px rgba(225, 92, 17, .10);

	/* --- Lettertypes --- */
	--drieo-font-tekst: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--drieo-font-kop: Montserrat, Inter, system-ui, sans-serif;

	/* --- Typografie: schaal --- */
	--drieo-basis-grootte: 16px;
	--drieo-h1: clamp(2rem, 1.35rem + 2.1vw, 3.375rem);   /* 32 -> 54 */
	--drieo-h1-sub: clamp(1.75rem, 1.3rem + 1.6vw, 2.625rem); /* 28 -> 42 */
	--drieo-h2: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);  /* 24 -> 34 */
	--drieo-h2-klein: clamp(1.375rem, 1.15rem + .8vw, 1.875rem);
	--drieo-h3: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
	--drieo-h4: 1.0625rem;
	--drieo-lead: clamp(1rem, .95rem + .25vw, 1.125rem);
	--drieo-body: 1rem;
	--drieo-body-klein: .90625rem;
	--drieo-meta: .84375rem;
	--drieo-eyebrow: .75rem;

	--drieo-lh-kop: 1.18;
	--drieo-lh-tekst: 1.7;
	--drieo-ls-kop: -.02em;
	--drieo-ls-h1: -.03em;
	--drieo-ls-eyebrow: .16em;

	/* --- Vormen --- */
	--drieo-radius-klein: 6px;
	--drieo-radius: 12px;
	--drieo-radius-kaart: 14px;
	--drieo-radius-groot: 16px;
	--drieo-radius-paneel: 20px;
	--drieo-radius-pil: 999px;
	--drieo-radius-beeld: 16px;
	--drieo-radius-beeld-bloed: 18px 0 0 18px;
	--drieo-accentlijn: 3px;

	/* --- Knoppen --- */
	--drieo-knop-padding: 1.0625rem 1.875rem;
	--drieo-knop-padding-klein: .8125rem 1.375rem;
	--drieo-knop-grootte: .9375rem;

	/* --- Ruimte --- */
	/* Ontwerpdoek is 1388px breed met 44px marge: 1300px inhoud. */
	--drieo-container: 1300px;
	--drieo-gutter: 44px;
	--drieo-sectie-ruimte: 80px;
	--drieo-sectie-ruimte-klein: 56px;
	--drieo-sectie-ruimte-groot: 112px;
	--drieo-gap: 24px;
	--drieo-gap-groot: 56px;

	/* --- Animatie --- */
	--drieo-anim-duur: .7s;
	--drieo-anim-easing: cubic-bezier(.22, .61, .36, 1);
	--drieo-anim-veer: cubic-bezier(.34, 1.56, .64, 1);
	--drieo-transitie: .15s ease;
}

/* Tablet */
@media (max-width: 1023px) {
	:root {
		--drieo-gutter: 24px;
		--drieo-sectie-ruimte: 56px;
		--drieo-sectie-ruimte-klein: 40px;
		--drieo-sectie-ruimte-groot: 72px;
		--drieo-gap-groot: 36px;
	}
}

/* Mobiel */
@media (max-width: 767px) {
	:root {
		--drieo-gutter: 20px;
		--drieo-sectie-ruimte: 44px;
		--drieo-sectie-ruimte-klein: 32px;
		--drieo-sectie-ruimte-groot: 56px;
		--drieo-gap: 18px;
		--drieo-gap-groot: 28px;
		--drieo-knop-padding: .9375rem 1.5rem;
	}
}