/*
 * TWI Kadence Child — Dark Mode (prefers-color-scheme: dark)
 *
 * Betrifft NUR den Kadence-Site-Teil. Die Community-Oberfläche (BuddyBoss
 * ReadyLaunch) bringt ihren eigenen, nutzergesteuerten Dark-Mode mit und
 * wird hier bewusst NICHT angefasst.
 *
 * Neutraltöne nach Handoff §2:
 *   bg #1C2127 · surface #262C33 · text #ECE6DB · muted #A4ADB5
 *   border #343C45 · Akzent hell #7FB3D0
 *
 * Strategie: die theme.json-Preset-Variablen werden im Dark-Kontext
 * umgehängt, sodass alle Komponenten (Buttons/Karten/Texte aus global.css)
 * automatisch folgen. Kontrast Light+Dark ≥ WCAG AA (Handoff §3/§7).
 */

@media (prefers-color-scheme: dark) {
	:root {
		/* Preset-Variablen auf Dark-Werte umhängen. */
		--wp--preset--color--background: #1C2127;
		--wp--preset--color--surface: #262C33;
		--wp--preset--color--surface-alt: #2F353D;
		--wp--preset--color--text: #ECE6DB;
		--wp--preset--color--muted: #A4ADB5;
		--wp--preset--color--border: #343C45;
		/* Petrol wird im Dunkeln zur helleren AA-konformen Variante. */
		--wp--preset--color--primary: #7FB3D0;

		/* Aliase + Fokus-Halo nachziehen. */
		--twi-primary: #7FB3D0;
		--twi-background: #1C2127;
		--twi-surface: #262C33;
		--twi-surface-alt: #2F353D;
		--twi-text: #ECE6DB;
		--twi-muted: #A4ADB5;
		--twi-border: #343C45;
		--twi-focus-ring: #7FB3D0;
		--twi-focus-halo: rgba(127, 179, 208, 0.40);
	}

	body {
		background-color: var(--twi-background);
		color: var(--twi-text);
	}

	.twi-card {
		background-color: var(--twi-surface);
		border-color: var(--twi-border);
	}

	/*
	 * Primär-Buttons: heller Petrol-Ton braucht dunklen Text für Kontrast
	 * (helle Fläche + weißer Text wäre zu schwach).
	 */
	.twi-btn,
	.twi-btn--primary {
		background-color: var(--twi-primary);
		color: #14202B;
	}
	.twi-btn:hover,
	.twi-btn--primary:hover {
		background-color: #9AC4DC;
		color: #14202B;
	}

	.twi-btn--secondary {
		color: var(--twi-primary);
		border-color: var(--twi-primary);
	}
	.twi-btn--secondary:hover {
		background-color: var(--twi-primary);
		color: #14202B;
	}

	/* Akzent-CTA bleibt warm; auf dunkler Fläche mit weißem Text tragfähig. */
	.twi-btn--cta {
		background-color: var(--twi-accent, #B5611B);
		color: #fff;
	}

	/*
	 * Header-Logo: custom_logo ist die DUNKLE Wortmarke (#2b2a28) und waere auf
	 * dunklem Header unsichtbar. Die Wortmarke ist einfarbig -> per Filter weiss
	 * faerben (brightness(0) invert(1) ergibt reines Weiss).
	 */
	.site-header .site-branding img.custom-logo,
	.site-header .site-logo-anchor img,
	.site-branding a.brand img {
		filter: brightness(0) invert(1);
	}
}