/**
 * Design-Tokens — die einzige Stelle, an der Farben, Schrift und Abstände definiert sind.
 * Nie einen Hex-Wert, keine freie Schriftgröße und keinen freien Abstand in einer
 * Komponente. Quelle: docs/reference/design.md §6.
 *
 * Bewusst KEIN Dunkelmodus (Entscheidung 2026-09-09): der rosa Grund ist die Marke.
 */

:root {
	/* ---------- Flächen ---------- */
	--bg:            #FDF2F2;  /* Seitengrund, warmes Rosa — geteilt mit Schloss Bündorf */
	--bg-deep:       #F3DEDC;  /* abgesetzte Sektionen, Fuß */
	--surface:       #FFFFFF;  /* Karten, Produktflächen */

	/* ---------- Text ---------- */
	--primary:       #1A1C18;  /* Fließtext, fast-schwarz — geteilt mit Bündorf */
	/*
	 * Sekundärtext. Am 2026-09-10 von #6E6763 nachgedunkelt: auf dem Fußgrund
	 * (--bg-deep) erreichte der alte Wert nur 4,31:1 und riss damit die 4,5:1 für
	 * Fließtext. Jetzt 5,41:1 im Fuß, 6,36:1 auf dem Seitengrund, 6,98:1 auf Weiß.
	 */
	--muted:         #5F5854;  /* Sekundärtext, Meta, Captions */
	--line:          #E7D6D5;  /* Trennlinien — dekorativ, tragen keine Bedeutung */
	/*
	 * Rahmen von BEDIENELEMENTEN (Eingabefelder, Auswahl, Mengenfeld, Blätterlinks).
	 * WCAG 1.4.11 verlangt dafür 3:1 gegen beide Nachbarflächen; --line liegt bei 1,3:1
	 * und macht ein Eingabefeld praktisch unsichtbar. Dekorative Linien bleiben --line.
	 */
	--line-control:  #9E7D79;

	/*
	 * Rahmen um Fotos (Arthur 2026-09-10). Der Akzent, zu 40 % in den Seitengrund gemischt
	 * — also derselbe Ton, nur leise. 1,65:1 auf Rosa: bewusst zart. Ein Bildrahmen ist
	 * reine Dekoration, er traegt keine Information, deshalb gilt hier keine
	 * Kontrastschwelle. Zu kraeftig wuerde er mit den Produktfarben streiten.
	 */
	--line-photo:    #ECB3AA;

	/* ---------- Akzent — Koralle, aus dem Logo gemessen (design.md §6) ---------- */
	--accent:        #D2543F;  /* NUR Schrift ab 24px und Flächen (3:1) */
	--accent-ink:    #BC412C;  /* alles Textführende: Links, Buttonschrift, Preise (4,87:1) */
	--accent-hover:  #A83A27;

	/*
	 * ---------- Status ----------
	 * Nicht dekorativ, sondern bedeutungstragend: Fehler und Erfolg. Standen bis
	 * 2026-09-10 als nackte Hex-Werte im CSS und waren damit die letzte Lücke im
	 * Token-System. Beide liegen bewusst nah an der Markenfamilie statt am
	 * Signalrot/-grün der Browser-Voreinstellung.
	 * Kontrast: 6,53:1 bzw. 5,95:1 auf dem Seitengrund, 5,55:1 bzw. 5,06:1 im Fuß.
	 */
	--danger:        #A32C1C;  /* Fehlermeldung, Pflichtfeld-Markierung, ungültige Eingabe */
	--success:       #1F6B3A;  /* Erfolgsmeldung, starkes Passwort */

	/*
	 * Weiß als *Vordergrund* auf farbigem, dunklem oder fotografischem Grund —
	 * Buttonschrift, Hero- und Bandtext, aktiver Punkt im Hero.
	 * Bewusst NICHT --surface: das ist eine Fläche (Karte), nicht eine Schriftfarbe.
	 * Beide sind heute #FFFFFF; sie getrennt zu halten heißt, dass ein späterer
	 * gebrochener Kartenton nicht versehentlich die Buttonschrift mitfärbt.
	 */
	--on-dark:       #FFFFFF;

	/* ---------- Schrift ---------- */
	--serif: 'Literata', Georgia, 'Times New Roman', serif;
	--sans:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/*
	 * Größen. Kalibriert an schlossbuendorf.de (gemessen 2026-09-09): dort trägt ein
	 * kleiner Fließtext von 13–15px eine große Display-Skala. Vorher lief das Theme auf
	 * 17px Fließtext — das ließ die Seite gedrungen und uneinheitlich wirken.
	 */
	--fs-micro: .72rem;   /* Marken, Zähler, Fußnoten */
	--fs-small: .82rem;   /* Labels, Meta, Navigation */
	--fs-body:  .94rem;   /* Fließtext, ~15px */
	--fs-lead:  1.06rem;  /* Vorspann */
	--fs-h3:    clamp(1.15rem, 1.6vw, 1.35rem);  /* Kachel- und Kartentitel */
	--fs-h2-sm: clamp(1.5rem, 2.4vw, 2rem);      /* Abschnitte innerhalb einer Seite */
	--fs-h2:    clamp(2rem, 3.5vw, 3rem);        /* Abschnitts-Überschriften */
	--fs-h1:    clamp(2.4rem, 5vw, 4rem);
	--fs-price: clamp(1.35rem, 2vw, 1.7rem);     /* Preis auf der Produktseite */

	--lh-display: .98;
	--lh-heading: 1.1;
	--lh-body:    1.75;

	/*
	 * Laufweite. Bündorf setzt Labels mit 0,03–0,04em — das Theme lag bei 0,10–0,14em
	 * und damit fast viermal so weit. Das war der auffälligste Unterschied.
	 */
	--track-label:   .035em;
	--track-display: -.02em;

	/*
	 * ---------- Abstände: eine Leiter, keine freien Werte ----------
	 *
	 * Die numerierte Leiter beginnt bei 8 px und trägt das Layout. Darunter liegen drei
	 * Stufen mit Namen statt Nummer — sie ordnen nicht Abschnitte, sondern Zeilen
	 * innerhalb einer Komponente (Titel zu Preis, Punkt zu Punkt). Ergänzt 2026-09-10,
	 * weil dort 17 freie Werte zwischen 2 und 6 px standen; sie sind auf diese drei
	 * Stufen zusammengezogen, die größte Verschiebung beträgt 1 px.
	 */
	--space-hair:  2px;   /* trennt gerade eben — Punktreihen, Chip-Abstände */
	--space-micro: 4px;   /* Titel zu Unterzeile */
	--space-mini:  6px;   /* enge Blockabstände in Formularen und Listen */

	--space-1: 8px;
	--space-2: 14px;
	--space-3: 22px;
	--space-4: 32px;
	--space-5: 48px;
	--space-6: 64px;
	--space-7: 88px;
	--space-8: 120px;

	/* ---------- Raster ---------- */
	--w:      1460px;
	--gutter: var(--space-4);
	--radius: 0;

	/* Einheitliche Höhe für Knöpfe, Eingaben und Mengenfelder. */
	--control-h: 48px;
}

@media (max-width: 980px) {
	:root {
		--gutter: var(--space-3);
		--space-8: 72px;
		--space-7: 56px;
	}
}