/**
 * Global CSS.
 *
 * Bevat uitsluitend zaken die daadwerkelijk globaal zijn: reset, box model,
 * basis typografie, links en een generieke container. Component-specifieke
 * stijlen horen bij het component zelf, niet hier.
 */

/*
 * Self-hosted fonts (assets/fonts/): Outfit (koppen) + Figtree (body).
 * Self-hosten i.p.v. Google Fonts scheelt een extern origin. Variable-font
 * bestanden dekken het volledige gewichtenbereik in één request.
 * font-display: swap houdt tekst zichtbaar terwijl de webfont laadt.
 */
@font-face {
	font-family: "Outfit";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url( "../fonts/outfit-variable.woff2" ) format( "woff2" );
}

@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url( "../fonts/figtree-variable.woff2" ) format( "woff2" );
}

:root {
	/* Tekst */
	--color-text: #2c3a4b;
	--color-heading: #1e3a5f;
	--color-muted-foreground: #5f6b7c;

	/* Achtergronden */
	--color-background: #f8f5ee;
	--color-card: #fefdf9;
	--color-primary: #1e3a5f;
	--color-primary-deep: #152b48;
	--color-primary-foreground: #faf7f0;
	--color-light-blue: #e6eff8;
	--color-mint: #a0d5dd;

	/* Links, knoppen, accenten */
	--color-accent: #e2694f;
	--color-star: #e0a93b;
	--color-border: #dde3ec;

	--font-family-heading: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-family-base: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--font-size-base: 1rem;
	--line-height-base: 1.6;

	--container-max-width: 1200px;
	--container-padding: clamp(1rem, 4vw, 2rem);
}

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media ( prefers-reduced-motion: no-preference ) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-text);
	background-color: var(--color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-heading);
	font-weight: 600;
	color: var(--color-heading);
	line-height: 1.2;
}

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--color-accent);
	text-decoration: underline;
}

a:hover,
a:focus {
	color: var(--color-primary);
}

.container {
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* Critical: voorkomt CLS tot footer.css/header.css binnenkomen. */
.site-header {
	background-color: var(--color-primary);
}

.site-footer {
	background-color: var(--color-primary-deep);
}