/**
 * tokens.css — Design-Tokens für Gebra-Tech, exakt aus design/ extrahiert
 * (design/_ds/gebra-tech-design-system-…/tokens/*.css).
 *
 * Zweistufig: 1) Basispalette (--gebra-…), 2) semantische Aliases.
 * Widgets referenzieren AUSSCHLIESSLICH Stufe 2 (Ausnahme wie im Design:
 * --gebra-ink-300 / --gebra-violet-300 auf invertierten Flächen).
 *
 * WICHTIG (Stolperfalle #2): Tokens auf `body` definieren, NICHT auf `:root` —
 * Elementor-Kit-Werte liegen auf body.elementor-kit-{id}.
 */

/* ── Webfonts (selbst gehostet, DSGVO — kein Google-Request) ─────────────
   Variable Fonts (wght-Achse), latin-Subset. */

@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url('../fonts/space-grotesk-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url('../fonts/ibm-plex-sans-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
	/* ── 1) Basispalette ──────────────────────────────────────────────── */
	/* Anthrazit / Schwarzblau */
	--gebra-ink-900: var(--e-global-color-gebraink, #0D1220);
	--gebra-ink-700: #222B40;
	--gebra-ink-500: #47536D;
	--gebra-ink-300: #939DB4;
	/* Kühle Neutrals */
	--gebra-neutral-000: #FFFFFF;
	--gebra-neutral-050: var(--e-global-color-gebrabg, #F5F7FB);
	--gebra-neutral-100: #ECEFF6;
	--gebra-neutral-200: #DCE1EC;
	--gebra-neutral-400: #AEB7C9;
	--gebra-neutral-600: #6B7690;
	/* Akzent: Blau-Violett */
	--gebra-violet-050: #F1EFFF;
	--gebra-violet-100: #E3DFFF;
	--gebra-violet-300: #A89DFF;
	--gebra-violet-500: var(--e-global-color-primary, #5B4DF5);
	--gebra-violet-600: #4B3CE0;
	--gebra-violet-700: #3D2FC2;

	/* ── 2) Semantische Aliases (zeigen NUR auf die Basispalette) ─────── */
	--bg-page: var(--gebra-neutral-050);
	--surface-card: var(--gebra-neutral-000);
	--surface-sunken: var(--gebra-neutral-100);
	--surface-invert: var(--gebra-ink-900);
	--text-heading: var(--gebra-ink-900);
	--text-body: var(--gebra-ink-700);
	--text-muted: var(--gebra-ink-500);
	--text-invert: var(--gebra-neutral-050);
	--text-on-accent: var(--gebra-neutral-000);
	--accent-primary: var(--gebra-violet-500);
	--accent-primary-hover: var(--gebra-violet-600);
	--accent-primary-press: var(--gebra-violet-700);
	--accent-soft: var(--gebra-violet-050);
	--accent-ring: var(--gebra-violet-300);
	--border-hairline: var(--gebra-neutral-200);
	--border-strong: var(--gebra-neutral-400);
	/* Borders auf invertierten Flächen (Conversion/Footer, aus dem Design) */
	--border-invert: rgba(245, 247, 251, 0.18);
	--border-invert-soft: rgba(245, 247, 251, 0.12);

	/* ── Typografie ───────────────────────────────────────────────────── */
	--font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
	--display-weight: 600;
	--display-weight-strong: 700;
	--display-tracking: -0.02em;
	--display-leading: 1.06;
	--font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
	--body-weight: 400;
	--body-leading: 1.55;
	--text-hero: 4rem;
	--text-h1: 2.75rem;
	--text-h2: 2rem;
	--text-h3: 1.375rem;
	--text-lead: 1.125rem;
	--text-base: 1rem;
	--text-small: 0.875rem;
	--text-micro: 0.75rem;
	--tracking-caps: 0.08em;

	/* ── Spacing / Radius / Layout ────────────────────────────────────── */
	--space-3xs: 2px;
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-sm: 12px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;
	--space-3xl: 64px;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-pill: 999px;
	--max-content: 1160px;
	--section-y: calc(var(--space-3xl) + var(--space-xl)); /* 96px */
	--header-h: 72px;

	/* ── Motion-Tokens ────────────────────────────────────────────────── */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dur-fast: 120ms;
	--dur-base: 200ms;
	--dur-slow: 360ms;
	--lift-hover: translateY(-2px);
	--scale-press: scale(0.97);

	/* ── Elevation (akzentfarben getönt, nie neutrales Schwarz) ───────── */
	--shadow-xs: 0 1px 2px rgba(61, 47, 194, 0.08);
	--shadow-sm: 0 2px 8px -2px rgba(61, 47, 194, 0.12);
	--shadow-md: 0 8px 20px -6px rgba(61, 47, 194, 0.16);
	--shadow-lg: 0 20px 48px -12px rgba(61, 47, 194, 0.24);
	--shadow-focus: 0 0 0 3px rgba(91, 77, 245, 0.25);
}