/* ============================================================
   Wunschbaby Design Tokens
   CI color: #00A2B8 (Teal)
   ============================================================ */

:root {
  /* Brand */
  --teal:           #00A2B8;
  --teal-deep:      #00606E;
  --teal-dark:      #004551;
  --teal-soft:      #CDE9EE;
  --teal-tint:      #EEF7F9;
  --teal-wash:      #F7FBFC;

  /* Warm accent */
  --warm:           #E8C66F;
  --warm-deep:      #B5934A;
  --warm-soft:      #F7EAC4;
  --warm-tint:      #FDF6E3;

  /* Green accent (z. B. Ernährungsberatung) */
  --green:          #5E9678;
  --green-deep:     #3E6B55;
  --green-soft:     #CDE6D6;
  --green-tint:     #EEF6F0;

  /* Neutrals */
  --ink:            #15303A;
  --ink-mid:        #4A6470;
  --ink-soft:       #7A8E97;
  --ink-faint:      #B5C1C7;
  --border:         #E4ECEF;
  --border-soft:    #EFF4F6;
  --white:          #FFFFFF;
  --bg-cream:       #FAF6F0;
  --bg-soft:        #F7FBFC;

  /* Gradients */
  --gradient-primary:  linear-gradient(135deg, #00A2B8 0%, #00606E 100%);
  --gradient-soft:     linear-gradient(180deg, #FFFFFF 0%, #EEF7F9 100%);
  --gradient-warm:     linear-gradient(135deg, #F7EAC4 0%, #E8C66F 100%);
  --gradient-hero:     linear-gradient(180deg, #FDFDFD 0%, #EEF7F9 100%);
  --gradient-deep:     linear-gradient(135deg, #004551 0%, #00606E 55%, #B5934A 140%);

  /* Shadows */
  --shadow-xs:      0 2px 6px rgba(21, 48, 58, 0.04);
  --shadow-sm:      0 8px 20px rgba(21, 48, 58, 0.06);
  --shadow-md:      0 14px 32px rgba(21, 48, 58, 0.08);
  --shadow-lg:      0 24px 50px rgba(21, 48, 58, 0.12);
  --shadow-xl:      0 40px 80px rgba(21, 48, 58, 0.15);
  --shadow-teal:    0 14px 30px rgba(0, 162, 184, 0.25);
  --shadow-teal-lg: 0 18px 38px rgba(0, 162, 184, 0.35);
  --shadow-warm:    0 14px 30px rgba(232, 198, 111, 0.28);

  /* Radii */
  --radius-sm:      10px;
  --radius:         18px;
  --radius-lg:      28px;
  --radius-xl:      36px;
  --radius-pill:    999px;

  /* Typography
     Display & Text/UI einheitlich Open Sans (Bricolage Grotesque deaktiviert). */
  --font-sans:      "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display:   "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Motion (Meridian: klein, schnell, zweckmäßig – felt more than seen) */
  --t-fast:         0.12s;
  --t-base:         0.2s;
  --t-slow:         0.32s;
  --t-slower:       0.5s;
  --ease:           cubic-bezier(0.2, 0, 0, 1);
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --max:            1200px;
  --max-narrow:     960px;
  --max-wide:       1360px;
  --gutter:         clamp(20px, 4vw, 40px);

  /* Section spacing */
  --section-y:      clamp(72px, 9vw, 130px);
  --section-y-sm:   clamp(56px, 6vw, 90px);

  /* Z-index */
  --z-nav:          100;
  --z-float:        200;
  --z-modal:        1000;
}