/* ==========================================================================
   Websmarty – Design-Tokens
   Schrift lokal (DSGVO), Farben, Typografie, Abstände, Radien, Bewegung
   ========================================================================== */

/*
 * Schriften von Fontshare (ITF Free Font License, Selbst-Hosting erlaubt):
 * Cabinet Grotesk für Überschriften, Switzer für Text und Oberfläche.
 * Nur für die eigene Website nutzen, nicht weitergeben (siehe assets/fonts/LICENSE).
 */
@font-face {
	font-family: "Cabinet Grotesk";
	src: url("../fonts/cabinet-grotesk-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Switzer";
	src: url("../fonts/switzer-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Metrisch angeglichene Fallbacks gegen Layout-Sprünge beim Font-Swap */
@font-face {
	font-family: "Switzer Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 101%;
	ascent-override: 94%;
	descent-override: 24%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Cabinet Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 97%;
	ascent-override: 98%;
	descent-override: 26%;
	line-gap-override: 0%;
}

:root {
	color-scheme: dark;

	/* Farben ------------------------------------------------------------- */
	--c-bg: #0b0d0c;
	--c-bg-raised: #101311;
	--c-surface: #151916;
	--c-surface-2: #1b201c;
	--c-surface-3: #232924;

	--c-line: rgb(237 239 234 / 0.08);
	--c-line-strong: rgb(237 239 234 / 0.14);
	--c-line-hover: rgb(237 239 234 / 0.24);
	--c-highlight: rgb(255 255 255 / 0.05); /* Innenkante oben (Lichtkante) */

	--c-text: #edefea;          /* 16.8:1 auf --c-bg */
	--c-text-2: #a6ada7;        /*  8.5:1 auf --c-bg */
	--c-text-3: #848c85;        /*  5.6:1 auf --c-bg, ≥4.8:1 auf allen Flächen (AA) */

	--c-accent: #c8f25a;        /* Lime – sparsam: CTAs, Hervorhebungen, Icons */
	--c-accent-hover: #d6f77f;
	--c-accent-ink: #0b0d0c;    /* Text auf Lime: 15.1:1 */
	--c-accent-soft: rgb(200 242 90 / 0.1);
	--c-accent-line: rgb(200 242 90 / 0.32);
	--c-accent-glow: rgb(200 242 90 / 0.12);

	--c-overlay: rgb(5 7 6 / 0.6);
	--c-shadow: rgb(2 4 3 / 0.55);   /* Schatten im Farbton des Hintergrunds */
	--c-danger: #ff8a7a;

	/* Schriften ---------------------------------------------------------- */
	--ff-display: "Cabinet Grotesk", "Cabinet Fallback", system-ui, sans-serif;
	--ff-sans: "Switzer", "Switzer Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Fluide Typo-Skala (360px → 1440px) --------------------------------- */
	--fs-xs: 0.8125rem;                                    /* 13 */
	--fs-sm: 0.875rem;                                     /* 14 */
	--fs-base: clamp(1rem, 0.967rem + 0.15vw, 1.0625rem);  /* 16 → 17 */
	--fs-lg: clamp(1.0625rem, 0.98rem + 0.37vw, 1.3125rem);/* 17 → 21 */
	--fs-h5: clamp(1.0625rem, 1rem + 0.28vw, 1.25rem);     /* 17 → 20 */
	--fs-h4: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);     /* 20 → 24 */
	--fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);      /* 24 → 34 */
	--fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);          /* 32 → 56 */
	--fs-h1: clamp(2.375rem, 1.6rem + 3.4vw, 4.75rem);     /* 38 → 76 */
	--fs-display: clamp(2.75rem, 1.7rem + 4.6vw, 6rem);    /* 44 → 96 (Obergrenze 6rem) */

	--lh-tight: 1.05;
	--lh-snug: 1.18;
	--lh-body: 1.6;

	--tracking-tight: -0.035em;
	--tracking-snug: -0.02em;
	--tracking-floor: -0.04em; /* engste erlaubte Laufweite */

	/* Abstände (4px-Raster) ---------------------------------------------- */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.25rem;
	--s-6: 1.5rem;
	--s-8: 2rem;
	--s-10: 2.5rem;
	--s-12: 3rem;
	--s-16: 4rem;
	--s-20: 5rem;
	--s-24: 6rem;

	--section-y: clamp(5rem, 3rem + 8vw, 10rem);
	--section-y-sm: clamp(3.5rem, 2.2rem + 4.5vw, 6rem);

	/* Layout ------------------------------------------------------------- */
	--container: 77.5rem;      /* 1240px */
	--container-narrow: 48rem; /*  768px */
	--gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem);
	--header-h: 4rem;          /* Höhe der schwebenden Kopfleiste */
	--header-gap: 0.625rem;    /* Abstand der Kopfleiste zum oberen Rand */

	/* Radien – Regel:
	   Interaktiv (Buttons, Chips, Kopfleiste)  → pill
	   Felder & Kacheln                          → --r-md
	   Container (Karten, Bilder)                → --r-lg innen / --r-xl außen (Doppelrand) */
	--r-xs: 6px;
	--r-sm: 10px;
	--r-md: 14px;
	--r-lg: 20px;
	--r-xl: 26px;
	--r-pill: 999px;
	--bezel: 5px;              /* Innenabstand des Doppelrands */

	/* Ebenen ------------------------------------------------------------- */
	--z-dim: 90;
	--z-drawer: 95;
	--z-header: 100;
	--z-skip: 1000;

	/* Tiefe -------------------------------------------------------------- */
	--shadow-float: 0 1px 0 var(--c-highlight) inset, 0 12px 32px -12px var(--c-shadow);
	--shadow-pop: 0 1px 0 var(--c-highlight) inset, 0 28px 64px -24px var(--c-shadow), 0 10px 24px -12px var(--c-shadow);

	/* Bewegung ----------------------------------------------------------- */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--dur-press: 140ms;
	--dur-fast: 160ms;
	--dur-base: 220ms;
	--dur-reveal: 700ms;
}

@media (min-width: 80em) {
	:root {
		--header-h: 4.25rem;
		--header-gap: 0.875rem;
	}
}