/**
 * FERNIVA – Designsystem-Tokens
 *
 * Einzige Quelle der Wahrheit für Farben, Typografie, Abstände und Formen.
 * Die globalen Elementor-Farben/-Schriften werden aus diesen Werten gespiegelt
 * (Wohnmobil → Setup → "Designsystem übertragen").
 *
 * Dokumentation: /DESIGN-SYSTEM.md
 */

:root {
	/* ---------- Marke: Primär (Anthrazit, Sand) ---------- */
	--fv-ink: #23262a;         /* Anthrazit – Primärfarbe, Text, Buttons */
	--fv-ink-deep: #16181b;    /* dunkle Sektionen, Footer, Hero-Verlauf */
	--fv-ink-soft: #3a3f45;    /* Hover, Rahmen auf Dunkel */
	--fv-sand: #e4d9c6;        /* Sand – zweite Primärfarbe, Flächen */
	--fv-sand-light: #f3ede3;  /* Sektionshintergründe */
	--fv-offwhite: #faf8f4;    /* Standard-Seitenhintergrund */

	/* ---------- Marke: Sekundär (Salbeigrün, Kupfer) ---------- */
	--fv-sage: #8fa391;        /* Dekoration, Akzent auf dunklem Grund */
	--fv-sage-ink: #4e6152;    /* salbeifarbener Text auf hellem Grund */
	--fv-copper: #b0703c;      /* Dekoration: Linien, Icons, Text ab 24px */
	--fv-copper-ink: #8a5228;  /* Text unter 24px, Akzent-Buttons */

	/* ---------- Funktion ---------- */
	--fv-muted: #6b7075;
	--fv-muted-on-dark: #c3c8c4;
	--fv-line: #e3dbcd;
	--fv-line-dark: #34383d;
	--fv-success: #4e6152;
	--fv-busy: #9a3f33;
	--fv-warning: #8a6a1f;
	--fv-focus: #0b63c5;
	--fv-white: #ffffff;

	/* ---------- Semantik ---------- */
	--fv-bg: var(--fv-offwhite);
	--fv-bg-alt: var(--fv-sand-light);
	--fv-text: var(--fv-ink);
	--fv-heading: var(--fv-ink);

	/* ---------- Typografie ---------- */
	--fv-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--fv-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;

	--fs-display: clamp(2.75rem, 1.5rem + 4.2vw, 5rem);
	--fs-h1: clamp(2.4rem, 1.6rem + 2.8vw, 3.9rem);
	--fs-h2: clamp(1.95rem, 1.4rem + 1.9vw, 3rem);
	--fs-h3: clamp(1.4rem, 1.15rem + 0.9vw, 1.95rem);
	--fs-h4: 1.2rem;
	--fs-lead: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
	--fs-body: 1.0625rem;
	--fs-small: 0.9375rem;
	--fs-eyebrow: 0.75rem;

	--lh-tight: 1.08;
	--lh-heading: 1.18;
	--lh-body: 1.72;

	--fv-measure: 68ch;

	/* ---------- Raster & Abstände ---------- */
	--fv-container: 1240px;
	--fv-container-wide: 1440px;
	--fv-container-narrow: 760px;
	--fv-gutter: clamp(1.25rem, 5vw, 4rem);
	--fv-section-y: clamp(4rem, 9vw, 9rem);

	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-10: 8rem;
	--sp-11: 10rem;

	/* ---------- Formen ---------- */
	--r-sm: 4px;
	--r-md: 10px;
	--r-lg: 20px;
	--r-xl: 32px;
	--r-full: 999px;

	--shadow-sm: 0 1px 2px rgba(22, 24, 27, 0.06);
	--shadow-md: 0 12px 32px -12px rgba(22, 24, 27, 0.18);
	--shadow-lg: 0 32px 64px -24px rgba(22, 24, 27, 0.28);

	/* ---------- Bewegung ---------- */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 220ms;
	--dur-slow: 600ms;

	/* ---------- Layout-Konstanten ---------- */
	--fv-header-h: 84px;
	--fv-header-h-scrolled: 68px;
	--fv-mobile-cta-h: 64px;
	--fv-z-header: 900;
	--fv-z-nav: 950;
	--fv-z-cta: 800;
	--fv-z-lightbox: 1000;
}

@media (max-width: 1024px) {
	:root {
		--fv-header-h: 68px;
		--fv-header-h-scrolled: 60px;
	}
}

/* Bewegungsreduktion global respektieren. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur: 0.01ms;
		--dur-slow: 0.01ms;
	}
}