/*
 * Nur für die Demo, nicht Teil des Basekit — siehe ../README.md.
 * Wird nach dist/styles.css geladen (siehe index.php), deshalb greifen diese
 * Token-Überschreibungen.
 */

/* --- Varianten-Tokens ----------------------------------------------- */
/* Ungelayert mit Absicht: Tailwinds `@theme`-Block kompiliert nach
   `@layer theme { :root, :host { --color-primary: …; } }`. Nach der
   Cascade-Layers-Spezifikation gewinnt eine ungelayerte Regel immer gegen
   eine gelayerte, unabhängig von Spezifität und Reihenfolge — das ist der
   Mechanismus, nicht die Selektor-Spezifität.

   Farbvarianten gehören jeweils zu genau einem Design und sind deshalb auf
   dessen `html[data-design="…"]` beschränkt — sonst schlüge ein noch
   gesetzter Cookie nach einem Designwechsel durch. */

/* Farben, die sowohl in einer Variante als auch in ihrem Vorschau-Chip weiter
   unten vorkommen — eine Quelle, damit beide nicht auseinanderlaufen. */
:root {
	--showcase-smaragd-primary: oklch(0.42 0.12 150);
	--showcase-smaragd-primary-deep: oklch(0.32 0.11 150);
	--showcase-gold-primary: oklch(0.46 0.1 78);
	--showcase-gold-primary-deep: oklch(0.35 0.09 78);
	--showcase-laubgruen: oklch(0.829 0.146 126);
	--showcase-terrakotta: oklch(0.764 0.1 62);
	--showcase-terrakotta-muted: oklch(0.625 0.109 59);
	--showcase-ocker: oklch(0.829 0.115 91);
	--showcase-ocker-muted: oklch(0.671 0.11 88);
}

/* --- Design "trusted" ----------------------------------------------- */

html[data-design="trusted"][data-theme="smaragd"] {
	/* "Waldsmaragd" — der Akzent (Gold, Hue 85/97) bleibt absichtlich auf
	   seinem Standardwert, siehe ../README.md. Chroma höher als im blauen
	   Original (0.07/0.06): Grün wirkt bei gleichem Chroma stumpf/oliv und
	   braucht mehr, um als klarer Smaragd zu lesen. */
	--color-link: var(--showcase-smaragd-primary);
	--color-link-hover: var(--showcase-smaragd-primary-deep);
	--color-primary: var(--showcase-smaragd-primary);
	--color-primary-strong: var(--showcase-smaragd-primary-deep);
	--color-surface-inverse: var(--showcase-smaragd-primary-deep);
}

html[data-design="trusted"][data-theme="gold"] {
	/* "Antikgold" — warm-monochrom statt Hue-Umkehr: die Markenfarbe wandert
	   Richtung Orange/Messing, die ganze Akzentfamilie (inkl. der
	   Hover-Fläche aus button.php) auf ein dunkleres, röteres Kupfer, damit
	   sie sich gegen das nun goldene Primär noch absetzt. */
	--color-link: var(--showcase-gold-primary);
	--color-link-hover: var(--showcase-gold-primary-deep);
	--color-primary: var(--showcase-gold-primary);
	--color-primary-strong: var(--showcase-gold-primary-deep);
	--color-surface-inverse: var(--showcase-gold-primary-deep);
	--color-accent: oklch(0.4 0.05 30);
	--color-accent-muted: oklch(0.45 0.04 30);
	--color-hover-fill: oklch(0.7 0.08 40);
	--color-hover-fill-inverse: oklch(0.7 0.08 40);
}

/* --- Design "organic" ------------------------------------------------ */
/* Beide Varianten tauschen nur die Akzentfamilie: das dunkle Grün trägt
   Flächen, Text und Konturen und bleibt deshalb unangetastet. */

html[data-design="organic"][data-theme="terrakotta"] {
	--color-primary: var(--showcase-terrakotta);
	--color-accent: var(--showcase-terrakotta);
	--color-accent-muted: var(--showcase-terrakotta-muted);
	--color-hover-fill-inverse: var(--showcase-terrakotta);
}

html[data-design="organic"][data-theme="ocker"] {
	--color-primary: var(--showcase-ocker);
	--color-accent: var(--showcase-ocker);
	--color-accent-muted: var(--showcase-ocker-muted);
	--color-hover-fill-inverse: var(--showcase-ocker);
}

/* --- Schriftpaarungen ----------------------------------------------- */

html[data-font="fraunces"] {
	/* Paarung "Editorial/Warm". Die @font-face-Regeln spritzt index.php pro
	   Anfrage inline ein, weil sie berechnete Plugin-Asset-URLs brauchen;
	   diese Regel zeigt nur die vorhandenen Tokens auf die neuen
	   Familiennamen. */
	--font-heading: "Fraunces", "Georgia", "Times New Roman", serif;
	--font-body: "Public Sans", "Helvetica", "Arial", sans-serif;
}

html[data-font="source-serif"] {
	/* Paarung "Matched Family" — nur die Überschriftschrift wechselt.
	   --font-body bleibt absichtlich unangetastet und fällt auf das
	   site-weit geladene Source Sans 3 zurück, das metrisch zu Source
	   Serif 4 passt (dieselbe source-*-Schriftfamilie). */
	--font-heading: "Source Serif 4", "Georgia", "Times New Roman", serif;
}

/* --- Drawer-Oberfläche ----------------------------------------------- */
/* Dauerhaft sichtbare Leiste, unten mittig. Der gestrichelte Trenner und der
   Hinweis in Monospace machen deutlich, dass es sich um eine Demo-Ebene
   handelt und nicht um die Website — statt einer eigenen Ausziehlasche. */

.showcase-drawer {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	transform: translateX(-50%);
	z-index: 2147483647;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.625rem 0.75rem;
	border-radius: 1rem;
	background: rgb(20 20 20 / 0.85);
	backdrop-filter: blur(6px);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.25);
}

.showcase-drawer__hint {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.68rem;
	color: rgb(255 255 255 / 0.55);
	border-bottom: 1px dashed rgb(255 255 255 / 0.25);
	padding-bottom: 0.5rem;
}

.showcase-drawer__group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.showcase-drawer__group--design {
	/* abgesetzt, weil ein Designwechsel die Seite neu lädt und die beiden
	   Gruppen darunter zurücksetzt — anders als die Swatches, die sofort
	   und ohne Nebenwirkung umschalten */
	border-bottom: 1px dashed rgb(255 255 255 / 0.25);
	padding-bottom: 0.5rem;
}

.showcase-drawer__group--panel {
	/* hebt diese Zeile von den kosmetischen Umschaltern darüber ab: ein
	   Klick löst hier einen echten, wenn auch schreibgeschützten Login aus */
	border-top: 1px dashed rgb(255 255 255 / 0.25);
	padding-top: 0.5rem;
}

.showcase-drawer__label {
	font-size: 0.72rem;
	color: rgb(255 255 255 / 0.7);
	min-width: 6rem;
}

.showcase-drawer__swatch {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	border: 2px solid rgb(255 255 255 / 0.3);
	cursor: pointer;
	padding: 0;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.showcase-drawer__swatch:hover {
	transform: scale(1.08);
}

.showcase-drawer__swatch[aria-pressed="true"] {
	border-color: white;
}

.showcase-drawer__swatch--blau {
	background: oklch(0.4 0.07 225);
}

.showcase-drawer__swatch--laubgruen {
	background: var(--showcase-laubgruen);
}

.showcase-drawer__swatch--terrakotta {
	background: var(--showcase-terrakotta);
}

.showcase-drawer__swatch--ocker {
	background: var(--showcase-ocker);
}

.showcase-drawer__swatch--smaragd {
	background: var(--showcase-smaragd-primary);
}

.showcase-drawer__swatch--gold {
	background: var(--showcase-gold-primary);
}

.showcase-drawer__design {
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	border: 2px solid rgb(255 255 255 / 0.3);
	background: rgb(255 255 255 / 0.08);
	color: white;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.showcase-drawer__design:hover {
	transform: scale(1.05);
}

.showcase-drawer__design[aria-pressed="true"] {
	border-color: white;
	background: rgb(255 255 255 / 0.18);
}

.showcase-drawer__font-swatch {
	min-width: 2.25rem;
	height: 1.75rem;
	padding: 0 0.5rem;
	border-radius: 0.375rem;
	border: 2px solid rgb(255 255 255 / 0.3);
	background: rgb(255 255 255 / 0.08);
	color: white;
	font-size: 0.9rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.showcase-drawer__font-swatch:hover {
	transform: scale(1.05);
}

.showcase-drawer__font-swatch[aria-pressed="true"] {
	border-color: white;
}

.showcase-drawer__font-swatch--lora {
	font-family: "Lora", "Georgia", "Times New Roman", serif;
}

.showcase-drawer__font-swatch--archivo {
	font-family: "Archivo", "Helvetica Neue", "Arial", sans-serif;
}

.showcase-drawer__font-swatch--fraunces {
	font-family: "Fraunces", "Georgia", "Times New Roman", serif;
}

.showcase-drawer__font-swatch--source-serif {
	font-family: "Source Serif 4", "Georgia", "Times New Roman", serif;
}

.showcase-drawer__panel-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem 0.85rem;
	border-radius: 0.375rem;
	border: 2px solid rgb(255 255 255 / 0.3);
	background: rgb(255 255 255 / 0.08);
	color: white;
	font-size: 0.78rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.showcase-drawer__panel-link:hover {
	border-color: white;
	background: rgb(255 255 255 / 0.16);
	transform: scale(1.05);
}

.showcase-drawer .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}