/* Muet im Kopf — Design Tokens
 * Abgeleitet aus: Clients/Muet im Kopf/site/Mut_im_Kopf_homepage_idee.pdf (Visual-Idee von Olga)
 * Pattern-Vorbild: Clients/Hypnosolve/site/assets/css/tokens.css (Stack-Konsistenz)
 *
 * Brand-Charakter: warm, ruhig, geschützt, kindgerecht.
 * Nicht: spielerisch-laut, infantil, klinisch-kalt.
 * Werte: Sage-Olive + warmes Orange-Rot als Akzent + Creme als Atemraum.
 */

:root {
  /* === Sage-Olive-Palette (Hauptfarbe, abgeleitet aus PDF-Logo und Buttons) === */
  --primary-color: #79926A;       /* Mittleres Sage-Olive, Hauptfarbe Logo/Buttons */
  --primary-dark: #5C7553;        /* Dunkleres Sage für Hover/Active */
  --primary-soft: #B9C7B0;        /* Helles Sage für Highlight-Boxen */

  /* === Warm-Orange-Akzent (abgeleitet aus Herz-Symbol und Unterstreichung der Headlines) === */
  --accent-color: #D88A6B;        /* Warmes Orange-Rot */
  --accent-soft: #F0D4C5;         /* Helles Pfirsich für Card-Backgrounds */
  --accent-hover: #C77A5C;        /* Dunkler für Hover */

  /* === Creme-Neutrale (Atemraum) === */
  --bg-color: #FBF6EC;            /* Warm-Creme Hauptbackground */
  --bg-soft: #F4ECDA;             /* Etwas dunkler für Card-Sektionen */
  --bg-warm: #EFE2C8;             /* Wärmer Creme für Highlight-Sektionen */

  /* === Text === */
  --text-color: #3A3D2E;          /* Dunkel-Oliv für Body-Text (warmes Schwarz) */
  --text-soft: #6B6F58;           /* Sekundär-Text */
  --text-muted: #8A8E73;          /* Tertiär */

  /* === Footer (dunkel-Sage analog PDF Footer-Band) === */
  --footer-bg: #6B8276;
  --footer-text: #FBF6EC;

  /* === Typografie ===
   * Logo + Headlines: Script-Font (handgeschrieben-warm, vermittelt "Kind-Begleitung")
   *                   Empfehlung: "Caveat" 500-700 (Google Fonts, kostenlos, sehr lesbar)
   * Body + UI:        Moderne Sans-Serif, rund, warm
   *                   Empfehlung: "Nunito" 300-700 (Google Fonts, mit Mut-im-Kopf-Stimmung kompatibel)
   *
   * Vor Live-Stellung: self-hosted (Datenschutz-Konformität analog Hypnosolve).
   */
  --font-script: 'Caveat', 'Brush Script MT', cursive;
  --font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* === Schriftgrössen (Mobile-first, fluid via clamp) === */
  --fs-h1: clamp(2.2rem, 4vw + 1rem, 3.2rem);
  --fs-h2: clamp(1.6rem, 2vw + 1rem, 2.2rem);
  --fs-h3: clamp(1.2rem, 1.5vw + 0.8rem, 1.5rem);
  --fs-body: 1rem;
  --fs-lead: 1.15rem;
  --fs-small: 0.9rem;

  /* === Line-Heights === */
  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* === Spacing-Skala === */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 10rem;

  /* === Radien (rund-warm, nichts harsch-eckig) === */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* === Schatten (sage-getönt, weich) === */
  --shadow-soft: 0 8px 32px rgba(121, 146, 106, 0.14);
  --shadow-card: 0 2px 12px rgba(121, 146, 106, 0.10);
  --shadow-card-warm: 0 4px 16px rgba(216, 138, 107, 0.12);

  /* === Container === */
  --container-max: 1200px;
  --container-padding-x: clamp(1rem, 4vw, 2rem);

  /* === Transitions === */
  --transition-base: 220ms ease-out;
  --transition-slow: 420ms ease-out;
}

/* Prefers-reduced-motion respektieren */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}