/* ==========================================
   CSS VARIABLES - Option A: Modern Professional
   ========================================== */

:root {
  /* Colors - Ortus Trading Palette: Professional Trading (Blau/Grün) */
  --color-primary:         #0F1419;    /* Dunkelblau - Trust & Stability */
  --color-secondary:       #1E2139;    /* Blau-Grau - Professional */
  --color-accent:          #FCD34D;    /* Helles Gelb/Gold - Optimismus & Wohlstand */
  
  /* Colors - Neutral Palette (Dunkel) */
  --color-light:           #2D3748;    /* Dunkelgrau-Bg */
  --color-light-gray:      #374151;    /* Grau */
  --color-medium-gray:     #6B7280;    /* Mittel-Grau */
  --color-dark-gray:       #9CA3AF;    /* Heller-Grau */
  --color-dark:            #0F1419;    /* Fast schwarz */
  --color-white:           #F8FAFC;    /* Helles Grau statt Weiß */
  
  /* Spacing Scale */
  --spacing-xs:            4px;
  --spacing-sm:            8px;
  --spacing-md:            16px;
  --spacing-lg:            24px;
  --spacing-xl:            32px;
  --spacing-2xl:           48px;
  --spacing-3xl:           64px;
  --spacing-4xl:           96px;
  
  /* Typography */
  --font-family-base:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-family-heading:   "Inter", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  
  --font-size-h1:          clamp(2rem, 8vw, 4rem);       /* 48px - 64px */
  --font-size-h2:          clamp(1.5rem, 6vw, 3rem);     /* 36px - 48px */
  --font-size-h3:          clamp(1.25rem, 4vw, 2rem);    /* 20px - 32px */
  --font-size-body:        1rem;                          /* 16px */
  --font-size-small:       0.875rem;                      /* 14px */
  
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  
  --line-height-tight:     1.2;
  --line-height-normal:    1.5;
  --line-height-relaxed:   1.6;
  --line-height-loose:     1.8;
  
  /* Transitions */
  --transition-smooth:     all 0.3s ease-in-out;
  --transition-fast:       all 0.15s ease-in-out;
  
  /* Border Radius */
  --border-radius-sm:      4px;
  --border-radius-md:      6px;
  --border-radius-lg:      8px;
  
  /* Shadows (subtle) */
  --shadow-sm:             0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:             0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg:             0 10px 15px rgba(0, 0, 0, 0.1);
  
  /* Container */
  --container-max-width:   1200px;
  --container-padding:     clamp(1rem, 5vw, 2rem);
}

/* Media Query presets */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-smooth: none;
    --transition-fast: none;
  }
}