/* ============================================================
   JS AeroView – Design Tokens
   CSS Custom Properties – Zentrale Designvariablen
   ============================================================ */

:root {
  /* ── Backgrounds ─────────────────────────────────────────── */
  --bg-deep:       #0F1623;   /* Footer, dunkle Sektionen       */
  --bg-base:       #1E2535;   /* Haupthintergrund, Cards, Navbar */
  --bg-elevated:   #263044;   /* Hover-States, erhöhte Cards    */

  /* ── Accent ──────────────────────────────────────────────── */
  --accent:        #2581C4;   /* Icons, Borders, dekorative Akzente */
  --accent-hover:  #1D6FA8;   /* Hover auf Flächen              */
  --accent-text:   #5AA9DE;   /* Textlinks auf dunklem BG – ≥4,5:1 */
  --accent-cta:    #1D6FA8;   /* Primary-Button-Fläche – Weiß ≥4,5:1 */
  --accent-cta-hover: #16598A;/* Hover Primary-Button           */

  /* ── Text ────────────────────────────────────────────────── */
  --text-primary:  #FFFFFF;   /* Headlines auf dunklem BG       */
  --text-secondary:#C8CDD6;   /* Sublines, Body, Labels         */
  --text-muted:    #97A1B2;   /* Meta, Labels, Footer – ≥4,5:1  */

  /* ── Border ──────────────────────────────────────────────── */
  --border:        #2A3348;   /* Card-Borders, Divider          */

  /* ── Light Sections (Prozess, Vorteilskästen) ────────────── */
  --section-light-bg:   #F0F3F8;
  --section-light-text: #1E2535;
  --section-light-body: #3a4a5c;   /* Body-Text auf hellen Sektionen */
  --border-light:       #D0D8E4;

  /* ── Functional ──────────────────────────────────────────── */
  --status-ok:     #22C55E;   /* Checkmarks, Erfolg             */
  --status-warn:   #F59E0B;   /* Hinweise                       */

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: 'Big Shoulders Display', sans-serif;
  --font-body:    'Outfit', sans-serif;
  --font-tech:    'Jura', sans-serif;

  --fs-hero:    clamp(48px, 6vw, 72px);
  --fs-h2:      clamp(28px, 4vw, 44px);
  --fs-h3:      clamp(18px, 2vw, 26px);
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-meta:    13px;
  --fs-tag:     12px;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2.5rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;

  /* ── Layout ──────────────────────────────────────────────── */
  --navbar-height: 72px;
  --container-max: 1200px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-card:  0 2px 16px rgba(0, 0, 0, 0.35);
  --shadow-nav:   0 2px 24px rgba(0, 0, 0, 0.5);
}