/* ==========================================================================
   Lucid Page Media – Design Tokens
   Markenpalette 1:1 aus der bestehenden Webflow-Site übernommen,
   semantisch neu organisiert. Teal/Türkis-zentriert mit warmen Cream-Tönen.
   ========================================================================== */

:root {
  /* --- Markenfarben (Rohwerte) ------------------------------------------ */
  --teal-500: #2ec4b6;      /* Primärakzent */
  --teal-600: #309187;      /* dunklerer Akzent / Hover */
  --teal-900: #0a312d;      /* tiefes Teal */
  --teal-950: #082d29;      /* noch dunkler */
  --ink-950:  #04110f;      /* Grün-Schwarz – dunkle Flächen */
  --ink-900:  #0c1816;
  --ink-800:  #2b2c2c;      /* Haupttext */
  --blue-400: #5894c7;
  --blue-200: #a1d5ff;
  --yellow-300: #fff29f;
  --apricot-300: #facab4;
  --terracotta-400: #c2917a;
  --olive-400: #aea56a;
  --purple-500: #774e80;

  --cream-50: #fffbf6;      /* warmer heller Hintergrund */
  --mint-50:  #f8fffe;      /* kühler heller Hintergrund */
  --white:    #ffffff;
  --gray-100: #f3f3f3;
  --gray-200: #e7e6e2;
  --gray-400: #afafaf;
  --gray-600: #6b6f6e;

  /* --- Semantische Tokens ------------------------------------------------ */
  --color-accent:        var(--teal-500);
  --color-accent-strong: var(--teal-600);
  --color-bg:            var(--cream-50);
  --color-bg-alt:        var(--mint-50);
  --color-bg-dark:       var(--ink-950);
  --color-surface:       var(--white);
  --color-text:          var(--ink-800);
  --color-text-soft:     var(--gray-600);
  --color-text-invert:   #eafdfa;
  --color-border:        var(--gray-200);
  --color-border-dark:   #1c2c29;

  /* --- Typografie ------------------------------------------------------- */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* fluide Typo: clamp(min, vw, max) */
  --fs-display: clamp(2.5rem, 1.6rem + 4.2vw, 4rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.8vw, 3.25rem);
  --fs-h2:      clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-h4:      clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --fs-lead:    clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.6;

  /* --- Abstände (8px-Raster) -------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);

  /* --- Layout ----------------------------------------------------------- */
  --container: 1180px;
  --container-wide: 1320px;
  --container-narrow: 760px;
  --gutter: clamp(1.1rem, 0.5rem + 2vw, 2.5rem);

  /* --- Radius ----------------------------------------------------------- */
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* --- Schatten --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(4, 17, 15, 0.06);
  --shadow-sm: 0 2px 8px rgba(4, 17, 15, 0.07);
  --shadow:    0 10px 30px rgba(4, 17, 15, 0.10);
  --shadow-lg: 0 24px 60px rgba(4, 17, 15, 0.16);
  --shadow-teal: 0 16px 40px rgba(46, 196, 182, 0.28);
  --shadow-book: 0 30px 60px -12px rgba(4, 17, 15, 0.42), 0 8px 18px rgba(4, 17, 15, 0.22);

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 520ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}