/**
 * Dark-mode-specific component tweaks that go beyond simple token swaps
 * (tokens.css handles the bulk of light/dark differences already).
 */

:root[data-theme='dark'] .promo-tile__overlay {
	background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,.25));
}

:root[data-theme='dark'] .site-header {
	background-color: var(--surface-page);
	border-bottom-color: var(--border-subtle);
}

:root[data-theme='dark'] .partners-strip__logo img {
	filter: grayscale(1) opacity(.5) invert(0);
}

:root[data-theme='dark'] .contact-form__field input,
:root[data-theme='dark'] .contact-form__field textarea {
	background: var(--surface-alt);
}

:root[data-theme='dark'] .theme-toggle {
	background: var(--surface-alt);
	border-color: var(--border-subtle);
}

/* Smooth the mode switch across every themeable surface, without animating
   layout-affecting properties (avoids jank on toggle). */
body,
.site-header,
.service-card,
.event-card,
.testimonial-card,
.contact-form__field input,
.contact-form__field textarea,
.theme-toggle {
	transition: background-color var(--duration-base) var(--ease-standard),
		color var(--duration-base) var(--ease-standard),
		border-color var(--duration-base) var(--ease-standard);
}