/* =============================================================
   variables.css – Design Tokens
   WHY: Alle Farben, Abstände und Schriften zentral pflegen.
   Änderungen hier wirken sich auf die gesamte App aus.
   ============================================================= */

:root {
  /* --- Farben --- */
  --color-bg:           #080c10;
  --color-surface:      #0f1419;
  --color-surface-2:    #161d26;
  --color-surface-3:    #1e2836;
  --color-border:       rgba(255,255,255,0.07);
  --color-border-hover: rgba(255,255,255,0.15);

  --color-accent:       #00e676;   /* Electric Green */
  --color-accent-dim:   #00c85a;
  --color-accent-glow:  rgba(0,230,118,0.15);
  --color-accent-2:     #ffd740;   /* Gold für Confidence */
  --color-accent-3:     #40c4ff;   /* Blau für Stats */

  --color-win:          #00e676;
  --color-draw:         #ffd740;
  --color-lose:         #ff5252;

  --color-text-primary:   #f0f4f8;
  --color-text-secondary: #8899aa;
  --color-text-muted:     #55667a;

  /* --- Typografie --- */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'DM Sans', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* --- Spacing Scale (8px base) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* --- Border Radius --- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;

  /* --- Shadows --- */
  --shadow-card:  0 4px 24px rgba(0,0,0,0.4);
  --shadow-glow:  0 0 24px rgba(0,230,118,0.2);
  --shadow-hover: 0 8px 40px rgba(0,0,0,0.6);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   400ms cubic-bezier(0.4,0,0.2,1);

  /* --- Layout --- */
  --max-width: 1400px;
  --navbar-height: 64px;
}