/* =====================================================================
   GrowCologne – Design-Tokens (nur Variablen)
   Quelle: content/pages/dummies/v4-klar-mit-stickern.html (Dummy `--foo` → `--gc-foo`).
   Reihenfolge im Frontend: Elementor-Kit → tokens.css → layout.css → components.css (→ woo.css).

   Warum `body` und nicht `:root`: Elementor definiert `--e-global-color-*` am <body>
   (`.elementor-kit-N`). Eine Variable, die auf `:root` steht, kann die Kit-Werte nicht sehen –
   sie würde immer auf den Fallback zurückfallen. Deshalb stehen alle Tokens auf `body`.
   Folge: auf <html> selbst sind die Tokens nicht verfügbar (nur ab <body> abwärts).

   Farben kommen aus dem Kit, der Dummy-Wert ist der Fallback (falls das Kit die ID nicht hat).
   ===================================================================== */
body {
	/* Farbe: Kit-Farbe (ID) mit Dummy-Wert als Fallback */
	--gc-gruen: var(--e-global-color-primary, #01785C);
	--gc-gruen-d: var(--e-global-color-gcgruend, #01654D);
	--gc-nacht: var(--e-global-color-secondary, #073B2E);
	--gc-nacht-2: var(--e-global-color-gcnacht2, #0C4A3A);
	--gc-mint: var(--e-global-color-gcmint, #F1F8F9);
	--gc-salbei: var(--e-global-color-gcsalbei, #D3EDE3);
	--gc-beige: var(--e-global-color-gcbeige, #E7DDC4);
	--gc-neon: var(--e-global-color-accent, #5EEAD4);
	--gc-ink: var(--e-global-color-text, #073B2E);
	--gc-ink-2: var(--e-global-color-gcink2, #3B5A4F);
	--gc-on-dark: var(--e-global-color-gcondark, #DDF1E9);
	--gc-on-dark-2: var(--e-global-color-gcondark2, #B9D3C9);

	/* Farbe ohne Kit-Eintrag: LED-Glühen, Linien, Schatten (grün getönt) */
	--gc-led-a: rgba(236, 132, 250, .95);
	--gc-led-b: rgba(176, 38, 184, .5);
	--gc-line: rgba(7, 59, 46, .13);
	--gc-line-d: rgba(255, 255, 255, .14);
	--gc-sh: 0 10px 20px -12px rgba(7, 59, 46, .45), 0 1px 3px rgba(7, 59, 46, .1);
	--gc-sh-lg: 0 24px 40px -24px rgba(7, 59, 46, .55), 0 2px 6px rgba(7, 59, 46, .1);

	/* Radius-Skala. Wirksamer Wert im Dummy: die Sticker-Schicht am Ende des <style>-Blocks
	   überschreibt die K2-Grundwerte 4/7/10/12 mit 8/14/22/28 (= Doku 04). Pillen: 999px. */
	--gc-r-xs: 8px;
	--gc-r-s: 14px;
	--gc-r-m: 22px;
	--gc-r-l: 28px;

	/* Viewport-System: Rahmen 2000, Inhalt 1440 inkl. Rand, Rand 22/32 */
	--gc-frame: 2000px;
	--gc-wrap: 1440px;
	--gc-gut: 22px;

	/* Abstände: 8er-Raster, fluid bis 2000px */
	--gc-s1: 8px;
	--gc-s2: 16px;
	--gc-s3: 24px;
	--gc-s4: 32px;
	--gc-s5: 48px;
	--gc-s6: 64px;
	--gc-gap: clamp(12px, .5rem + .9vw, 24px);
	--gc-cgap: clamp(24px, 1rem + 2.6vw, 72px);
	--gc-sec: clamp(4rem, 2.5rem + 5vw, 9rem);

	/* Typo (Schriften lokal: assets/css/fonts.css) */
	--gc-sans: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--gc-hand: "Protest Riot", "Poppins", system-ui, sans-serif;
	--gc-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
	--gc-fs-body: clamp(1rem, .9rem + .18vw, 1.125rem);
	--gc-fs-lead: clamp(1.0625rem, 1rem + .3vw, 1.3125rem);
	--gc-fs-h1: clamp(2.75rem, 1.6rem + 5.2vw, 6.25rem);
	--gc-fs-h2: clamp(2rem, 1.2rem + 2.9vw, 4.75rem);
	--gc-fs-h3: clamp(1.2rem, 1rem + .55vw, 1.6rem);

	/* Leisten: Topbar, Header, Aktionsleiste (mobil) */
	--gc-tb: 40px;
	--gc-hdr: 64px;
	--gc-abh: 80px;

	/* Skyline: Höhe = 15 % der Rahmenbreite, mind. 92px; Sockel = 13,33 % */
	--gc-sky-h: max(92px, min(100vw, var(--gc-frame)) * .15);

	--gc-ease: cubic-bezier(.2, .8, .2, 1);
}

@media (min-width: 721px) {
	body {
		--gc-gut: 32px;
	}
}

@media (min-width: 1024px) {
	body {
		--gc-tb: 44px;
		--gc-hdr: 72px;
	}
}

@media (min-width: 1440px) {
	body {
		--gc-fs-h1: clamp(6.25rem, 4rem + 2.5vw, 7.125rem);
	}
}

/* Laptop-Höhen: H1 kleiner, damit der Hero in den ersten Screen passt (muss nach der 1440er-Regel stehen) */
@media (min-width: 1024px) and (max-height: 800px) {
	body {
		--gc-fs-h1: clamp(3.5rem, 1.4rem + 5vw, 5.6rem);
	}
}

@media (min-width: 1024px) and (max-height: 720px) {
	body {
		--gc-fs-h1: clamp(3.25rem, 1.2rem + 4.7vw, 5rem);
	}
}