/* ──────────────────────────────────────────────────────────────────────────
   Design-Tokens – Futter Fundgrube, Design 1
   Quelle: Figma-Datei FFG (aCKg0Kh90ZAQiwt2QfZ61w), Variablen der Frames
   158:628 / 158:2053 / 158:5397. Namen in Klammern sind die Figma-Namen.
   ────────────────────────────────────────────────────────────────────────── */

:root {
	/* Farben */
	--ffg-red: #e72e29;            /* Rot – Notification-Bar, Preis, Sale */
	--ffg-red-dark: #c4231f;       /* abgeleitet, Hover */
	--ffg-beige: #f4efe9;          /* beige – Seitengrund */
	--ffg-brown-dark: #3d322f;     /* Dunkelbraun – Primary Button, Footer */
	--ffg-brown-dark-hover: #2c2422;
	--ffg-brown-logo: #a78d7f;     /* Braun Logo – Sekundärtext, Rahmen */
	--ffg-charcoal: #333;          /* Schwarzgrau – Überschriften */
	--ffg-text: #6d758f;           /* Neutral colors/600 – Fließtext, Navigation */
	--ffg-border: #f1f3f7;         /* Neutral colors/300 */
	--ffg-border-strong: #e1e4ed;  /* Neutral colors/400 */
	--ffg-rule: #d6d6d6;           /* Trennlinie unter der Kopfzeile, Figma 158:649 */
	--ffg-white: #fff;             /* Neutral colors/100 */
	--ffg-pink: #f0d5d4;           /* Rosa */
	--ffg-green: #7abc1d;          /* Kaufen-Button der Produktkarte */
	--ffg-green-dark: #689f18;
	--ffg-star: #f5a623;           /* Bewertungssterne */

	/* Typografie */
	--ffg-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--ffg-size-eyebrow: 0.75rem;   /* Display/1 Uppercase Semi Bold, 12/18, ls 8 */
	--ffg-size-xs: 0.625rem;       /* 10 – Grundpreis, Feinsatz */
	--ffg-size-sm: 0.75rem;        /* 12 – Buttons der Produktkarte */
	--ffg-size-base: 0.875rem;     /* Display/2, 14/20 */
	--ffg-size-md: 1rem;           /* Display/3 + Paragraph/Medium, 16/22–24 */
	/* 21 im Figma-Desktop. Mobil sind 21 px für einen Einleitungssatz zu groß –
	   der Ratgeber-Lead lief damit über zehn Zeilen. Wächst ab ~1240 px auf
	   den gezeichneten Wert. */
	--ffg-size-lg: clamp(1.125rem, 1rem + 0.6vw, 1.3125rem);

	--ffg-lh-tight: 1.25;
	--ffg-lh-base: 1.5;
	--ffg-lh-relaxed: 1.6;

	--ffg-ls-eyebrow: 0.5rem;      /* 8px Laufweite der Eyebrow */

	/* Überschriften – mobil zuerst, per clamp bis Desktop */
	--ffg-h1: clamp(1.875rem, 1.25rem + 3.2vw, 3.875rem);  /* bis 62 */
	--ffg-h2: clamp(1.375rem, 1.05rem + 1.6vw, 2rem);      /* bis 32 */
	--ffg-h3: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);     /* bis 22 */

	/* Abstände – 4er-Raster */
	--ffg-space-1: 0.25rem;
	--ffg-space-2: 0.5rem;
	--ffg-space-3: 0.75rem;
	--ffg-space-4: 1rem;
	--ffg-space-5: 1.25rem;
	--ffg-space-6: 1.5rem;
	--ffg-space-8: 2rem;
	--ffg-space-10: 2.5rem;
	--ffg-space-12: 3rem;
	--ffg-space-16: 4rem;
	--ffg-space-20: 5rem;

	/* Form */
	--ffg-radius: 0.125rem;        /* 2 – Buttons, Design 1 */
	--ffg-radius-card: 0.25rem;    /* 4 – Karten */
	--ffg-shadow: 0 0.0625rem 0.25rem rgb(25 33 61 / 8%);   /* Neutral/Shadow 02 */
	--ffg-shadow-lift: 0 0.25rem 1rem rgb(25 33 61 / 12%);

	/* Layout */
	--ffg-container: 77.5rem;      /* 1240 – Inhaltsbreite aus Figma */
	--ffg-gutter: 1rem;
	--ffg-tap: 2.75rem;            /* 44 – Mindestgröße für Touch-Ziele */
}

@media (min-width: 48rem) {
	:root {
		--ffg-gutter: 2rem;
	}
}

@media (min-width: 75rem) {
	:root {
		--ffg-gutter: 7.5rem;      /* 120 – Außenabstand der Desktop-Frames */
	}
}