@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --bg-dark: #121212;
  --bg-darker: #0a0a0a;
  --neon-green: #CCFF00;
  --neon-yellow: #FFD700;
  --steel-gray: #E0E0E0;
  --forest-green: #2D6A4F;
  --amber-yellow: #FFBF00;
  --muted-red: #EF233C;
}

@layer base {
  body {
    @apply bg-[#121212] text-[#E0E0E0] font-sans selection:bg-[#CCFF00] selection:text-black;
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
  }
}

@layer components {
  .glass {
    @apply bg-white/5 backdrop-blur-xl border border-white/10 shadow-2xl;
  }

  .glass-premium {
    @apply bg-gradient-to-br from-white/10 to-transparent backdrop-blur-2xl border border-[#FFD700]/30 shadow-[0_0_20px_rgba(255,215,0,0.1)];
  }

  .btn-primary {
    @apply bg-[#CCFF00] text-black font-black uppercase tracking-widest text-[10px] py-4 px-8 rounded-xl transition-all duration-300 transform hover:scale-105 hover:shadow-[0_0_30px_rgba(204,255,0,0.4)] active:scale-95 flex items-center justify-center space-x-2;
  }

  .btn-secondary {
    @apply bg-transparent border border-white/20 text-white font-black uppercase tracking-widest text-[10px] py-4 px-8 rounded-xl transition-all duration-300 hover:bg-white/5 hover:border-white/40 flex items-center justify-center space-x-2;
  }

  .btn-premium {
    @apply bg-[#FFD700] text-black font-black uppercase tracking-widest text-[10px] py-4 px-8 rounded-xl transition-all duration-300 hover:shadow-[0_0_30px_rgba(255,215,0,0.4)] flex items-center justify-center space-x-2;
  }

  .input-field {
    @apply bg-[#1a1a1a] border border-white/10 text-white p-4 rounded-xl outline-none transition-all focus:border-[#CCFF00] focus:ring-1 focus:ring-[#CCFF00]/30 placeholder:text-gray-600 font-bold text-sm;
  }

  .card-stat {
    @apply glass p-8 rounded-2xl relative overflow-hidden group transition-all hover:bg-white/10;
  }

  /* Status Badges */
  .badge-active { @apply bg-[#2D6A4F]/10 text-[#2D6A4F] border-[#2D6A4F]/30 border px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-widest; }
  .badge-pending { @apply bg-[#FFBF00]/10 text-[#FFBF00] border-[#FFBF00]/30 border px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-widest; }
  .badge-expired { @apply bg-[#EF233C]/10 text-[#EF233C] border-[#EF233C]/30 border px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-widest; }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 6px; }
  ::-webkit-scrollbar-track { background: #121212; }
  ::-webkit-scrollbar-thumb { background: #333; border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background: #CCFF00; }
}

/* Animations */
@keyframes pulse-neon {
  0% { box-shadow: 0 0 5px rgba(204, 255, 0, 0.2); }
  50% { box-shadow: 0 0 15px rgba(204, 255, 0, 0.4); }
  100% { box-shadow: 0 0 5px rgba(204, 255, 0, 0.2); }
}

.pulse-neon {
  animation: pulse-neon 2s infinite;
}