/* =============================================================
   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);

  /* --- Z-Depth Hierarchy (Glow-Glass-Designer) ---
     Level 0: Body/Background — deepest, aurora only
     Level 1: Match-Cards — light glass, subtle depth
     Level 2: Sidebar Panels — stronger glass, more blur
     Level 3: Modals/Overlays — maximum depth + strongest blur */
  --glass-l1-bg:     rgba(15, 20, 25, 0.55);
  --glass-l1-blur:   blur(8px);
  --glass-l1-border: rgba(255,255,255,0.06);
  --glass-l2-bg:     rgba(18, 24, 32, 0.65);
  --glass-l2-blur:   blur(16px) saturate(140%);
  --glass-l2-border: rgba(255,255,255,0.09);
  --glass-l3-bg:     rgba(12, 16, 22, 0.80);
  --glass-l3-blur:   blur(24px) saturate(180%);
  --glass-l3-border: rgba(255,255,255,0.12);

  /* Inner light-reflex gradient (top-left = light, bottom-right = dark) */
  --inner-light: linear-gradient(135deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0) 40%,
    rgba(0,0,0,0.08) 100%);

  /* Gradient-Border simulation (top bright, bottom dim) */
  --border-gradient-green: linear-gradient(180deg,
    rgba(0,230,118,.4) 0%, rgba(0,230,118,.08) 100%);
  --border-gradient-cyan:  linear-gradient(180deg,
    rgba(64,196,255,.4) 0%, rgba(64,196,255,.08) 100%);
  --border-gradient-red:   linear-gradient(180deg,
    rgba(255,82,82,.4) 0%, rgba(255,82,82,.08) 100%);
  --border-gradient-white: linear-gradient(180deg,
    rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 100%);

  /* --- 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;
}

/* Light-Mode entfernt (Session 12, User-Wunsch).
   Nur noch Dark-UI — die Neon-Akzente funktionieren dort optimal.
   Alle [data-theme="light"] Selektoren wurden entfernt. */