/**
 * Shop Core — Design-Tokens der Blöcke (Fundament).
 *
 * Die Blöcke greifen auf `--c-*`, `--s-*`, `--sf-*`, `--fs-*`, `--fw-*`, `--lh-*`,
 * `--ls-*`, `--r-*`, `--shadow-*`, `--dur-*`, `--ease` und einige Blockvariablen zu.
 * Diese Datei liefert für jede Variable einen Standardwert, damit die Blöcke in
 * JEDEM Theme fertig gestaltet erscheinen (White Label). Ein Theme überschreibt
 * die Werte, indem es dieselben Variablen selbst setzt: Die Deklarationen hier
 * liegen in der Kaskadenschicht `shop-core-tokens`; jede Deklaration außerhalb
 * dieser Schicht oder in einer später angelegten Schicht gewinnt (CSS Cascade
 * Layers: zuerst angelegte Schicht = niedrigste Priorität).
 */
@layer shop-core-tokens {
	:root {
		/* Farben */
		--c-fg: #0f1114;
		--c-fg-muted: #565c67;
		--c-ink: #0f1114;
		--c-bg: #ffffff;
		--c-bg-soft: #f7f8fa;
		--c-muted: #f0f2f5;
		--c-card: #ffffff;
		--c-border: #eceef2;
		--c-border-2: #e1e4ea;
		--c-primary: #e10600; /* Weiß auf primary 4,97:1 (WCAG 2.2 SC 1.4.3) */
		--c-primary-fg: #ffffff;
		--c-primary-hover: #c4081b;
		--c-primary-soft: #fde8eb;
		--c-primary-text: #c4081b; /* Rot als Text: 6,2:1 auf Weiß (Marken-Rot nur 4,45:1) */
		--c-destructive-text: #c4081b;
		--c-success: #019136;
		--c-success-soft: #eaf7ef;
		--c-success-text: #0b6b2c; /* Grün als Text: 6,7:1 auf Weiß */
		--c-leaf: #019136;
		--c-leaf-soft: #eaf7ef;
		--c-destructive: #e10600;
		--c-destructive-soft: #fde8eb;
		--c-warning: #f9bf3b;
		--c-warning-fg: #8a6d1f;
		--c-info: #3a3f47;

		/* Abstände (4px-Basis) */
		--s-0: 0;
		--s-1: 0.25rem;
		--s-2: 0.5rem;
		--s-3: 0.75rem;
		--s-4: 1rem;
		--s-5: 1.5rem;
		--s-6: 2rem;
		--s-7: 3rem;
		--s-8: 4rem;
		--s-9: 6rem;
		--s-10: 8rem;

		/* Fluide Abstände */
		--sf-3: clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
		--sf-4: clamp(1rem, 0.8rem + 1vw, 1.5rem);
		--sf-5: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
		--sf-6: clamp(2rem, 1.6rem + 2vw, 3rem);
		--sf-7: clamp(2.5rem, 2rem + 2.5vw, 4rem);
		--sf-8: clamp(3rem, 2.4rem + 3vw, 5rem);

		/* Radien */
		--r-xs: 6px;
		--r-sm: 8px;
		--r-md: 12px;
		--r-lg: 14px;
		--r-xl: 16px;
		--r-2xl: 20px;
		--r-full: 999px;

		/* Schatten */
		--shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
		--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 16px 32px -20px rgba(16, 24, 40, 0.18);
		--shadow-md: 0 1px 2px rgba(16, 24, 40, 0.08), 0 18px 40px -24px rgba(16, 24, 40, 0.28);
		--shadow-lg: 0 30px 70px -30px rgba(16, 24, 40, 0.4);

		/* Schriftgrößen */
		--fs-3xs: 10px;
		--fs-2xs: 11px;
		--fs-xs: 12px;
		--fs-sm: 13px;
		--fs-base: 14px;
		--fs-md: 15px;
		--fs-lg: 17px;
		--fs-xl: 22px;
		--fs-2xl: 28px;
		--fs-3xl: clamp(28px, 2.4vw + 18px, 38px);
		--fs-4xl: clamp(36px, 4vw + 20px, 64px);
		--fs-5xl: clamp(36px, 4vw + 20px, 64px);
		--fs-6xl: clamp(36px, 4vw + 20px, 64px);

		/* Zeilenhöhen, Schriftschnitte, Laufweite */
		--lh-none: 1;
		--lh-tight: 1.12;
		--lh-snug: 1.3;
		--lh-normal: 1.6;
		--lh-relaxed: 1.75;
		--fw-regular: 400;
		--fw-medium: 500;
		--fw-semibold: 600;
		--fw-bold: 700;
		--fw-black: 800;
		--ls-tighter: -0.035em;
		--ls-tight: -0.03em;
		--ls-normal: 0;
		--ls-wide: 0.02em;
		--ls-wider: 0.04em;

		/* Bewegung */
		--ease: cubic-bezier(0.4, 0, 0.2, 1);
		--dur-fast: 120ms;
		--dur-base: 180ms;
		--dur-slow: 280ms;

		/* Blockvariablen */
		--card-min: 260px;
		--card-pad: var(--sf-4);
		--card-pad-sm: var(--s-4);
		--z-modal: 1000;
		--shop-hero-aspect: 16 / 7;
		--shop-hero-aspect-mob: 4 / 5;
		--shop-trust-speed: 26s;
	}
}