/**
 * Design System — Design Tokens
 * Zentrale Custom Properties. Single source of truth für das gesamte Theme.
 */

/* ----------------------------------------------------------------
 * Hausschrift "Block W1G" (Überschriften / Plakat-Look).
 * Font-Dateien in assets/fonts/ ablegen (woff2 + woff). Bis dahin greift
 * automatisch der Fallback "Fredoka". Siehe assets/fonts/README.txt.
 * -------------------------------------------------------------- */
@font-face {
	font-family: "Block W1G";
	src: url("../fonts/BlockW1G-Bold.woff2") format("woff2"),
	     url("../fonts/BlockW1G-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Block W1G";
	src: url("../fonts/BlockW1G-Regular.woff2") format("woff2"),
	     url("../fonts/BlockW1G-Regular.woff") format("woff");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

:root {
	/* ---- Farben ---- */
	--kh-navy: #16263a;
	--kh-navy-900: #0f1c2b;
	--kh-navy-700: #1d3147;
	--kh-navy-500: #28415c;
	--kh-gold: #c19e4e;
	--kh-gold-light: #d8bd78;
	--kh-cream: #f0e9d6;
	--kh-cream-soft: #f6f1e4;
	--kh-white: #ffffff;
	--kh-ink: #11202f;
	--kh-muted: rgba(255, 255, 255, 0.72);
	--kh-border: rgba(255, 255, 255, 0.14);

	/* ---- Typografie ---- */
	--kh-font-display: "Block W1G", "Fredoka", "Trebuchet MS", system-ui, sans-serif;
	--kh-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--kh-font-script: "Caveat", "Segoe Script", cursive;

	--kh-fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--kh-fs-h1: clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem);
	--kh-fs-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.25rem);
	--kh-fs-h3: clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
	--kh-fs-h4: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	--kh-lh-tight: 1.05;
	--kh-lh-body: 1.65;

	/* ---- Abstände (8px Raster) ---- */
	--kh-space-1: 0.25rem;
	--kh-space-2: 0.5rem;
	--kh-space-3: 1rem;
	--kh-space-4: 1.5rem;
	--kh-space-5: 2rem;
	--kh-space-6: 3rem;
	--kh-space-7: 4rem;
	--kh-space-8: 6rem;
	--kh-space-9: 8rem;

	/* ---- Radien & Schatten ---- */
	--kh-radius: 14px;
	--kh-radius-lg: 28px;
	--kh-radius-pill: 999px;
	--kh-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
	--kh-shadow-soft: 0 10px 30px -16px rgba(0, 0, 0, 0.45);

	/* ---- Layout ---- */
	--kh-container: 1200px;
	--kh-container-narrow: 820px;
	--kh-header-height: 104px;

	/* ---- Motion ---- */
	--kh-transition: 0.25s ease;
}