/* =============================================================================
   STADSGENOOTJES — Theme baseline
   -----------------------------------------------------------------------------
   Maps tokens to base elements. Elementor and Hello Elementor handle most
   layout; this layer brings in our type and color from the design system.
   ============================================================================= */

body {
	font-family: var(--sg-font-body, "Nunito", sans-serif);
	font-size: var(--sg-fs-base, 17px);
	line-height: var(--sg-lh-normal, 1.45);
	color: var(--sg-ink, #1B1A17);
	background: var(--sg-bg, var(--sg-cream, #FBF5EC));
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sg-font-display);
	font-weight: var(--sg-weight-bold);
	line-height: var(--sg-leading-tight);
	color: var(--sg-color-text);
	margin: 0 0 var(--sg-space-4);
}
h1 { font-size: var(--sg-text-4xl); font-weight: var(--sg-weight-extrabold); }
h2 { font-size: var(--sg-text-3xl); }
h3 { font-size: var(--sg-text-2xl); }
h4 { font-size: var(--sg-text-xl); }
h5 { font-size: var(--sg-text-lg); }
h6 { font-size: var(--sg-text-base); text-transform: uppercase; letter-spacing: 0.05em; }

p {
	margin: 0 0 var(--sg-space-4);
	line-height: var(--sg-leading-relaxed);
}

a {
	color: var(
			--sg-color-primary);
	text-decoration-color: color-mix(in srgb, var(--sg-color-primary) 50%, transparent);
	text-underline-offset: 0.15em;
	transition: color var(--sg-duration-fast) var(--sg-ease-out);
}
a:hover,
a:focus-visible {
	color: var(--sg-color-primary-dark);
}

::selection {
	background: var(--sg-color-primary);
	color: var(--sg-color-text-inverse);
}

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