/**
 * Dark-mode adjustments that can't be expressed as a simple token swap
 * (image treatment, shadow softening, form control chrome).
 * Color values themselves live in design-tokens.css.
 */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) img:not(.bcm-no-dim) {
		filter: brightness(0.92) contrast(1.02);
	}

	:root:not([data-theme='light']) .bcm-category-tile img {
		filter: brightness(0.75) contrast(1.02);
	}

	:root:not([data-theme='light']) .bcm-brand-strip img {
		filter: grayscale(1) invert(0.85) opacity(0.75);
	}

	:root:not([data-theme='light']) .bcm-hero__search,
	:root:not([data-theme='light']) .bcm-newsletter__form input[type='email'] {
		background: var(--bcm-surface-raised);
		color: var(--bcm-text-primary);
	}

	:root:not([data-theme='light']) .bcm-toggle-track {
		background: var(--bcm-border-color-strong);
	}
}

:root[data-theme='dark'] img:not(.bcm-no-dim) {
	filter: brightness(0.92) contrast(1.02);
}

:root[data-theme='dark'] .bcm-category-tile img {
	filter: brightness(0.75) contrast(1.02);
}

:root[data-theme='dark'] .bcm-brand-strip img {
	filter: grayscale(1) invert(0.85) opacity(0.75);
}

:root[data-theme='dark'] .bcm-hero__search,
:root[data-theme='dark'] .bcm-newsletter__form input[type='email'] {
	background: var(--bcm-surface-raised);
	color: var(--bcm-text-primary);
}

/* Dark mode toggle switch */
.bcm-theme-toggle {
	position: relative;
	width: 44px;
	height: 24px;
	border-radius: var(--bcm-radius-pill);
	background: var(--bcm-surface-sunken);
	border: 1px solid var(--bcm-border-color);
	cursor: pointer;
	flex-shrink: 0;
}

.bcm-theme-toggle__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--bcm-color-primary);
	transition: transform var(--bcm-duration-base) var(--bcm-ease);
}

:root[data-theme='dark'] .bcm-theme-toggle__thumb {
	transform: translateX(20px);
	background: var(--bcm-color-accent);
}