/* Global CSS Variables and Base Styles */
:root {
  /* Dark gaming theme with neon accents for Battle.net */
  --background: oklch(0.14 0.02 264);
  --foreground: oklch(0.98 0 0);
  --card: oklch(0.18 0.03 264 / 0.5);
  --card-foreground: oklch(0.98 0 0);
  --popover: oklch(0.16 0.03 264);
  --popover-foreground: oklch(0.98 0 0);
  --primary: oklch(0.62 0.25 240);
  --primary-foreground: oklch(0.98 0 0);
  --secondary: oklch(0.65 0.19 290);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.25 0.02 264);
  --muted-foreground: oklch(0.65 0.02 264);
  --accent: oklch(0.62 0.22 200);
  --accent-foreground: oklch(0.98 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.28 0.03 264 / 0.3);
  --input: oklch(0.22 0.03 264);
  --ring: oklch(0.62 0.25 240);
  --radius: 1rem;
  /* Custom gaming colors */
  --neon-blue: oklch(0.62 0.25 240);
  --neon-purple: oklch(0.65 0.19 290);
  --neon-cyan: oklch(0.7 0.18 200);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--foreground);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.main-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, var(--background), var(--background), oklch(0.12 0.03 264));
}

/* Custom glassmorphism and glow effects */
.glass-card {
  backdrop-filter: blur(12px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glow-blue {
  box-shadow: 0 0 20px rgba(0, 157, 255, 0.3), 0 0 40px rgba(0, 157, 255, 0.1);
}

.glow-purple {
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.3), 0 0 40px rgba(168, 85, 247, 0.1);
}

.glow-hover:hover {
  box-shadow: 0 0 30px rgba(0, 157, 255, 0.5), 0 0 60px rgba(0, 157, 255, 0.2);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}

/* Container utility */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .container {
    padding: 0 2rem;
  }
}