/* ========================================
   CSS Custom Properties (Variables)
   Zentrale Definition aller Farben, Abstände, Schriften
   ======================================== */

:root {
  /* Color Palette - Professional B2B (Green Theme) */
  --primary-color: #09cc94;
  --primary-dark: #007e68;
  --primary-light: #0fbf8c;
  --secondary-color: #64748b;
  --accent-color: #0dd4a0;
  
  /* Grays */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  
  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  
  /* Background */
  --bg-primary: #000000;
  --bg-secondary: #0f172a;
  --bg-card: rgba(30, 41, 59, 0.8);
  --bg-card-hover: rgba(51, 65, 85, 0.9);
  
  /* Spacing */
  --section-padding: 100px 0;
  --container-max-width: 1200px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 30px rgba(37, 99, 235, 0.3);
}