/**
 * Ebene 3 – Theme-Tokens (UI-Kontext)
 *
 * Beschreiben, WELCHE Farbe/Größe ein UI-Element in welchem Zustand trägt.
 * Komponenten lesen ausschließlich diese Ebene (plus Typografie-Rollen).
 *
 * Kontraste (WCAG 2.2 AA, gemessen):
 *   Paper auf Coral 500 ...... 3,2:1  (Button-Text – bewusste Marken-
 *                                    Ausnahme, Entscheidung 2. 10. 2026;
 *                                    Button-Schrift ist groß + medium)
 *   Paper auf Ink ............ 18,9:1 (Button-Hover)
 *   Ink 500 auf Paper ........ 5,3:1  (gedämpfter Text, kleinste Stufe)
 *   Coral 700 auf Paper ...... 5,0:1  (Coral als Textfarbe)
 *   Coral 500 auf Paper ...... 3,2:1  -> NIE für Text, nur Flächen/Deko
 *
 * Hinweis Deklarationsort: Diese Aliase werden auf :root aufgelöst. Ein
 * Kontext, der eine Grundfarbe umschaltet, muss die abhängigen Theme-Tokens
 * mit umschalten (siehe Wiki „css-variablen-werden-am-deklarationsort-ersetzt“).
 */
:root {
	/* Flächen & Text */
	--theme-bg: var(--color-paper);
	--theme-bg-muted: var(--color-sand-100);
	--theme-bg-gallery: var(--color-sand-400);
	--theme-text: var(--color-ink-900);
	--theme-text-muted: var(--color-ink-500);
	--theme-text-inverse: var(--color-paper);
	--theme-accent: var(--color-coral-500);       /* Fläche/Deko */
	--theme-accent-text: var(--color-coral-700);  /* Coral als Schrift */

	/* Linien */
	--theme-border: var(--color-sand-300);
	--theme-border-strong: var(--color-ink-500);
	--theme-divider: var(--color-sand-200);

	/* Navigation (Haupt- und Footer-Menü): Farbwechsel zu Coral statt Unterstrich.
	   Coral 700 (5,0:1) statt 500 (3,2:1) – gilt auch für die aktuelle Seite,
	   ein dauerhafter Zustand braucht 4,5:1 (Lighthouse/WCAG 1.4.3). */
	--theme-nav-link: var(--color-ink-900);
	--theme-nav-link-hover: var(--color-coral-700);

	/* Links */
	--theme-link: var(--color-ink-900);
	--theme-link-hover: var(--color-coral-700);
	--theme-link-decoration: var(--color-coral-500);

	/* Fokus */
	--theme-focus-ring: var(--color-ink-900);
	--theme-focus-ring-inverse: var(--color-paper);
	--theme-focus-width: var(--border-width-thick);
	--theme-focus-offset: 0.1875rem;

	/* Button – primär (gefüllt) */
	--theme-btn-primary-bg: var(--color-coral-500);
	--theme-btn-primary-text: var(--color-paper);
	--theme-btn-primary-border: var(--color-coral-500);
	--theme-btn-primary-bg-hover: var(--color-ink-900);
	--theme-btn-primary-text-hover: var(--color-paper);
	--theme-btn-primary-border-hover: var(--color-ink-900);

	/* Button – sekundär (Kontur) */
	--theme-btn-secondary-bg: transparent;
	--theme-btn-secondary-text: var(--color-ink-900);
	--theme-btn-secondary-border: var(--color-coral-500);
	--theme-btn-secondary-bg-hover: var(--color-coral-500);
	--theme-btn-secondary-text-hover: var(--color-paper);
	--theme-btn-secondary-border-hover: var(--color-coral-500);

	--theme-btn-radius: var(--radius-md);
	--theme-btn-border-width: var(--border-width-medium);
	--theme-btn-padding-block: 0.875rem;
	--theme-btn-padding-inline: 1.5625rem;
	--theme-btn-min-height: 3.25rem;

	/* Formulare */
	--theme-input-bg: var(--color-paper);
	--theme-input-text: var(--color-ink-900);
	--theme-input-border: var(--color-ink-500);
	--theme-input-border-hover: var(--color-ink-900);
	--theme-input-border-focus: var(--color-ink-900);
	--theme-input-placeholder: var(--color-ink-500);
	--theme-input-radius: var(--radius-md);
	--theme-input-height: 3.25rem;
	--theme-input-error: var(--color-error-700);
	--theme-control-checked: var(--color-ink-900);

	/* Hinweise */
	--theme-notice-success: var(--color-success-700);
	--theme-notice-error: var(--color-error-700);
	--theme-notice-info: var(--color-info-700);

	/* Header / Badge */
	--theme-header-bg: var(--color-paper);
	--theme-header-shadow: var(--shadow-header);
	--theme-badge-bg: var(--color-coral-500);
	--theme-badge-text: var(--color-ink-900);

	/* Produkt */
	--theme-tile-bg: var(--color-sand-100);
	--theme-swatch-ring: var(--color-ink-900);
}