/* ── surface--dark — utility: flip color scheme only, no visual treatment ── */
.surface--dark { color-scheme: dark; }

/* ── surface--clean — soft white-to-base wash, the quiet default ─── */
.surface--clean {
	background: linear-gradient(180deg, var(--white) 0%, var(--base-ultra-light) 100%);
}

/* ── surface--optical — subtle lens-highlight radial on light base ── */
.surface--optical {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(ellipse 80% 55% at 25% 20%,
			color-mix(in oklch, var(--primary) 8%, var(--white)) 0%,
			transparent 55%),
		var(--base-ultra-light);
}

/* ── surface--neutral — quiet break between content sections ────── */
.surface--neutral {
	background-color: var(--base-ultra-light);
}

/* ── surface--deep-teal — brand-dark band for footers / CTA bookends ── */
.surface--deep-teal {
	color-scheme: dark;
	color: var(--white);
	background: linear-gradient(160deg, var(--primary-dark) 0%, var(--primary-ultra-dark) 100%);
}
.surface--deep-teal :is(h1, h2, h3, h4, h5, h6) { color: var(--white); }

/* ── surface--amber-glow — warm accent for high-conversion blocks ── */
.surface--amber-glow {
	color-scheme: dark;
	color: var(--accent-ultra-dark);
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
}
.surface--amber-glow :is(h1, h2, h3, h4, h5, h6) { color: var(--accent-ultra-dark); }

/* ── surface--teal-tint — gentle primary tint, hero/feature backdrops ── */
.surface--teal-tint {
	background: linear-gradient(180deg,
		color-mix(in oklch, var(--primary) 4%, var(--white)) 0%,
		color-mix(in oklch, var(--primary) 8%, var(--base-ultra-light)) 100%);
}