/* Clash Nova - Theme Variables */
:root {
  /* Brand Colors */
  --color-primary: #00d4ff;
  --color-secondary: #ff6b00;
  --color-accent: #a855f7;
  --color-gold: #ffd700;
  --color-danger: #ff2244;
  --color-success: #00ff88;
  --color-warning: #ffaa00;

  /* Background Colors */
  --bg-dark: #0a0a1a;
  --bg-darker: #050510;
  --bg-panel: rgba(10, 15, 40, 0.92);
  --bg-card: rgba(20, 25, 60, 0.85);
  --bg-overlay: rgba(0, 0, 0, 0.75);

  /* Team Colors */
  --team-blue: #0088ff;
  --team-red: #ff2244;

  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #aabbcc;
  --text-muted: #556677;
  --text-gold: #ffd700;

  /* Border Colors */
  --border-primary: rgba(0, 212, 255, 0.3);
  --border-gold: rgba(255, 215, 0, 0.5);
  --border-panel: rgba(255, 255, 255, 0.08);

  /* Glow Effects */
  --glow-primary: 0 0 20px rgba(0, 212, 255, 0.5);
  --glow-gold: 0 0 20px rgba(255, 215, 0, 0.5);
  --glow-danger: 0 0 20px rgba(255, 34, 68, 0.5);
  --glow-accent: 0 0 20px rgba(168, 85, 247, 0.5);

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #00d4ff, #0066ff);
  --grad-gold: linear-gradient(135deg, #ffd700, #ff8c00);
  --grad-danger: linear-gradient(135deg, #ff2244, #cc0022);
  --grad-success: linear-gradient(135deg, #00ff88, #00cc66);
  --grad-panel: linear-gradient(135deg, rgba(10,20,60,0.95), rgba(5,10,30,0.95));
  --grad-hero: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%);

  /* Sizes */
  --joystick-size: 120px;
  --action-btn-size: 70px;
  --hud-height: 60px;
  --controls-height: 180px;

  /* Animations */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-Index Layers */
  --z-game: 1;
  --z-hud: 10;
  --z-controls: 20;
  --z-ui: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-overlay: 60;
  --z-intro: 100;
}

/* Dark Mode (default) */
[data-theme="dark"] {
  --bg-dark: #0a0a1a;
  --bg-panel: rgba(10, 15, 40, 0.92);
}

/* Light Mode */
[data-theme="light"] {
  --bg-dark: #1a2040;
  --bg-panel: rgba(20, 30, 70, 0.95);
}

/* RTL Support */
[dir="rtl"] .menu-buttons,
[dir="rtl"] .hud-team {
  direction: rtl;
}