/* ═══════════════════════════════════════════════════════════
   DESIGN-SYSTEM — Momentley
   Verspielt, warm, hochwertig. Coral-Akzent auf warmem Off-White,
   Navy als ruhiger Gegenpol. Alle Werte als Custom Properties —
   nirgendwo Hex hardcoden.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Marke ── */
  --coral:        #FF6B4A;
  --coral-dark:   #E8492A;
  --coral-light:  #FFE3DA;
  --navy:         #1A2B4A;
  --navy-deep:    #111E36;

  /* ── Hintergruende ── */
  --bg:           #FFF5F0;   /* warmes Off-White */
  --bg-alt:       #FDEEE8;
  --bg-card:      #FFFFFF;
  --bg-soft:      #FDEEE8;
  --bg-dark:      #1A2B4A;

  /* ── Text ── */
  --text:         #2A3343;
  --text-dim:     #6A7385;
  --text-light:   #9AA2B1;
  --text-on-dark: #FFFFFF;
  --text-on-dark-dim: rgba(255,255,255,0.72);
  --heading:      #1A2B4A;

  /* ── Akzent-Aliase ── */
  --accent:        var(--coral);
  --accent-hover:  var(--coral-dark);
  --accent-light:  var(--coral-light);
  --accent-glow:   rgba(255,107,74,0.18);

  /* ── Linien / Status ── */
  --border:        #F0DDD4;
  --border-strong: #E6C9BC;
  --success:       #27AE60;
  --error:         #E74C3C;
  --whatsapp:      #25D366;

  /* ── Typografie ── */
  --font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;

  --fs-hero:   clamp(2.4rem, 6vw, 4.2rem);
  --fs-h2:     clamp(1.7rem, 4vw, 2.6rem);
  --fs-h3:     clamp(1.2rem, 2.4vw, 1.6rem);
  --fs-lead:   clamp(1.05rem, 2vw, 1.3rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-tiny:   0.75rem;

  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ── Abstaende ── */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-section: clamp(4rem, 10vw, 7rem);

  /* ── Radien ── */
  --radius-sm:   0.5rem;
  --radius-md:   0.875rem;
  --radius-lg:   1.25rem;
  --radius-xl:   1.75rem;
  --radius-full: 9999px;

  /* ── Schatten ── */
  --shadow-sm:   0 2px 8px rgba(26,43,74,0.06);
  --shadow-md:   0 8px 24px rgba(26,43,74,0.08);
  --shadow-lg:   0 20px 50px rgba(26,43,74,0.12);
  --shadow-coral:0 12px 30px rgba(255,107,74,0.30);

  /* ── Gradienten ── */
  --grad-coral:   linear-gradient(135deg, #FF8A6B, #FF6B4A 50%, #E8492A);
  --grad-festive: linear-gradient(135deg, #FFB199 0%, #FF6B4A 55%, #E8492A 100%);

  /* ── Uebergaenge ── */
  --transition-fast: 0.15s ease;
  --transition:      0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --max-width:     1160px;
  --max-width-narrow: 760px;
  --header-height: 72px;
}