/*
 * Ontwerptokens: kleuren, fonts en maten.
 *
 * De --sm-variabelen komen uit het design system in Figma en hebben daar dezelfde
 * naam. De tekstmaten verschillen per apparaat: hier mobiel, daaronder tablet en
 * desktop. Gebruik in de rest van de CSS alleen deze variabelen.
 */

:root {
	/* Kleuren: basis en tinten */
	--sm-petrol: #003644;
	--sm-petrol-tint-1: #305d6a;
	--sm-petrol-tint-2: #81adbb;
	--sm-petrol-tint-3: #acdae8;
	--sm-teal: #1f887a;
	--sm-teal-tint-1: #38aa94;
	--sm-teal-tint-2: #6cc5a6;
	--sm-teal-tint-3: #9ad5c0;
	--sm-koper: #946f5d;
	--sm-koper-tint-1: #cba48f;
	--sm-koper-tint-2: #eed9c1;
	--sm-koper-tint-3: #eeeae0;
	--sm-oranje: #e2832b;
	--sm-zwart: #0b1519;
	--sm-grijs-800: #263236;
	--sm-grijs-600: #4f5b60;
	--sm-grijs-400: #879296;
	--sm-grijs-200: #c8cfd1;
	--sm-grijs-100: #e4e8e9;
	--sm-grijs-50: #f3f5f5;
	--sm-wit: #ffffff;

	/* Kleuren: waarvoor */
	--sm-bg-default: var(--sm-wit);
	--sm-bg-brand: var(--sm-petrol);
	--sm-bg-brand-overlay: color-mix(in srgb, var(--sm-petrol) 88%, transparent);
	--sm-bg-warm: var(--sm-koper-tint-3);
	--sm-bg-accent: var(--sm-oranje);
	--sm-text-primary: var(--sm-zwart);
	--sm-text-secondary: var(--sm-grijs-600);
	--sm-text-muted: var(--sm-grijs-400);
	--sm-text-brand: var(--sm-petrol);
	--sm-text-warm: var(--sm-koper);
	--sm-text-on-brand: var(--sm-wit);
	--sm-border-default: var(--sm-grijs-200);
	--sm-border-subtle: var(--sm-grijs-100);

	/* Typografie */
	--sm-font: "objektiv-variable", Avenir, "Segoe UI", sans-serif;

	--sm-kop-xl-size: 2.25rem;
	--sm-kop-xl-line-height: 3.125rem;
	--sm-kop-xl-letter-spacing: 0.08em;
	--sm-kop-l-size: 1.75rem;
	--sm-kop-l-line-height: 2.125rem;
	--sm-kop-l-letter-spacing: 0.08em;
	--sm-kop-m-size: 1.25rem;
	--sm-kop-m-line-height: 1.75rem;
	--sm-kop-m-letter-spacing: 0.06em;
	--sm-subkop-size: 1.125rem;
	--sm-subkop-line-height: 1.625rem;
	--sm-body-l-size: 1.0625rem;
	--sm-body-l-line-height: 1.625rem;
	--sm-body-size: 1rem;
	--sm-body-line-height: 2rem;
	--sm-tussenkop-size: 0.8125rem;
	--sm-tussenkop-line-height: 1.125rem;
	--sm-tussenkop-letter-spacing: 0.12em;
	--sm-menu-size: 0.75rem;
	--sm-menu-line-height: 1.25rem;
	--sm-menu-letter-spacing: 0.15em;
	--sm-menu-l-size: 1.1rem;
	--sm-klein-size: 0.75rem;
	--sm-klein-line-height: 1.4375rem;
	--sm-knop-size: 0.875rem;
	--sm-knop-line-height: 1rem;
	--sm-knop-letter-spacing: 0.1em;
	--sm-copyright-size: 0.625rem;
	--sm-copyright-line-height: 0.875rem;

	/* Banden: secties over de volle breedte, met de inhoud in een kolom */
	--band-max: 108rem;
	--band-pad-x: 1.25rem;
	--band-pad-y: 3.75rem;

	/*
	 * Algemene namen voor de sjablonen die nog geen eigen ontwerp hebben.
	 * Ze wijzen naar de waarden uit Figma.
	 */
	--color-background: var(--sm-bg-default);
	--color-surface: var(--sm-bg-warm);
	--color-text: var(--sm-text-primary);
	--color-text-muted: var(--sm-text-secondary);
	--color-accent: var(--sm-petrol);
	--color-on-accent: var(--sm-text-on-brand);
	--color-border: var(--sm-border-default);
	--color-focus: var(--sm-petrol);

	--font-heading: var(--sm-font);
	--font-body: var(--sm-font);

	--text-sm: 1rem;
	--text-base: 1.125rem;
	--text-lg: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
	--text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);
	--text-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
	--text-3xl: clamp(2.125rem, 1.6rem + 2.2vw, 3rem);

	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4.5rem;

	--container-max: 72rem;
	--content-max: 45rem;
	--gutter: clamp(1rem, 4vw, 2rem);
	--radius: 0.25rem;
	--radius-l: 1.875rem;
}

@media (min-width: 48rem) {
	:root {
		--sm-kop-xl-size: 3rem;
		--sm-kop-xl-line-height: 4.25rem;
		--sm-kop-l-size: 2rem;
		--sm-kop-l-line-height: 2.5rem;
		--sm-kop-m-size: 1.5rem;
		--sm-kop-m-line-height: 2rem;
		--sm-subkop-size: 1.25rem;
		--sm-subkop-line-height: 1.75rem;
		--sm-body-l-size: 1.125rem;
		--sm-body-l-line-height: 1.75rem;
		--sm-body-size: 1.125rem;
		--sm-tussenkop-size: 0.875rem;
		--sm-tussenkop-line-height: 1.25rem;
		--sm-klein-size: 0.8125rem;
		--sm-klein-line-height: 1.5625rem;

		--band-pad-x: 3.125rem;
		--band-pad-y: 6.25rem;
	}
}

@media (min-width: 64rem) {
	:root {
		--sm-kop-xl-size: 4rem;
		--sm-kop-xl-line-height: 5.625rem;
		--sm-kop-l-size: 2.5rem;
		--sm-kop-l-line-height: 3rem;
		--sm-kop-m-size: 1.75rem;
		--sm-kop-m-line-height: 2.25rem;
		--sm-subkop-size: 1.5rem;
		--sm-subkop-line-height: 2rem;
		--sm-body-l-size: 1.25rem;
		--sm-body-l-line-height: 2rem;

		--band-pad-x: 6.25rem;
	}
}

/* Vanaf 2500px wordt het hoofdmenu iets groter */

@media (min-width: 156.25rem) {
	:root {
		--sm-menu-size: 0.875rem;
		--sm-menu-line-height: 1.5rem;
	}
}