/**
 * theme.css – Design-Tokens, Semantik-Rollen, Dark Mode, Reduced Motion.
 * Grundlage: design-system.md §7. Ergänzt die theme.json-Presets um
 * semantische Custom-Properties für Komponenten und den Dark Mode.
 */

:root {
	/* Marken-Primitives (aus dem Logo gemessen) */
	--sv-blau-900: #14213a;
	--sv-blau-700: #1e3370;
	--sv-blau-600: #263f8f;
	--sv-blau-400: #4a63b0;
	--sv-blau-100: #dde3f2;
	--sv-gelb-500: #cfb923;
	--sv-gelb-400: #e4d24a;
	--sv-gelb-300: #f3e668;
	--sv-gelb-100: #fbf6d6;
	--sv-nachtblau: #0e1526;
	--sv-weiss: #ffffff;
	--sv-offwhite: #f7f7f4;
	--sv-grau-300: #d7d9de;
	--sv-grau-500: #6b7280;

	/* Semantische Rollen – LIGHT MODE (Default) */
	--bg: #ffffff;
	--bg-alt: #f7f7f4;
	--surface: #ffffff;
	--surface-sunken: #f7f7f4;
	--text: #14213a;
	--text-muted: #6b7280;
	--primary: #263f8f;
	--primary-hover: #1e3370;
	--on-primary: #ffffff;
	--accent: #e4d24a;
	--on-accent: #14213a;
	--accent-strong: #cfb923;
	--border: #d7d9de;
	--border-strong: #263f8f;
	--focus: #263f8f;
	--link: #263f8f;
	--link-hover: #1e3370;

	/* CTA-Rollen (Probetraining ist Gelb-Fläche + Ink-Text, in beiden Modi) */
	--cta-bg: #e4d24a;
	--cta-bg-hover: #f3e668;
	--cta-text: #14213a;

	/* Radii */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 18px;
	--radius-xl: 28px;
	--radius-pill: 999px;

	/* Schatten (blau getönt) – bewusst eine Stufe weicher/kleiner (Beruhigung §8) */
	--shadow-sm: 0 1px 2px rgba(20, 33, 58, 0.05);
	--shadow-md: 0 2px 8px rgba(20, 33, 58, 0.06), 0 1px 2px rgba(20, 33, 58, 0.05);
	--shadow-lg: 0 8px 24px rgba(20, 33, 58, 0.09), 0 2px 6px rgba(20, 33, 58, 0.05);
	--shadow-hero: 0 16px 48px rgba(20, 33, 58, 0.14);

	/* Motion */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 240ms;
}

/* DARK MODE („Flutlicht-Abend") – manuell (.is-dark) und via prefers-color-scheme */
.is-dark {
	--bg: #0e1526;
	--bg-alt: #14213a;
	--surface: #182444;
	--surface-sunken: #0b1120;
	--text: #f5f7fb;
	--text-muted: #a9b4ce;
	--primary: #e4d24a; /* im Dark Mode ist Gelb die Primär-CTA-Fläche */
	--primary-hover: #f3e668;
	--on-primary: #14213a;
	--accent: #e4d24a;
	--on-accent: #14213a;
	--accent-strong: #f3e668;
	--border: #2a3a63;
	--border-strong: #e4d24a;
	--focus: #f3e668;
	--link: #8fa6ea;
	--link-hover: #b7c6f5;
	--shadow-sm: 0 0 0 1px #2a3a63;
	--shadow-md: 0 0 0 1px #2a3a63, 0 8px 24px rgba(0, 0, 0, 0.4);
	--shadow-lg: 0 0 0 1px #2a3a63, 0 12px 32px rgba(0, 0, 0, 0.5);
	--shadow-hero: 0 0 0 1px #2a3a63, 0 24px 64px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
	:root:not(.force-light) {
		--bg: #0e1526;
		--bg-alt: #14213a;
		--surface: #182444;
		--surface-sunken: #0b1120;
		--text: #f5f7fb;
		--text-muted: #a9b4ce;
		--primary: #e4d24a;
		--primary-hover: #f3e668;
		--on-primary: #14213a;
		--accent: #e4d24a;
		--on-accent: #14213a;
		--accent-strong: #f3e668;
		--border: #2a3a63;
		--border-strong: #e4d24a;
		--focus: #f3e668;
		--link: #8fa6ea;
		--link-hover: #b7c6f5;
	}
}

/* Grundlegendes */
html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--bg);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Sinnvolle Lesebreite für Fließtext */
.svk-content-narrow {
	max-width: 68ch;
}

/* Sichtbarer Fokus überall (Barrierefreiheit vor Ästhetik) */
:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 2px;
}

a {
	color: var(--link);
}

a:hover {
	color: var(--link-hover);
}

/* Overline / Caption (UPPERCASE + Tracking) */
.svk-overline {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0 0 0.5rem;
	display: inline-block;
}

.is-dark .svk-overline,
.svk-section--blau .svk-overline,
.svk-section--dark .svk-overline {
	color: var(--accent);
}

/* Rückennummern-/Statistik-Zahl */
.svk-stat {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 0.9;
	letter-spacing: -0.03em;
}

/* Sektionsflächen */
.svk-section--alt {
	background-color: var(--bg-alt);
}

.svk-section--blau {
	background: linear-gradient(135deg, #263f8f 0%, #1e3370 100%);
	color: #fff;
}

/* --------------------------------------------------------------------------
 * KONTRAST-GRUNDSATZ (verbindlich, §3):
 * Auf Gelb steht immer Ink (--on-accent, #14213a). Auf Blau steht immer Weiß.
 * Kein Element erbt seine Textfarbe über eine Flächenfarbe hinweg.
 *
 * Die Weiß-auf-Blau-Regel ist per :not() so gescoped, dass sie NIE in eine
 * gelbe Kind-Fläche (CTA-Streifen, Gelb-Box, Badge, Button) durchschlägt.
 * Zusätzlich setzt jede gelbe Fläche ihre Textfarbe weiter unten EXPLIZIT.
 * -------------------------------------------------------------------------- */
.svk-section--blau
	:where(h1, h2, h3, h4, p):not(.svk-cta-streifen *):not(.svk-gelb-box *):not(.svk-btn):not(.svk-badge) {
	color: #fff;
}

/* Explizite Ink-Farbe auf ALLEN gesättigt-gelben Flächen – nie geerbt,
 * identisch in Light UND Dark (--on-accent ist in beiden Modi #14213a). */
.svk-cta-streifen,
.svk-cta-streifen :where(h1, h2, h3, h4, p, li, strong),
.svk-cta-streifen a:not(.svk-btn),
.svk-badge--heim,
.svk-badge--sieg,
.svk-toggle-btn[aria-pressed="true"] {
	color: var(--on-accent);
}
.is-dark .svk-cta-streifen,
.is-dark .svk-cta-streifen :where(h1, h2, h3, h4, p, li, strong),
.is-dark .svk-cta-streifen a:not(.svk-btn),
.is-dark .svk-badge--heim,
.is-dark .svk-badge--sieg,
.is-dark .svk-toggle-btn[aria-pressed="true"] {
	color: var(--on-accent);
}

/* Platzhalter-Markierung – bleibt sichtbar, aber dezent (§8: kleiner, grau
 * statt gelb umrandet). Kein gesättigtes Gelb, kein Aufmerksamkeits-Magnet. */
.svk-platzhalter-tag {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--text-muted);
	background: var(--bg-alt);
	border: 1px dashed var(--border);
	border-radius: var(--radius-sm);
	padding: 0.15rem 0.5rem;
	margin-top: 0.75rem;
}

.is-dark .svk-platzhalter-tag {
	color: var(--text-muted);
	background: rgba(255, 255, 255, 0.04);
	border-color: var(--border);
}

/* Reduced Motion – globaler Fallback (design-system §7) */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	html {
		scroll-behavior: auto;
	}
}