/* ============================================================
   Design-Tokens — Gesundheitspraxis Ulrike Wiedmann (V2)
   Stil: warm & natuerlich (Salbeigruen / Sand / Terrakotta)
   Zentrale Steuerung von Farbe, Typo, Abstand, Form.
   ============================================================ */

:root {
	/* --- Farben: warm-natuerlich, satt & modern --- */
	--c-bg:            #F6F1E8; /* warmes Creme — Seitenhintergrund */
	--c-surface:       #FBF6EE; /* leicht — Sektionsflaechen */
	--c-surface-alt:   #FFFFFF; /* reines Weiss — Karten */

	--c-primary:       #2F6E4F; /* sattes Heilkraeuter-Gruen */
	--c-primary-dark:  #1E4A35; /* tiefes Tannengruen — Hero/Footer */
	--c-primary-soft:  #DCEADF; /* helle Gruen-Flaeche/Badges */

	--c-accent:        #D86C45; /* kraeftiges Terrakotta — CTA/Akzent */
	--c-accent-dark:   #BC5530; /* dunkler — Hover */
	--c-accent-soft:   #F8E5DB; /* helle Akzent-Flaeche */

	--c-teal:          #1B9E92; /* frischer Tuerkis — Detail-Akzent (Praxis-Identitaet) */
	--c-teal-dark:     #157C72;

	--c-text:          #2A2A24; /* kraeftiges Anthrazit — Fliesstext */
	--c-text-muted:    #5C5C50; /* gedaempft — Sekundaertext */
	--c-text-invert:   #FBF7F0; /* auf dunklen Flaechen */
	--c-border:        #E6DCCC; /* warme Trennlinien */

	/* --- Typografie --- */
	--font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-head: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--fw-light: 300;
	--fw-normal: 400;
	--fw-bold: 700;

	/* fluide Schriftgroessen (clamp: min, ideal, max) */
	--fs-xs:   0.8125rem;                       /* 13px */
	--fs-sm:   0.9375rem;                        /* 15px */
	--fs-base: 1.0625rem;                        /* 17px — angenehmes Lesen */
	--fs-lg:   1.1875rem;                         /* 19px */
	--fs-xl:   clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
	--fs-2xl:  clamp(1.75rem, 1.3rem + 2vw, 2.6rem);
	--fs-3xl:  clamp(2.3rem, 1.6rem + 3.2vw, 3.6rem);

	--lh-tight: 1.18;
	--lh-snug:  1.35;
	--lh-base:  1.65;

	/* --- Abstaende (8px-Raster) --- */
	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2rem;
	--sp-5: 3rem;
	--sp-6: 4rem;
	--sp-7: 6rem;
	--sp-8: 8rem;

	/* --- Form & Tiefe --- */
	--radius-sm:  8px;
	--radius:     16px;
	--radius-lg:  28px;
	--radius-pill: 999px;

	--shadow-sm: 0 2px 8px rgba(58, 58, 53, 0.06);
	--shadow:    0 8px 28px rgba(58, 58, 53, 0.09);
	--shadow-lg: 0 18px 48px rgba(58, 58, 53, 0.13);

	/* --- Layout --- */
	--container: 1140px;
	--container-narrow: 760px;
	--header-h: 76px;

	--transition: 0.25s ease;
}