/* ============================================
   OptiAI — Design Tokens
   Corporate Design v1.0
   ============================================ */

:root {
  /* Farben */
  --color-dark:       #0D1B2A;
  --color-blue:       #1D4ED8;
  --color-cyan:       #06B6D4;
  --color-white:      #FFFFFF;
  --color-slate:      #334155;
  --color-gray:       #94A3B8;
  --color-off-white:  #F8FAFC;

  /* Typografie */
  --font-heading:     'Space Grotesk', system-ui, sans-serif;
  --font-body:        'Inter', system-ui, sans-serif;

  /* Schriftgrößen */
  --text-h1:          clamp(28px, 3.8vw, 50px);
  --text-h2:          clamp(28px, 4vw, 44px);
  --text-h3:          clamp(20px, 2.5vw, 28px);
  --text-body:        17px;
  --text-small:       14px;
  --text-caption:     13px;

  /* Abstände */
  --space-1:          8px;
  --space-2:          16px;
  --space-3:          24px;
  --space-4:          32px;
  --space-5:          40px;
  --space-6:          48px;
  --space-8:          64px;
  --space-12:         96px;
  --space-16:         128px;
  --section-padding:  clamp(64px, 8vw, 120px);

  /* Border Radius */
  --radius-btn:       8px;
  --radius-card:      12px;
  --radius-lg:        16px;

  /* Schatten */
  --shadow-sm:        0 1px 4px rgba(0,0,0,0.08);
  --shadow-md:        0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:        0 12px 40px rgba(0,0,0,0.20);

  /* Transitions */
  --transition:       0.25s ease;
  --transition-slow:  0.4s ease;

  /* Container */
  --container-max:    1200px;
  --container-pad:    clamp(20px, 5vw, 80px);
}