/* Neon Gaming Studio Theme */
:root {
  /* Primary Colors - Neon Gaming */
  --color-primary: #00FFFF;
  --color-secondary: #FF00FF;
  --color-accent: #00FF88;
  
  /* Background Colors */
  --color-bg: #000000;
  --color-surface: #111111;
  --color-card: #1a1a1a;
  
  /* Text Colors */
  --color-text: #00FFFF;
  --color-text-muted: #00FFFF80;
  --color-text-secondary: #FF00FF;
  
  /* Neon Glow Effects */
  --glow-primary: 0 0 10px #00FFFF, 0 0 20px #00FFFF40, 0 0 30px #00FFFF20;
  --glow-secondary: 0 0 10px #FF00FF, 0 0 20px #FF00FF40, 0 0 30px #FF00FF20;
  --glow-accent: 0 0 10px #00FF88, 0 0 20px #00FF8840, 0 0 30px #00FF8820;
}

/* CSS Variables for Tailwind */
.theme-neon {
  --tw-bg-opacity: 1;
  
  /* Neon specific custom properties */
  --neon-bg: 0 0 0;
  --neon-surface: 17 17 17;
  --neon-text: 0 255 255;
  --neon-accent: 255 0 255;
  --neon-secondary: 0 255 136;
}

/* Custom animations for neon effects */
@keyframes neon-pulse {
  0%, 100% {
    text-shadow: var(--glow-primary);
  }
  50% {
    text-shadow: var(--glow-primary), 0 0 40px #00FFFF60;
  }
}

@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow: var(--glow-primary);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

@keyframes grid-move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

/* Apply neon effects to specific elements */
.neon-text {
  text-shadow: var(--glow-primary);
  animation: neon-pulse 2s infinite;
}

.neon-text-secondary {
  text-shadow: var(--glow-secondary);
  animation: neon-pulse 3s infinite;
}

.neon-border {
  border: 1px solid var(--color-primary);
  box-shadow: var(--glow-primary);
}

/* Terminal cursor effect */
.terminal-cursor {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}