/* ============================================================
   AeraBloom & Friends — Design Tokens v3
   Helles Theme, v1-Farbpalette
   ============================================================ */
:root {
  /* Markenfarben */
  --ab-pink:      #FF2D7B;
  --ab-cyan:      #5BC0EB;
  --ab-magenta:   #8E1354;
  --ab-bordeaux:  #4A0E33;
  --ab-petrol:    #0B2233;
  --ab-deepblue:  #071624;

  /* Neutrale Stufen (aus Petrol abgeleitet) */
  --n-50:  #F7FAFC;
  --n-100: #EFF4F8;
  --n-200: #DFE8EF;
  --n-400: #9AACBB;
  --n-500: #6E8496;
  --n-700: #2E4356;

  /* Gradients */
  --grad-brand:  linear-gradient(135deg, var(--ab-pink) 0%, var(--ab-cyan) 100%);
  --grad-thread: linear-gradient(90deg, var(--ab-pink), var(--ab-magenta) 55%, var(--ab-cyan));
  --grad-script: linear-gradient(120deg, var(--ab-pink) 15%, var(--ab-magenta) 85%);

  /* Hintergruende */
  --bg-hero:
    radial-gradient(700px 420px at 88% 8%, rgba(91,192,235,.12) 0%, transparent 65%),
    radial-gradient(800px 480px at 4% 92%, rgba(255,45,123,.08) 0%, transparent 60%),
    #ffffff;
  --bg-section: var(--n-50);

  /* Schatten */
  --shadow-sm: 0 1px 3px rgba(7,22,36,.07), 0 1px 2px rgba(7,22,36,.05);
  --shadow-md: 0 6px 20px rgba(7,22,36,.09), 0 2px 6px rgba(7,22,36,.05);
  --shadow-grad:
    0 6px 20px rgba(7,22,36,.07),
    -10px 14px 34px -12px rgba(255,45,123,.30),
    10px 14px 34px -12px rgba(91,192,235,.30);
  --shadow-grad-hover:
    0 10px 26px rgba(7,22,36,.09),
    -14px 20px 44px -12px rgba(255,45,123,.42),
    14px 20px 44px -12px rgba(91,192,235,.42);
  --shadow-glow-pink: 0 6px 24px rgba(255,45,123,.30);

  /* Typografie */
  --font-body: 'Inter', system-ui, sans-serif;
  --font-hand: 'Shadows Into Light', cursive;

  /* Radien */
  --radius-card: 18px;
  --radius-btn: 999px;
}