/* ==========================================================================
   tokens.css – Zentrale Design-Variablen ("Single Source of Truth")
   --------------------------------------------------------------------------
   Alle gestalterischen Grundwerte des Themes an EINER Stelle:
   Farben (aus dem Logo abgeleitet), Typografie und ein 4px-Spacing-System.
   Komponenten greifen ausschließlich auf diese Variablen zu – keine
   "rohen" Hex-Werte oder Pixelwerte direkt in den Bausteinen.
   ========================================================================== */

:root {

	/* ----------------------------------------------------------------------
	   FARBEN – Gestaltung „Holz & Licht“
	   Zartes Rosé als Naturton (Wunsch Kathrin), Honig vom Eichenboden der
	   Praxis als Akzent, warmes Braun für Links und Buttons.
	   Alle Text-/Flächen-Paare sind WCAG-AA-geprüft.
	   ---------------------------------------------------------------------- */

	--color-honey:          #c08b57; /* Akzent: Linien, Icons                */
	--color-primary:        #c08b57;
	--color-primary-strong: #82532a; /* interaktiv: Links, Buttons (AA)      */
	--color-primary-hover:  #6a4322;
	--color-primary-soft:   #efe2d2;
	--color-primary-tint:   #f7efe5;

	--color-ink:        #2e2823; /* Haupttext                               */
	--color-ink-soft:   #685d54; /* Sekundärtext (AA auf beiden Gründen)    */
	--color-surface:    #fcf6f4; /* erhöhte Flächen                         */
	--color-bg:         #f5e7e2; /* Seitenhintergrund: zartes Rosé          */
	--color-bg-alt:     #ecd8d0; /* alternierende Abschnitte: Rosé-Sand     */
	--color-border:     #e6d1c9;
	--color-border-strong: #d5bcb1;

	--color-focus:      var(--color-primary-strong);
	--color-on-primary: #ffffff;
	--logo-color:       var(--color-primary-strong); /* Logo wird per Maske eingefärbt */

	/* ----------------------------------------------------------------------
	   TYPOGRAFIE
	   Jost – geometrisch und klar, nah an der Unterzeile im Logo.
	   Große Basis (19px) – Zielgruppe oft älter, Jost läuft etwas kleiner.
	   ---------------------------------------------------------------------- */

	--font-heading: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Schriftgrößen-Skala (modular ~1.25), fluid wo sinnvoll */
	--fs-100: 0.875rem;  /* 14px – Kleingedrucktes, Captions     */
	--fs-200: 1rem;      /* 16px – Hilfstext, Meta               */
	--fs-300: 1.125rem;  /* 18px – Fließtext (Basis)             */
	--fs-400: 1.375rem;  /* 22px – Lead / großer Fließtext       */
	--fs-500: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);   /* H3   */
	--fs-600: clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem);   /* H2   */
	--fs-700: clamp(2.75rem, 1.4rem + 5vw, 5.5rem);   /* H1   */

	--lh-tight:   1.2;   /* Überschriften          */
	--lh-snug:    1.4;   /* Lead                   */
	--lh-base:    1.65;  /* Fließtext              */

	--fw-regular: 400;
	--fw-medium:  500;
	--fw-semibold: 600;
	--fw-bold:    700;

	--tracking-tight: -0.01em;
	--tracking-wide:   0.06em; /* Labels / Kapitälchen */

	/* ----------------------------------------------------------------------
	   SPACING – 4px-Basis. Konsistente Abstände in Komponenten & Layout.
	   ---------------------------------------------------------------------- */

	--space-3xs: 0.25rem; /*  4px */
	--space-2xs: 0.5rem;  /*  8px */
	--space-xs:  0.75rem; /* 12px */
	--space-sm:  1rem;    /* 16px */
	--space-md:  1.5rem;  /* 24px */
	--space-lg:  2rem;    /* 32px */
	--space-xl:  3rem;    /* 48px */
	--space-2xl: 4rem;    /* 64px */
	--space-3xl: 6rem;    /* 96px */

	/* Vertikaler Sektionsabstand (responsiv) */
	--space-section: clamp(3rem, 6vw, 6rem);

	/* ----------------------------------------------------------------------
	   LAYOUT, RADIEN, SCHATTEN, BEWEGUNG
	   ---------------------------------------------------------------------- */

	--container:       1140px; /* Standard-Inhaltsbreite     */
	--container-wide:  1320px;
	--container-text:  68ch;   /* optimale Lesezeilenlänge   */
	--gutter:          clamp(1rem, 4vw, 2rem);

	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 2px;
	--radius-pill: 999px;

	/* Weiche, zurückhaltende Schatten (kein Glassmorphism) */
	--shadow-sm: 0 1px 2px rgba(46, 40, 35, 0.06);
	--shadow-md: 0 6px 20px rgba(46, 40, 35, 0.08);
	--shadow-lg: 0 16px 40px rgba(46, 40, 35, 0.10);

	--ring: 0 0 0 3px rgba(130, 83, 42, 0.35); /* Fokus-Ring aus Marke-strong */

	--transition-fast: 150ms ease;
	--transition-base: 220ms ease;

	--header-height: 84px;
	--z-header: 100;
}