/*
 * Kosmetik-Farbpalette
 *
 * Es gibt ausschliesslich zehn fest definierte Farben.
 * Komponenten duerfen keine neuen Farbabstufungen berechnen.
 * Semantische --hm-color-* Variablen verweisen immer direkt auf 01-10.
 */

:root {
	/* 01: Reines Weiss fuer Karten und Buttons; helle Seite der Erfolge-Gradienten; helle Schrift auf dunklen Hover-/Akzentflaechen. */
	--kosmetik-color-01: #FFFFFF;

	/* 02: Allgemeiner Seiten-/Abschnittshintergrund; Team-Bildflaechen; kleine neutrale Info-/Erfahrungsflaechen. */
	--kosmetik-color-02: #FCFAF7;

	/* 03: Weiche Rahmen von Karten, FAQ, Zertifikaten und Controls; Rahmen des Glass-Menues und der Dropdowns; dunkle Seite der Erfolge-Gradienten. */
	--kosmetik-color-03: #D2A2A7;

	/* 04: Starker Sekundaerton; dunkle Seite des Termin-Gradienten; staerkere Rahmen; aktive Bewertungssterne und hervorgehobene Texte. */
	--kosmetik-color-04: #BF7F86;

	/* 05: Primaere Textfarbe fuer Ueberschriften, Fliesstext, Menue, Kartentitel und normale Button-Texte. */
	--kosmetik-color-05: #4A2D35;

	/* 06: Sekundaere Textfarbe fuer Beschreibungen, Rollen, Meta-Informationen, Review-Texte und inaktive Icons. */
	--kosmetik-color-06: #8C6B73;

	/* 07: Primaerer Akzent fuer aktive Menueelemente, Pfeile/Marker, Termin-Logo-Flaechen, Fokusrahmen und hervorgehobene Detailwerte. */
	--kosmetik-color-07: #B77780;

	/* 08: Dunkler Akzent fuer Hover- und Focus-Zustaende von Buttons, Pfeilen und interaktiven Controls. */
	--kosmetik-color-08: #8F5962;

	/* 09: Fester heller Spezialton fuer die helle Seite des Termin-Gradienten. */
	--kosmetik-color-09: #FBF0F1;

	/* 10: Fester transparenter Glass-Farbton fuer Hauptmenue und Dropdown-Hintergruende. */
	--kosmetik-color-10: #FFFCFBF2;
}

.hm-theme-cosmetic {
	/* Feste Farbschnittstellen. */
	--hm-color-01: var(--kosmetik-color-01);
	--hm-color-02: var(--kosmetik-color-02);
	--hm-color-03: var(--kosmetik-color-03);
	--hm-color-04: var(--kosmetik-color-04);
	--hm-color-05: var(--kosmetik-color-05);
	--hm-color-06: var(--kosmetik-color-06);
	--hm-color-07: var(--kosmetik-color-07);
	--hm-color-08: var(--kosmetik-color-08);
	--hm-color-09: var(--kosmetik-color-09);
	--hm-color-10: var(--kosmetik-color-10);

	/* Semantische Rollen erzeugen keine neuen Farben. */
	--hm-color-surface: var(--hm-color-01);
	--hm-color-background: var(--hm-color-02);
	--hm-color-border-soft: var(--hm-color-03);
	--hm-color-border-strong: var(--hm-color-04);
	--hm-color-text: var(--hm-color-05);
	--hm-color-muted: var(--hm-color-06);
	--hm-color-accent: var(--hm-color-07);
	--hm-color-accent-hover: var(--hm-color-08);
	--hm-color-surface-soft: var(--hm-color-02);
	--hm-color-surface-medium: var(--hm-color-09);
	--hm-color-surface-strong: var(--hm-color-03);
	--hm-color-glass: var(--hm-color-10);
	--hm-color-glass-border: var(--hm-color-03);
}

.hm-accent-cosmetic {
	--hm-color-accent: var(--kosmetik-color-07);
	--hm-color-accent-hover: var(--kosmetik-color-08);
}