/* =============================================================================
   BEA-SYSTEM DESIGN TOKENS
   variables.css - Single Source of Truth für alle Design-Werte
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     FARBEN - Primär
     --------------------------------------------------------------------------- */
  --blue: #005B8C;
  --blue-dark: #004a73;
  --blue-light: #0073b1;
  
  --tuerkis: #00B4AA;
  --tuerkis-light: #00d4c8;
  --tuerkis-dark: #009990;
  
  --orange: #F7941D;
  --orange-light: #ffab40;
  --orange-dark: #e07d00;

  /* ---------------------------------------------------------------------------
     FARBEN - Hintergründe (Dark Theme)
     --------------------------------------------------------------------------- */
  --dark: #0a1628;
  --dark-card: #0f1f38;
  --dark-lighter: #152238;
  --dark-border: rgba(255, 255, 255, 0.1);
  --dark-border-subtle: rgba(255, 255, 255, 0.05);

  /* ---------------------------------------------------------------------------
     FARBEN - Text
     --------------------------------------------------------------------------- */
  --white: #ffffff;
  --gray: #8896a6;
  --gray-light: #b8c4d0;
  --gray-dark: #5a6a7a;

  /* ---------------------------------------------------------------------------
     FARBEN - Status
     --------------------------------------------------------------------------- */
  --success: #22c55e;
  --success-light: #4ade80;
  --error: #ef4444;
  --error-light: #f87171;
  --warning: #f59e0b;

  /* ---------------------------------------------------------------------------
     GRADIENTEN
     --------------------------------------------------------------------------- */
  --gradient-brand: linear-gradient(135deg, var(--blue) 0%, var(--tuerkis) 100%);
  --gradient-cta: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
  --gradient-hero: 
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 91, 140, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(0, 180, 170, 0.1) 0%, transparent 50%);

  /* ---------------------------------------------------------------------------
     TYPOGRAFIE - Schriftfamilien
     --------------------------------------------------------------------------- */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------------------------------------------------------------------------
     TYPOGRAFIE - Schriftgrößen (fluid mit clamp)
     --------------------------------------------------------------------------- */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.8125rem;    /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md: 1rem;         /* 16px */
  --text-lg: 1.0625rem;    /* 17px */
  --text-xl: 1.125rem;     /* 18px */
  
  /* Headings - responsive */
  --text-h1: clamp(2.5rem, 8vw, 5rem);
  --text-h2: clamp(2rem, 5vw, 3.5rem);
  --text-h3: clamp(1.25rem, 3vw, 1.5rem);
  --text-h4: clamp(1.125rem, 2vw, 1.25rem);

  /* ---------------------------------------------------------------------------
     TYPOGRAFIE - Schriftgewichte
     --------------------------------------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------------------------------------------------------------------------
     TYPOGRAFIE - Zeilenhöhen
     --------------------------------------------------------------------------- */
  --leading-tight: 1.1;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.7;

  /* ---------------------------------------------------------------------------
     TYPOGRAFIE - Letter Spacing
     --------------------------------------------------------------------------- */
  --tracking-tight: -0.04em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.2em;

  /* ---------------------------------------------------------------------------
     ABSTÄNDE (Spacing)
     --------------------------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ---------------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------------- */
  --container-sm: 640px;
  --container-md: 900px;
  --container-lg: 1100px;
  --container-xl: 1400px;
  
  --nav-height: 64px;
  --nav-height-mobile: 56px;

  /* ---------------------------------------------------------------------------
     BORDER RADIUS
     --------------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ---------------------------------------------------------------------------
     SCHATTEN
     --------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.4);
  --shadow-glow-orange: 0 0 30px rgba(247, 148, 29, 0.3);
  --shadow-glow-tuerkis: 0 0 30px rgba(0, 180, 170, 0.2);

  /* ---------------------------------------------------------------------------
     ÜBERGÄNGE (Transitions)
     --------------------------------------------------------------------------- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.5s ease;

  /* ---------------------------------------------------------------------------
     Z-INDEX Skala
     --------------------------------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-nav: 100;
  --z-modal: 200;
  --z-tooltip: 300;
  --z-toast: 400;
}

/* =============================================================================
   DARK/LIGHT MODE VORBEREITUNG (für später)
   Falls du mal ein Light-Theme brauchst
   ============================================================================= */

/*
@media (prefers-color-scheme: light) {
  :root {
    --dark: #ffffff;
    --dark-card: #f8fafc;
    --white: #0a1628;
    --gray-light: #374151;
  }
}
*/