/* ============================================================
   VACATUM DESIGN SYSTEM — variables.css
   Zentrale Wahrheitsquelle fuer alle Design-Tokens
   Version: 2.0 | Mai 2026
   ============================================================ */

:root {
  /* ── FARBEN ─────────────────────────────────────────────── */

  /* Primaer */
  --vac-color-primary:        #2c3e50;
  --vac-color-primary-light:  #3d5166;
  --vac-color-primary-dark:   #1a252f;

  /* Akzent: Bitcoin Orange */
  --vac-color-accent:         #f7931a;
  --vac-color-accent-dark:    #e6841a;
  --vac-color-accent-light:   #ffa940;

  /* Gold */
  --vac-color-gold:           #d4af37;

  /* Hintergruende */
  --vac-color-bg:             #f8f9fa;
  --vac-color-bg-card:        #ffffff;
  --vac-color-bg-dark:        #1a1a2e;
  --vac-color-bg-dark-card:   #16213e;

  /* Text */
  --vac-color-text:           #333333;
  --vac-color-text-muted:     #6c757d;
  --vac-color-text-light:     #adb5bd;
  --vac-color-text-inverse:   #ffffff;

  /* Rahmen */
  --vac-color-border:         #e0e0e0;
  --vac-color-border-dark:    #2e2e4a;

  /* Status */
  --vac-color-success:        #27ae60;
  --vac-color-success-bg:     #e8f5e9;
  --vac-color-warning:        #f39c12;
  --vac-color-warning-bg:     #fff8e1;
  --vac-color-danger:         #e74c3c;
  --vac-color-danger-bg:      #ffebee;
  --vac-color-info:           #2980b9;
  --vac-color-info-bg:        #e3f2fd;

  /* Chart-Farben */
  --vac-color-chart-1:        #f7931a;
  --vac-color-chart-2:        #2980b9;
  --vac-color-chart-3:        #27ae60;
  --vac-color-chart-4:        #8e44ad;
  --vac-color-chart-5:        #e74c3c;
  --vac-color-chart-6:        #f39c12;

  /* ── TYPOGRAFIE ─────────────────────────────────────────── */
  --vac-font:                 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --vac-font-mono:            'Consolas', 'Monaco', 'Courier New', monospace;

  --vac-font-size-xs:         0.75rem;
  --vac-font-size-sm:         0.875rem;
  --vac-font-size-base:       1rem;
  --vac-font-size-md:         1.1rem;
  --vac-font-size-lg:         1.25rem;
  --vac-font-size-xl:         1.5rem;
  --vac-font-size-2xl:        2rem;
  --vac-font-size-3xl:        2.5rem;
  --vac-font-size-4xl:        3rem;

  --vac-font-weight-normal:   400;
  --vac-font-weight-medium:   500;
  --vac-font-weight-semibold: 600;
  --vac-font-weight-bold:     700;
  --vac-font-weight-black:    800;

  --vac-line-height-tight:    1.2;
  --vac-line-height-base:     1.6;
  --vac-line-height-loose:    1.8;

  /* ── ABSTÄNDE ───────────────────────────────────────────── */
  --vac-space-1:    4px;
  --vac-space-2:    8px;
  --vac-space-3:    12px;
  --vac-space-4:    16px;
  --vac-space-5:    20px;
  --vac-space-6:    24px;
  --vac-space-8:    32px;
  --vac-space-10:   40px;
  --vac-space-12:   48px;
  --vac-space-16:   64px;
  --vac-space-20:   80px;

  /* ── RADIEN ─────────────────────────────────────────────── */
  --vac-radius-sm:   4px;
  --vac-radius:      8px;
  --vac-radius-md:   12px;
  --vac-radius-lg:   16px;
  --vac-radius-xl:   24px;
  --vac-radius-full: 9999px;

  /* ── SCHATTEN ───────────────────────────────────────────── */
  --vac-shadow-xs:  0 1px 3px rgba(0,0,0,0.06);
  --vac-shadow-sm:  0 2px 10px rgba(0,0,0,0.07);
  --vac-shadow-md:  0 4px 20px rgba(0,0,0,0.10);
  --vac-shadow-lg:  0 8px 30px rgba(0,0,0,0.14);
  --vac-shadow-xl:  0 16px 50px rgba(0,0,0,0.18);

  /* ── TRANSITIONS ────────────────────────────────────────── */
  --vac-transition-fast:   all 0.15s ease;
  --vac-transition:        all 0.3s ease;
  --vac-transition-slow:   all 0.5s ease;

  /* ── LAYOUT ─────────────────────────────────────────────── */
  --vac-nav-height:       64px;
  --vac-container-max:    1200px;
  --vac-container-wide:   1400px;
  --vac-content-max:      800px;

  /* ── Z-INDEX ────────────────────────────────────────────── */
  --vac-z-base:       1;
  --vac-z-dropdown:   100;
  --vac-z-sticky:     200;
  --vac-z-nav:        1000;
  --vac-z-modal:      2000;
  --vac-z-toast:      3000;
  --vac-z-disclaimer: 9999;

  /* ── LEGACY ALIASES (Rueckwaertskompatibilitaet) ─────────── */
  /* Damit alle bestehenden Seiten ohne Aenderung weiter funktionieren */
  --primary:   var(--vac-color-primary);
  --accent:    var(--vac-color-accent);
  --gold:      var(--vac-color-gold);
  --bg:        var(--vac-color-bg);
  --text:      var(--vac-color-text);
  --border:    var(--vac-color-border);
  --white:     var(--vac-color-bg-card);
  --shadow-sm: var(--vac-shadow-sm);
  --shadow-md: var(--vac-shadow-md);
  --radius:    var(--vac-radius);
  --nav-height: var(--vac-nav-height);
  --font:      var(--vac-font);

  /* Alte components.css Aliases */
  --vacatum-accent:   var(--vac-color-accent);
  --vacatum-primary:  var(--vac-color-primary);
  --vacatum-white:    var(--vac-color-bg-card);
  --border-radius:    var(--vac-radius);
  --shadow-soft:      var(--vac-shadow-sm);
  --transition-speed: var(--vac-transition);
  --space-lg:         var(--vac-space-8);
  --space-md:         var(--vac-space-4);
  --space-sm:         var(--vac-space-2);
}

/* ── DARK MODE ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --vac-color-bg:          #1a1a2e;
    --vac-color-bg-card:     #16213e;
    --vac-color-text:        #d8d8d8;
    --vac-color-text-muted:  #8892a4;
    --vac-color-border:      #2e2e4a;
    --vac-color-primary:     #8ab4d4;
    --vac-shadow-sm:         0 2px 10px rgba(0,0,0,0.35);
    --vac-shadow-md:         0 4px 20px rgba(0,0,0,0.45);

    /* Legacy aliases aktualisieren */
    --bg:     #1a1a2e;
    --white:  #16213e;
    --text:   #d8d8d8;
    --border: #2e2e4a;
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.45);
  }
}