/*
 * Design-Tokens – der "rote Faden" des Themes.
 * Alle Werte zentral; Widgets/Templates referenzieren nur diese Variablen.
 */

:root {
	/* --- Farben --- */
	--sb-bg: #0c1016; /* identisch zur Live-Seite (--bg) */
	--sb-bg-elevated: #0b0e11;

	/* Marken-Neonfarben (identisch zu design-system.css) */
	--pink: #ff00aa;
	--cyan: #00fff1;
	--mint: #46fcb4;
	--orange: #ff6e48;
	--violet: #a855f7;
	--sb-white: #ffffff;
	--sb-color-primary: #6ec1e4;
	--sb-color-secondary: #54595f;
	/* Im Original ist Fließtext auf Schwarz fast weiß (#FFFFFF / #FFFFFFFA). */
	--sb-color-text: rgba(255, 255, 255, 0.92);
	--sb-color-muted: #9aa0a6;
	--sb-color-accent: #61ce70;
	--sb-color-accent-hover: #4fb95e;
	--sb-color-heading: #ffffff;

	/* RGB-Bausteine (für rgba-Glas/Schatten) */
	--sb-rgb-white: 255, 255, 255;
	--sb-rgb-black: 0, 0, 0;
	--sb-rgb-primary: 110, 193, 228;
	--sb-rgb-accent: 97, 206, 112;

	/* --- Marken-Gradienten & Glas-Tönfarben --- */
	--sb-gradient-text: linear-gradient(90deg, #e83e8c 0%, #9b51e0 38%, #6ec1e4 72%, #ffffff 100%);
	--sb-gradient-brand: linear-gradient(135deg, #e83e8c 0%, #9b51e0 50%, #6ec1e4 100%);
	--sb-gradient-pink: linear-gradient(135deg, #e83e8c 0%, #9b51e0 100%);
	--sb-gradient-teal: linear-gradient(135deg, #16a085 0%, #1abc9c 100%);

	--sb-tint-pink: #c724b1;
	--sb-tint-green: #16a085;
	--sb-tint-blue: #4158d0;
	--sb-tint-purple: #9b51e0;
	--sb-tint-amber: #ff6900;

	/* Ambient-Hintergrund der Seite (Teal-/Violett-Glow auf Schwarz) */
	--sb-ambient:
		radial-gradient(120% 80% at 85% 20%, rgba(22, 160, 133, 0.28) 0%, transparent 55%),
		radial-gradient(100% 90% at 0% 30%, rgba(155, 81, 224, 0.22) 0%, transparent 50%);

	/* --- Typografie --- */
	--sb-font: "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--sb-fw-light: 300;
	--sb-fw-normal: 400;
	--sb-fw-medium: 500;
	--sb-fw-semibold: 600;
	--sb-fw-bold: 700;
	--sb-fw-black: 900;

	/* Fluid-Typografie (mobil → desktop) */
	--sb-fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--sb-fs-sm: 0.875rem;
	--sb-fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
	--sb-fs-h1: clamp(2.25rem, 1.6rem + 3.2vw, 3.625rem);
	--sb-fs-h2: clamp(1.75rem, 1.4rem + 1.8vw, 2.625rem);
	--sb-fs-h3: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
	--sb-fs-h4: clamp(1.2rem, 1.1rem + 0.5vw, 1.375rem);
	--sb-fs-h5: 1.125rem;
	--sb-fs-h6: 1rem;
	--sb-lh-tight: 1.15;
	--sb-lh-normal: 1.6;

	/* --- Layout & Abstände --- */
	--sb-content: 1140px;
	--sb-wide: 1350px;
	--sb-narrow: 800px;
	--sb-gutter: clamp(1rem, 0.6rem + 2vw, 2.25rem);

	--sb-space-xs: 0.5rem;
	--sb-space-sm: 1rem;
	--sb-space-md: 1.5rem;
	--sb-space-lg: 2.25rem;
	--sb-space-xl: 3.5rem;
	--sb-space-2xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);

	--sb-radius-sm: 10px;
	--sb-radius: 18px;
	--sb-radius-lg: 28px;
	--sb-radius-pill: 999px;

	--sb-header-h: 84px;
	--sb-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

	/* --- Glass-Defaults (Basis) --- */
	--glass-bg: rgba(var(--sb-rgb-white), 0.06);
	--glass-blur: 14px;
	--glass-saturate: 130%;
	--glass-border: 1px solid rgba(var(--sb-rgb-white), 0.12);
	--glass-radius: var(--sb-radius);
	--glass-shadow: 0 8px 32px rgba(var(--sb-rgb-black), 0.35);
	--glass-highlight: inset 0 1px 0 rgba(var(--sb-rgb-white), 0.08);
}