/*
 * Dunkelmodus für marcweinhardt-tt25.
 *
 * Gleiche Rollen wie die helle Palette (CI 4), nur umgekehrt:
 * base/surface dunkel, Text hell. Navy wird zu einem hellen Blau,
 * Petrol aufgehellt. Kontraste nach WCAG-Formel (06.10.2026):
 * contrast 14,36:1, muted 7,24:1, navy 10,09:1, petrol 8,42:1,
 * petrol-dark 11,10:1 auf base; auf surface mindestens 6,41:1.
 * Bänder und Schildchen (CI 4.2): band-text 12,71:1, band-muted 6,41:1,
 * band-accent 7,46:1 auf band; tag-text 7,81:1 auf tag-bg.
 *
 * Aktiv, wenn das System dunkel eingestellt ist und keine eigene Wahl
 * gespeichert ist, oder wenn der Schalter auf „dunkel“ steht.
 * Nur im Frontend geladen, nicht im Editor.
 */

:root {
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--base: #121A22;
		--wp--preset--color--surface: #1A2530;
		--wp--preset--color--line: #2E3D4B;
		--wp--preset--color--contrast: #E4E9ED;
		--wp--preset--color--muted: #9CA8B3;
		--wp--preset--color--navy: #A9C8E4;
		--wp--preset--color--petrol: #5FC3C3;
		--wp--preset--color--petrol-dark: #93DADA;
		--wp--preset--color--band: #1A2530;
		--wp--preset--color--band-text: #E4E9ED;
		--wp--preset--color--band-muted: #9CA8B3;
		--wp--preset--color--band-accent: #5FC3C3;
		--wp--preset--color--tag-bg: #163A3A;
		--wp--preset--color--tag-text: #93DADA;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--wp--preset--color--base: #121A22;
	--wp--preset--color--surface: #1A2530;
	--wp--preset--color--line: #2E3D4B;
	--wp--preset--color--contrast: #E4E9ED;
	--wp--preset--color--muted: #9CA8B3;
	--wp--preset--color--navy: #A9C8E4;
	--wp--preset--color--petrol: #5FC3C3;
	--wp--preset--color--petrol-dark: #93DADA;
	--wp--preset--color--band: #1A2530;
	--wp--preset--color--band-text: #E4E9ED;
	--wp--preset--color--band-muted: #9CA8B3;
	--wp--preset--color--band-accent: #5FC3C3;
	--wp--preset--color--tag-bg: #163A3A;
	--wp--preset--color--tag-text: #93DADA;
}

/* Formularfelder folgen der Palette statt den Browser-Standardfarben. */
:where(input:not([type="submit"], [type="checkbox"], [type="radio"]), textarea, select) {
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------
 * Schalter
 * ---------------------------------------------------------- */
.mw-dunkelmodus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50%;
	cursor: pointer;
}

.mw-dunkelmodus[hidden] {
	display: none;
}

.mw-dunkelmodus:hover {
	color: var(--wp--preset--color--petrol-dark);
	border-color: currentColor;
}

.mw-dunkelmodus svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: currentColor;
}

/* Mond zeigt „dunkel einschalten“, Sonne „hell einschalten“. */
.mw-dunkelmodus[aria-pressed="true"] .mw-icon-mond,
.mw-dunkelmodus[aria-pressed="false"] .mw-icon-sonne {
	display: none;
}