/* =============================================================================
   AktivMama – Design Tokens (Variablen)
   -----------------------------------------------------------------------------
   ▸ HIER zentral die Markenfarben anpassen, sobald das Logo vorliegt.
   ▸ Palette: Sanftes Rosé/Terracotta + Salbeigrün (warm, ruhig, feminin).
   ▸ Alle Farbkombinationen sind auf WCAG-AA-Kontrast ausgelegt.
   ============================================================================= */

:root {
  /* --- Markenfarben --------------------------------------------------------
     Wenn das finale Logo vorliegt: primary / accent / sage anpassen.
     Kontrast prüfen (Text auf Flächen muss AA erfüllen).                     */

  /* Primär: zartes Rosé (statt Terracotta) */
  --color-primary:        #A45C57;  /* Rosé – Buttons, Akzente */
  --color-primary-dark:   #8B4A46;  /* Hover/Active, Text auf hell (AA-tauglich) */
  --color-primary-soft:   #EFCFC9;  /* dezente Flächen */
  --color-primary-tint:   #FDF5F3;  /* sehr helle Hintergrundfläche */

  /* Sekundär: warmes Sandbeige */
  --color-sage:           #836D51;  /* Beige – Icons, Linien, 2. Akzent */
  --color-sage-dark:      #6B5842;  /* Text/Hover (AA auf hell) */
  --color-sage-soft:      #E7DCCB;  /* dezente Flächen */
  --color-sage-tint:      #FAF6EF;  /* sehr helle Hintergrundfläche */

  /* Rosé (zarter Akzent) */
  --color-rose:           #E3B4B0;
  --color-rose-soft:      #F7E3E0;

  /* Zarte Flächenfarben – NUR für Flächen/Verläufe ohne Text darauf.
     Für Text/Buttons immer --color-primary bzw. --color-sage nutzen (AA-konform). */
  --color-blush:          #C98B86;  /* weiches Rosé */
  --color-sand:           #B9A183;  /* weiches Beige */

  /* --- Neutrale Töne (warm) ------------------------------------------------ */
  --color-ink:            #3B3330;  /* Haupttext – warmes Anthrazit */
  --color-ink-soft:       #6B625C;  /* Sekundärtext */
  --color-ink-muted:      #8E847D;  /* Hinweise, Captions */
  --color-bg:             #FFFDFB;  /* Seitenhintergrund (warmes Weiß) */
  --color-surface:        #FFFFFF;  /* Karten */
  --color-surface-alt:    #FBF6F1;  /* alternierende Sektionen */
  --color-border:         #F0E6DF;  /* feine Linien */
  --color-border-strong:  #E2D3C9;

  /* --- Status -------------------------------------------------------------- */
  --color-success:        #4F7A52;
  --color-error:          #B23A48;
  --color-error-bg:       #FBEAEC;

  /* --- Typografie ----------------------------------------------------------
     Display: "Fraunces" (warme, charaktervolle Serif für Überschriften)
     Body:    "Mulish" (klare, freundliche Sans für Fließtext)
     Beide lokal eingebunden (siehe css/fonts.css) – DSGVO-konform.          */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid Type Scale (clamp: min, ideal, max) */
  --fs-xs:   0.8125rem;                          /* 13px */
  --fs-sm:   0.9375rem;                          /* 15px */
  --fs-base: 1.0625rem;                          /* 17px */
  --fs-md:   clamp(1.125rem, 0.6vw + 1rem, 1.25rem);
  --fs-lg:   clamp(1.375rem, 1.2vw + 1rem, 1.75rem);
  --fs-xl:   clamp(1.75rem, 2.4vw + 1rem, 2.5rem);
  --fs-2xl:  clamp(2.25rem, 4vw + 1rem, 3.75rem);
  --fs-3xl:  clamp(2.75rem, 6vw + 1rem, 5rem);

  --lh-tight: 1.1;
  --lh-snug:  1.3;
  --lh-base:  1.65;

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

  /* --- Spacing (8px-Basis) ------------------------------------------------- */
  --space-2:  0.125rem;
  --space-4:  0.25rem;
  --space-8:  0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-80: 5rem;
  --space-96: 6rem;
  --space-128:8rem;

  /* Section-Rhythmus (fluid) */
  --section-y: clamp(3.5rem, 7vw, 7rem);

  /* --- Layout -------------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Radius -------------------------------------------------------------- */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --radius-pill: 999px;

  /* --- Schatten (weich, warm) --------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(58, 51, 47, 0.04), 0 2px 6px rgba(58, 51, 47, 0.05);
  --shadow-md:  0 4px 12px rgba(58, 51, 47, 0.07), 0 10px 28px rgba(58, 51, 47, 0.06);
  --shadow-lg:  0 12px 32px rgba(58, 51, 47, 0.10), 0 24px 60px rgba(58, 51, 47, 0.08);
  --shadow-focus: 0 0 0 3px rgba(164, 92, 87, 0.40);

  /* --- Transitions --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.18s;
  --t-base: 0.32s;
  --t-slow: 0.6s;

  /* --- Z-Index ------------------------------------------------------------- */
  --z-header: 1000;
  --z-mobile-nav: 1100;
  --z-sticky-cta: 900;
  --z-cookie: 1200;
  --z-skiplink: 1300;
}