/*
 * Farbmodus-Umschaltung (Hell/Dunkel/System) fuer Besucher:innen.
 *
 * Wichtig: Dies ist UNABHAENGIG von der im Site Editor gewaehlten globalen
 * Stilvariante (PSST Hell/Dunkel/Hoher Kontrast). Die Stilvariante legt den
 * REDAKTIONELLEN STANDARD fest (was ohne jede Besucherinteraktion bzw. ohne
 * JavaScript angezeigt wird). Diese Datei ergaenzt eine PERSOENLICHE,
 * lokal im Browser gespeicherte Praeferenz, die den Standard bei Bedarf
 * ueberschreibt. Beide Mechanismen nutzen dieselben theme.json-Farbvariablen,
 * damit saemtliche Bloecke automatisch reagieren.
 *
 * Rangfolge (niedrig -> hoch):
 *   1. Aktive Stilvariante (theme.json / styles/*.json)
 *   2. Systempraeferenz (prefers-color-scheme), sofern keine explizite Wahl
 *   3. Explizite Besucherwahl "Hell" oder "Dunkel" (data-theme-Attribut)
 *
 * Hinweis: Waehlt eine Website die Stilvariante "PSST Hoher Kontrast", gilt
 * dieser feste Kontrastmodus fuer alle Besucher:innen. Die Umschaltung
 * bleibt bedienbar, ist fuer diesen Anwendungsfall aber nicht das primaere
 * Werkzeug (siehe Administrationshandbuch, Abschnitt Dunkelmodus).
 */

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) body {
		--wp--preset--color--psst-bg: #171221;
		--wp--preset--color--psst-bg-alt: #221c30;
		--wp--preset--color--psst-text: #f2eefc;
		--wp--preset--color--psst-text-muted: #c9bde0;
		--wp--preset--color--psst-violet: #9b73d8;
		--wp--preset--color--psst-violet-dunkel: #b79cea;
		--wp--preset--color--psst-tuerkis: #00d4aa;
		--wp--preset--color--psst-tuerkis-text: #00d4aa;
		--wp--preset--color--psst-orange: #ff6600;
		--wp--preset--color--psst-orange-text: #ffb84d;
		--wp--preset--color--psst-rand: #362d47;
		--wp--preset--color--psst-rand-stark: #5c4f73;
	}

	html:not([data-theme="light"]) {
		color-scheme: dark;
	}
}

html[data-theme="dark"] body {
	--wp--preset--color--psst-bg: #171221;
	--wp--preset--color--psst-bg-alt: #221c30;
	--wp--preset--color--psst-text: #f2eefc;
	--wp--preset--color--psst-text-muted: #c9bde0;
	--wp--preset--color--psst-violet: #9b73d8;
	--wp--preset--color--psst-violet-dunkel: #b79cea;
	--wp--preset--color--psst-tuerkis: #00d4aa;
	--wp--preset--color--psst-tuerkis-text: #00d4aa;
	--wp--preset--color--psst-orange: #ff6600;
	--wp--preset--color--psst-orange-text: #ffb84d;
	--wp--preset--color--psst-rand: #362d47;
	--wp--preset--color--psst-rand-stark: #5c4f73;
}

html[data-theme="dark"] {
	color-scheme: dark;
}

html[data-theme="light"] body {
	--wp--preset--color--psst-bg: #ffffff;
	--wp--preset--color--psst-bg-alt: #f4f1fa;
	--wp--preset--color--psst-text: #1a1425;
	--wp--preset--color--psst-text-muted: #4a4258;
	--wp--preset--color--psst-violet: #7137c8;
	--wp--preset--color--psst-violet-dunkel: #5a2ba0;
	--wp--preset--color--psst-tuerkis: #00d4aa;
	--wp--preset--color--psst-tuerkis-text: #008369;
	--wp--preset--color--psst-orange: #ff6600;
	--wp--preset--color--psst-orange-text: #c64f00;
	--wp--preset--color--psst-rand: #ddd6ea;
	--wp--preset--color--psst-rand-stark: #8f88a3;
}

html[data-theme="light"] {
	color-scheme: light;
}

/* --------------------------------------------------- Umschalter-Baustein */

.psst-farbmodus {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	border: 1px solid var(--wp--preset--color--psst-rand);
	border-radius: 999px;
	padding: 0.2rem;
}

.psst-farbmodus__option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding: 0.3rem 0.6rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--psst-text);
	cursor: pointer;
	font-size: 0.85rem;
	line-height: 1;
}

.psst-farbmodus__option[aria-pressed="true"] {
	background: var(--wp--preset--color--psst-violet);
	color: #fff;
	font-weight: 700;
}

.psst-farbmodus__status {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}