/* Theme-Aktionsfarbe und dunkles Design des Vorlese-Knopfes.
   Diese Datei wird nur geladen, wenn das Theme "A&B Schulungen" aktiv ist
   (oder der Filter ab_read_aloud_enable_ab_theme_design das erzwingt). Sie
   kommt nach assets/css/frontend.css und ueberschreibt die neutrale Basis
   ueber die Ladereihenfolge - deshalb reichen einklassige Selektoren, und das
   Theme kann mit ".site-main .ab-read-aloud-button" weiterhin das letzte Wort
   haben. Keine Vorrangerklaerung noetig, die Reihenfolge genuegt.

   Barrierefreiheit steht bewusst NICHT hier: Fokusrahmen und Mindesthoehe des
   Knopfes gelten in der Basis und damit unter jedem Theme. */

/* Aktionsfarbe des A&B-Themes statt des WordPress-Aktionsblaus. #006f83
   erreicht gegen Weiss rund 5,8:1 (WCAG 1.4.3), Weiss auf #006f83 ebenso.

   Dazu die kraeftigere 2px-Kontur des A&B-Zusatzdesigns. Die neutrale Basis
   bleibt bei der Familienstaerke 1px; nur border-width wird hier ersetzt,
   Farbe (currentColor) und Stil kommen weiter aus der Basis. Die Flaeche bleibt
   auch hier transparent - der Knopf sitzt im Fliesstext. */
.ab-read-aloud-button {
	border-width: 2px;
	color: var(--ab-action, #006f83);
}

.ab-read-aloud-button:focus-visible,
.ab-read-aloud-button[aria-pressed="true"] {
	background: var(--ab-action, #006f83);
	color: var(--ab-on-action, #fff);
}

/* Das A&B-Theme benutzt fuer Hover denselben Ton wie fuer den gefuellten
   Zustand, nicht die dunklere WordPress-Hover-Stufe der Basis. */
.ab-read-aloud-button:hover {
	background: var(--ab-action, #006f83);
	color: var(--ab-on-action, #fff);
}

/*
 * Dunkelmodus (Familienstandard der A&B-Plugins).
 *
 * Dunkelpalette der Familie: Flaeche #11282e, kraeftigere Flaeche #16343b,
 * Text #dbe9eb, Rahmen #274a52, Feldkante #6f8f97. Der Knopf selbst hat keine
 * eigene Flaeche - er liegt transparent auf der Seitenflaeche (#11282e) - und
 * braucht deshalb nur Gegenstuecke fuer seine drei helligkeitsabhaengigen
 * Festwerte: Aktionsfarbe, Knopfschrift und Fokusfarbe.
 *
 * Aktionsfarbe: Die Theme-Aktionsfarbe #006f83 ist auf dunklem Grund zu dunkel
 * (gegen #11282e nur rund 2,6:1). Der Dunkelmodus nimmt daher #5ce1e6 aus der
 * Dunkelpalette des Themes: rund 9,8:1 gegen die Seitenflaeche #11282e, also
 * deutlich ueber den 4,5:1 nach WCAG 1.4.3 fuer den Text und ueber den 3:1 nach
 * WCAG 1.4.11 fuer den Rahmen (border-color: currentColor).
 *
 * Knopfschrift auf gefuelltem Knopf: Auf der hellen Flaeche #5ce1e6 waere Weiss
 * unlesbar (rund 1,4:1). Stattdessen die dunkle Schrift #072026 der
 * Dunkelpalette: rund 10,7:1 gegen #5ce1e6.
 *
 * Fokusfarbe: Die Fokusfarbe #005fcc der Basis erreicht gegen #11282e nur rund
 * 2,6:1 und verfehlt damit WCAG 1.4.11. Der Dunkelmodus nimmt #72aee6 - rund
 * 6,5:1 gegen #11282e.
 */
@media (prefers-color-scheme: dark) {
	.ab-read-aloud-button {
		color: var(--ab-action, #5ce1e6);
	}

	.ab-read-aloud-button:hover,
	.ab-read-aloud-button:focus-visible,
	.ab-read-aloud-button[aria-pressed="true"] {
		background: var(--ab-action, #5ce1e6);
		color: var(--ab-on-action, #072026);
	}

	.ab-read-aloud-button:focus-visible {
		outline-color: var(--ab-focus, #72aee6);
	}
}

/* Rueckfallebene fuer Browser ohne :focus-visible - Gegenstueck zum
   @supports-Block der Basis, damit der fokussierte Knopf dort ebenfalls die
   A&B-Farben statt des WordPress-Aktionsblaus traegt. */
@supports not selector(:focus-visible) {
	.ab-read-aloud-button:focus {
		background: var(--ab-action, #006f83);
		color: var(--ab-on-action, #fff);
	}

	@media (prefers-color-scheme: dark) {
		.ab-read-aloud-button:focus {
			outline-color: var(--ab-focus, #72aee6);
			background: var(--ab-action, #5ce1e6);
			color: var(--ab-on-action, #072026);
		}
	}
}