/**
 * Farb- und Effekt-Tokens — die einzige Stelle für Farbänderungen.
 * Wird als ERSTES Stylesheet geladen (siehe SiteLayout.astro / LegalDocLayout.astro).
 */
:root {
	/* Flächen */
	--color-surface: #ffffff;
	--color-surface-alt: #f4f4f2;
	/* Tiefes Marineblau — sichtbar als Farbe, nicht als Schwarz (Hero, CTA-Band, Nav) */
	--color-surface-dark: #16253a;

	/* Text */
	--color-text: #14181d;
	--color-text-muted: #4a5259;
	--color-text-on-dark: #f2f3f1;
	--color-text-on-dark-muted: #b7c0c1;

	/* Marke */
	--color-primary: #12414f;
	--color-primary-hover: #0e333e;
	--color-accent: #c0702a;
	--color-accent-hover: #a25e20;
	/* hellere Akzentvariante für Text/Links auf dunklem Grund (Kontrast) */
	--color-accent-on-dark: #e0975a;
	/* Beschriftung auf einfarbiger Akzentfläche (4.75:1 auf --color-accent) */
	--color-on-accent: #14181d;

	/* Formular-Zustände — bewusst NICHT die Akzentfarbe (Fehler ≠ Handlung) */
	--color-field-invalid: #b3261e;
	--color-field-valid: #2e7d32;
	--color-danger-surface: #b3261e;

	/* Linien */
	--color-border: #dde0dd;
	--color-border-on-dark: rgba(242, 243, 241, 0.4);

	/* Fläche/Hover auf dunklem Grund (Chips, Menü-Hover) */
	--surface-on-dark: rgba(242, 243, 241, 0.12);

	/* zarte Marken-Tints (Karten-Hintergründe) */
	--color-primary-tint: rgba(18, 65, 79, 0.07);
	--color-accent-tint: rgba(192, 112, 42, 0.08);

	/* Fokus-Ring */
	--focus-ring: var(--color-primary);
	--focus-ring-on-dark: var(--color-text-on-dark);

	/* Schatten — 3 Stufen, getönt mit --color-surface-dark */
	--shadow-1: 0 1px 3px rgba(20, 24, 29, 0.08);
	--shadow-2: 0 6px 18px rgba(20, 24, 29, 0.1);
	--shadow-3: 0 16px 40px rgba(20, 24, 29, 0.14);
	/* Karten setzen sich per Schatten ab (kein Haarrand); auch auf --color-surface-alt sichtbar */
	--shadow-card: 0 1px 2px rgba(20, 24, 29, 0.07), 0 6px 16px rgba(20, 24, 29, 0.1);
	--shadow-card-hover: 0 2px 6px rgba(20, 24, 29, 0.1), 0 14px 32px rgba(20, 24, 29, 0.16);

	/* Overlays — dunkel über Flächen/Bildern */
	--overlay-weak: rgba(20, 24, 29, 0.4);
	--overlay-medium: rgba(20, 24, 29, 0.65);
	--overlay-strong: rgba(20, 24, 29, 0.88);

	/* Icons — ein Satz Farben und Größen für die ganze Seite.
	   Lucide-Line-Icons, 1,5px Strich. Farbe immer über currentColor.
	   Freistehende Icons tragen die Akzentfarbe (dekorativ, aria-hidden;
	   3,7:1 auf Weiß, genügt WCAG 1.4.11 für grafische Elemente). */
	--icon-color: var(--color-accent); /* freistehendes Icon auf hellem Grund */
	--icon-color-on-fill: var(--color-text-on-dark); /* Icon in gefülltem Kreis */
	--icon-size-sm: 20px; /* inline in Listen/Text */
	--icon-size-md: 24px; /* Ablauf-Schritte, Vergleich */
	--icon-size-lg: 32px; /* freistehend über Karten-Überschrift */
}