/* Gestel.nu – design-tokens, fonts, dark mode. Merk-/accentkleur en afronding kunnen via de instellingen (inline) wijzigen. */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	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: "Inter";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/inter-latin-ext.woff2") format("woff2");
	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;
}

:root {
	color-scheme: light;

	/* Merk */
	--gn-brand: #0d4e63;
	--gn-brand-deep: #093847;
	--gn-accent: #00adef;
	--gn-on-brand: #ffffff;
	--gn-on-accent: #03222d;

	/* Vlakken en tekst */
	--gn-bg: #ffffff;
	--gn-surface: #ffffff;
	--gn-surface-2: #f1f5f7;
	--gn-surface-3: #e6edf1;
	--gn-text: #13212a;
	--gn-muted: #56666f;
	--gn-border: #e1e8ec;
	--gn-link: #0b6282;
	--gn-focus: #0d4e63;
	--gn-mark: #cdefff;

	/* Knoppen en overlays */
	--gn-cta-bg: var(--gn-brand);
	--gn-cta-text: var(--gn-on-brand);
	--gn-cta-icon: var(--gn-accent);
	--gn-grad: linear-gradient(180deg, rgba(3, 18, 25, 0) 30%, rgba(3, 18, 25, .45) 55%, rgba(3, 18, 25, .9) 100%);
	--gn-shadow: 0 1px 2px rgba(10, 30, 40, .06), 0 8px 24px rgba(10, 30, 40, .08);
	--gn-footer-bg: #0a3b4b;

	/* Vorm en typografie */
	--gn-radius: 14px;
	--gn-radius-sm: calc(var(--gn-radius) * .65);
	--gn-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--gn-font-head: var(--gn-font-body);
	--gn-size-body: 1.125rem;

	/* Ruimte */
	--gn-space-1: .25rem;
	--gn-space-2: .5rem;
	--gn-space-3: .75rem;
	--gn-space-4: 1rem;
	--gn-space-5: 1.5rem;
	--gn-space-6: 2rem;
	--gn-space-7: 3rem;
	--gn-space-8: 4rem;

	/* Layout */
	--gn-wrap: 1240px;
	--gn-col: 720px;
	--gn-gutter: 16px;
	--gn-header-h: 60px;
}

@media (min-width: 600px) {
	:root {
		--gn-gutter: 24px;
		--gn-header-h: 68px;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--gn-bg: #0b161c;
	--gn-surface: #111f27;
	--gn-surface-2: #162731;
	--gn-surface-3: #1e333e;
	--gn-text: #e6eef2;
	--gn-muted: #9fb2bc;
	--gn-border: #223843;
	--gn-link: #5fcff8;
	--gn-focus: #5fcff8;
	--gn-mark: #0f5a78;
	--gn-cta-bg: var(--gn-accent);
	--gn-cta-text: var(--gn-on-accent);
	--gn-cta-icon: var(--gn-on-accent);
	--gn-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
	--gn-footer-bg: #07141a;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--gn-bg: #0b161c;
		--gn-surface: #111f27;
		--gn-surface-2: #162731;
		--gn-surface-3: #1e333e;
		--gn-text: #e6eef2;
		--gn-muted: #9fb2bc;
		--gn-border: #223843;
		--gn-link: #5fcff8;
		--gn-focus: #5fcff8;
		--gn-mark: #0f5a78;
		--gn-cta-bg: var(--gn-accent);
		--gn-cta-text: var(--gn-on-accent);
		--gn-cta-icon: var(--gn-on-accent);
		--gn-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
		--gn-footer-bg: #07141a;
	}
}