.section {
	--section-space: var(--space-section-standard);
	--section-background: var(--color-white);
	--text-heading: var(--color-dark);
	--text-body: var(--color-dark);
	--text-muted: var(--color-dark);
	--text-accent: var(--color-dark);
	--link-color: var(--color-dark);
	--link-hover-color: var(--color-dark);
	--button-primary-background: var(--color-green);
	--button-primary-text: var(--color-dark);
	--border-color: color-mix(in srgb, var(--color-dark) 14%, transparent);

	background-color: var(--section-background);
	color: var(--text-body);
	padding-block: var(--section-space);
}

.section[data-theme="dark"] {
	--section-background: var(--color-dark);
	--text-heading: var(--color-white);
	--text-body: var(--color-white);
	--text-muted: var(--color-white);
	--text-accent: var(--color-green);
	--link-color: var(--color-green);
	--link-hover-color: var(--color-white);
	--button-primary-background: var(--color-green);
	--button-primary-text: var(--color-dark);
	--border-color: color-mix(in srgb, var(--color-white) 22%, transparent);
}

.section[data-spacing="compact"] {
	--section-space: var(--space-section-compact);
}

.section[data-spacing="spacious"] {
	--section-space: var(--space-section-spacious);
}

.section__inner {
	box-sizing: content-box;
	margin-inline: auto;
	max-inline-size: var(--width-content-standard);
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.section[data-width="narrow"] .section__inner {
	max-inline-size: var(--width-content-narrow);
}

.section[data-width="custom"] .section__inner {
	max-inline-size: var(--section-custom-width);
}

.section[data-width="wide"] .section__inner {
	max-inline-size: var(--width-content-wide);
}

.section[data-width="full"] .section__inner {
	box-sizing: border-box;
	max-inline-size: none;
}

/* Same-theme collapse: generated per theme slug in design-system.php.
   Fallback for the built-in light/dark pair before options load.
   Hero does not continue a theme, so the next block keeps its spacing. */
.section[data-theme="light"]:not([data-background="media"]):not(.hero)
+ .section[data-theme="light"]:not([data-background="media"]):not([data-spacing-before="full"]),
.section[data-theme="dark"]:not([data-background="media"]):not(.hero)
+ .section[data-theme="dark"]:not([data-background="media"]):not([data-spacing-before="full"]) {
	padding-top: 0;
}