/*
 * Site Core - Design Tokens (spine-help.de / stage.spine-help.de), Version 1, Stand 2026-10-05.
 * Quelle der Wahrheit fuer ALLE Farben, Radien, Schatten, Abstaende und Breiten.
 * Regel (wie ferienwohnung-nittendorf.de): keine Hex-/Pixelwerte in components.css/utilities.css
 * oder im Seiteninhalt - dort nur diese Variablen. Das Customizer-"Zusaetzliche CSS" bleibt leer.
 *
 * Blocksy-Palette (Customizer -> Farben) ist nur der technische Adapter und enthaelt dieselben
 * Werte: Color 1 = primary, 2 = secondary, 3 = heading, 4 = text, 5 = tint, 6 = surface,
 * 7 = background, 8 = accent.
 *
 * Typografie (H1-H6, Body) besitzt Blocksy (Customizer), nicht dieses Plugin.
 * Breakpoints sind keine Tokens (Media Queries lesen keine Custom Properties): Blocksy-Werte
 * Mobile bis 689.98px, Tablet 690-999.98px, Desktop ab 1000px.
 */
:root {
	/* Farben */
	--color-primary: #0f6e56;
	--color-secondary: #0ba885;
	--color-heading: #222222;
	--color-text: #555555;
	--color-tint: #e1f5ee;
	--color-surface: #ffffff;
	--color-background: #F2F5F7;
	--color-accent: #ffcd57;
	--color-on-primary: #ffffff;

	/* Spacing */
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 40px;
	--space-xl: 64px;
	--space-2xl: 96px;

	/* Breiten */
	--width-text: 760px;
	--width-content: 1080px;

	/* Radien */
	--radius-small: 12px;
	--radius-medium: 18px;
	--radius-large: 28px;
	--radius-card: 32px;
	--radius-xl: 36px;
	--radius-panel: 48px;
	--radius-pill: 999px;

	/* Schatten */
	--shadow-soft: 0 2px 14px color-mix(in srgb, var(--color-primary) 8%, transparent);
	--shadow-card: 0 10px 28px color-mix(in srgb, var(--color-primary) 12%, transparent);
	--shadow-hover: 0 16px 34px color-mix(in srgb, var(--color-primary) 20%, transparent);
	--shadow-image: 0 12px 32px color-mix(in srgb, var(--color-primary) 18%, transparent);
	--shadow-header: 0 10px 30px rgba(15, 65, 50, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.08);

	/* Bewegung */
	--ease-header: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}