/*
 * Glass-Design-System – das zentrale Stilmerkmal.
 *
 * Basisklasse .sb-glass nutzt CSS-Variablen; die 5 Modifier überschreiben nur
 * diese Variablen. So bleibt das CSS schlank und Varianten sind kombinierbar.
 */

.sb-glass {
	position: relative;
	background: var(--glass-bg);
	border: var(--glass-border);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow), var(--glass-highlight);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* 1) Soft – leicht & subtil */
.sb-glass--soft {
	--glass-bg: rgba(var(--sb-rgb-white), 0.05);
	--glass-blur: 8px;
	--glass-border: 1px solid rgba(var(--sb-rgb-white), 0.1);
	--glass-shadow: 0 6px 24px rgba(var(--sb-rgb-black), 0.28);
}

/* 2) Frosted – stark mattiert */
.sb-glass--frosted {
	--glass-bg: rgba(var(--sb-rgb-white), 0.09);
	--glass-blur: 22px;
	--glass-saturate: 160%;
	--glass-border: 1px solid rgba(var(--sb-rgb-white), 0.16);
	--glass-shadow: 0 12px 40px rgba(var(--sb-rgb-black), 0.4);
}

/* 3) Clear – dezent, mit hellem Rand & Glanz */
.sb-glass--clear {
	--glass-bg: rgba(var(--sb-rgb-white), 0.03);
	--glass-blur: 4px;
	--glass-border: 1px solid rgba(var(--sb-rgb-white), 0.22);
	--glass-shadow: 0 4px 18px rgba(var(--sb-rgb-black), 0.22);
	--glass-highlight: inset 0 1px 0 rgba(var(--sb-rgb-white), 0.18), inset 0 0 0 1px rgba(var(--sb-rgb-white), 0.02);
}

/* 4) Dark – dunkles Glas */
.sb-glass--dark {
	--glass-bg: rgba(var(--sb-rgb-black), 0.45);
	--glass-blur: 16px;
	--glass-border: 1px solid rgba(var(--sb-rgb-white), 0.08);
	--glass-shadow: 0 10px 36px rgba(var(--sb-rgb-black), 0.5);
	--glass-highlight: inset 0 1px 0 rgba(var(--sb-rgb-white), 0.05);
}

/* 5) Accent – farbige Tönung + Glow */
.sb-glass--accent {
	--glass-bg: linear-gradient(135deg, rgba(var(--sb-rgb-primary), 0.16), rgba(var(--sb-rgb-white), 0.04));
	--glass-blur: 14px;
	--glass-border: 1px solid rgba(var(--sb-rgb-primary), 0.4);
	--glass-shadow: 0 10px 40px rgba(var(--sb-rgb-primary), 0.25);
	--glass-highlight: inset 0 1px 0 rgba(var(--sb-rgb-white), 0.12);
}

/*
 * Farbiges Glas: Tönung über --glass-tint-color (Hex). Funktioniert generisch
 * (.sb-glass--tinted mit Inline-Farbe) oder über die Farb-Presets darunter.
 * Nutzt color-mix() für saubere Transparenzen ohne RGB-Umrechnung.
 */
.sb-glass--tinted,
.sb-glass--pink,
.sb-glass--green,
.sb-glass--blue,
.sb-glass--purple,
.sb-glass--amber {
	--glass-tint-color: var(--sb-color-primary);
	--glass-bg: linear-gradient(
		135deg,
		color-mix(in srgb, var(--glass-tint-color) 42%, transparent) 0%,
		color-mix(in srgb, var(--glass-tint-color) 10%, transparent) 45%,
		rgba(8, 10, 12, 0.45) 100%
	);
	--glass-blur: 16px;
	--glass-border: 1px solid color-mix(in srgb, var(--glass-tint-color) 45%, transparent);
	--glass-shadow: 0 14px 44px color-mix(in srgb, var(--glass-tint-color) 22%, transparent);
	--glass-highlight: inset 0 1px 0 rgba(var(--sb-rgb-white), 0.14);
}

.sb-glass--pink   { --glass-tint-color: var(--sb-tint-pink); }
.sb-glass--green  { --glass-tint-color: var(--sb-tint-green); }
.sb-glass--blue   { --glass-tint-color: var(--sb-tint-blue); }
.sb-glass--purple { --glass-tint-color: var(--sb-tint-purple); }
.sb-glass--amber  { --glass-tint-color: var(--sb-tint-amber); }

/* Fallback, falls color-mix nicht unterstützt wird */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.sb-glass--tinted,
	.sb-glass--pink,
	.sb-glass--green,
	.sb-glass--blue,
	.sb-glass--purple,
	.sb-glass--amber {
		--glass-bg: linear-gradient(135deg, var(--glass-tint-color), rgba(8, 10, 12, 0.6));
		--glass-border: 1px solid var(--glass-tint-color);
	}
}

/* Optionaler Hover-Lift (per Modifier-Klasse aktivierbar) */
.sb-glass--hover {
	transition: transform var(--sb-transition), box-shadow var(--sb-transition), border-color var(--sb-transition);
}

.sb-glass--hover:hover {
	transform: translateY(-4px);
	box-shadow: var(--glass-shadow), var(--glass-highlight), 0 18px 50px rgba(var(--sb-rgb-black), 0.45);
}

/* Fallback ohne backdrop-filter: kräftigerer Hintergrund für Lesbarkeit */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
	.sb-glass {
		background: rgba(20, 24, 28, 0.92);
	}

	.sb-glass--accent {
		background: linear-gradient(135deg, rgba(var(--sb-rgb-primary), 0.3), rgba(20, 24, 28, 0.92));
	}
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
	.sb-glass--hover {
		transition: none;
	}

	.sb-glass--hover:hover {
		transform: none;
	}
}