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

:root {
  --foreground: #0f172a;
  --background: #f8fafc;
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --card: #ffffff;
  --card-border: #e2e8f0;
}

.dark {
  --foreground: #e2e8f0;
  --background: #0b1120;
  --accent: #818cf8;
  --accent-hover: #6366f1;
  --card: #111827;
  --card-border: #1e293b;
}

body {
  color: var(--foreground);
  background: var(--background);
}

@layer utilities {
  .animate-delay-100 { animation-delay: 100ms; }
  .animate-delay-200 { animation-delay: 200ms; }
  .animate-delay-300 { animation-delay: 300ms; }
  .animate-delay-400 { animation-delay: 400ms; }
  .animate-delay-500 { animation-delay: 500ms; }
  .animate-delay-600 { animation-delay: 600ms; }
  .animate-delay-700 { animation-delay: 700ms; }
  .animate-delay-800 { animation-delay: 800ms; }
  .animate-delay-1000 { animation-delay: 1000ms; }
  .animate-delay-1200 { animation-delay: 1200ms; }
}

@layer base {
  ::selection {
    background-color: rgba(99, 102, 241, 0.2);
    color: #312e81;
  }
  .dark ::selection {
    background-color: rgba(129, 140, 248, 0.3);
    color: #e0e7ff;
  }
}

@layer components {
  .glass-card {
    @apply border border-white/20 bg-white/60 backdrop-blur-xl shadow-lg;
  }
  .dark .glass-card {
    @apply border-white/10 bg-slate-800/60;
  }
  .gradient-text {
    @apply bg-gradient-to-r from-indigo-600 via-violet-600 to-purple-600 bg-clip-text text-transparent;
  }
  .dark .gradient-text {
    @apply from-indigo-400 via-violet-400 to-purple-400;
  }
}

.noise-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.02;
}

@keyframes beam-slide {
  0% { transform: translateX(-100%) rotate(-45deg); }
  100% { transform: translateX(300%) rotate(-45deg); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 0; }
  100% { transform: scale(0.8); opacity: 0; }
}

@keyframes gradient-x {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scale-in {
  from { 
    opacity: 0;
    transform: scale(0.95);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}

.animate-beam { animation: beam-slide 4s ease-in-out infinite; }
.animate-pulse-ring { animation: pulse-ring 3s ease-out infinite; }
.animate-gradient-x {
  background-size: 200% 200%;
  animation: gradient-x 6s ease infinite;
}
.animate-fade-in { animation: fade-in 0.2s ease-out; }
.animate-scale-in { animation: scale-in 0.2s ease-out; }