.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);
	--button-auto-fill: var(--color-dark);
	--button-auto-text: var(--color-white);
	--button-auto-hover: color-mix(in srgb, white 10%, var(--color-dark));
	--button-auto-plain: 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);
}

/* Ink fallback if Design System CSS has not loaded yet.
   --section-background for light/dark is set by agency_ds_section_themes_css(). */
.section[data-theme="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);
	--button-auto-fill: var(--color-white);
	--button-auto-text: var(--color-dark);
	--button-auto-hover: color-mix(in srgb, black 10%, var(--color-white));
	--button-auto-plain: var(--color-white);
	--border-color: color-mix(in srgb, var(--color-white) 22%, transparent);
}

.section[data-theme-mode="dark"] {
	--button-auto-fill: var(--color-white);
	--button-auto-text: var(--color-dark);
	--button-auto-hover: color-mix(in srgb, black 10%, var(--color-white));
	--button-auto-plain: var(--color-white);
}

.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(1.25rem, 4vw, 2rem);
}

.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. */
.section[data-theme="light"]:not([data-background="media"])
+ .section[data-theme="light"]:not([data-background="media"]):not([data-spacing-before="full"]),
.section[data-theme="dark"]:not([data-background="media"])
+ .section[data-theme="dark"]:not([data-background="media"]):not([data-spacing-before="full"]) {
	padding-top: 0;
}