/* telli-design — gemeinsame Design-Tokens für telli.share / telli.hub / telli.watch.
   Diese Datei ist die einzige Quelle der Wahrheit für Farben, Abstände,
   Typo-Skala und Fonts. Produkt-eigenes CSS überschreibt hier nichts,
   sondern baut nur darauf auf (eigene Klassen, eigene Komponenten). */

@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/SpaceGrotesk.ttf") format("truetype");
	font-weight: 300 700;
	font-display: swap;
}

/* Space Grotesk selbst hat keine kyrillischen Glyphen. Zweite @font-face
   unter demselben Familiennamen, nur für den kyrillischen Unicode-Bereich:
   der Browser zieht pro Glyph automatisch die passende Quelle, Latein und
   Kyrillisch landen dadurch im selben Fließtext ohne jeden Sprachwechsel
   in CSS/JS. Manrope ist von der Anmutung (geometrisch, niedriger Kontrast)
   bewusst nah an Space Grotesk gewählt. */
@font-face {
	font-family: "Space Grotesk";
	src: url("../fonts/Manrope.ttf") format("truetype");
	font-weight: 300 700;
	font-display: swap;
	unicode-range: U+0400-04FF, U+0500-052F, U+1C80-1C88, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

:root {
	--canvas: #1c1e20;
	--canvas-deep: #141516;
	--blob-slate: #2b2f33;
	--blob-copper: #b5603c;
	--blob-sage: #7c8b6f;
	--accent: #d98b5f;
	--accent-strong: #e8a06f;
	--text: #ede7dd;
	--text-dim: #a9a39a;
	--danger: #d6483a;
	--danger-strong: #f3b6ac;

	--glass-fill: rgba(255, 255, 255, 0.07);
	--glass-fill-strong: rgba(255, 255, 255, 0.1);
	--glass-border: rgba(255, 255, 255, 0.16);
	--glass-border-active: rgba(217, 139, 95, 0.55);

	--radius-lg: 28px;
	--radius-md: 16px;
	--radius-sm: 10px;

	/* Abstandsraster: überall nur diese Werte verwenden, keine Zwischenwerte. */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-12: 48px;
	--space-16: 64px;

	/* Typo-Skala: fünf Stufen, sonst nichts. */
	--text-xs: 0.8125rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.25rem;
	--text-xl: 1.75rem;

	--blob-duration-a: 38s;
	--blob-duration-b: 46s;
	--blob-duration-c: 52s;

	--ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-settle: cubic-bezier(0.22, 1, 0.36, 1);

	--mx: 0px;
	--my: 0px;
}

/* Zahlen (Größen, Prozente, Zähler, Auflösungen) nie springend darstellen. */
.num {
	font-variant-numeric: tabular-nums;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
}

body {
	background: var(--canvas);
	color: var(--text);
	font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a {
	color: var(--accent-strong);
}