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

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(222.2 84% 4.9%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(222.2 84% 4.9%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(222.2 84% 4.9%);
  --primary: hsl(221.2 83.2% 53.3%);
  --primary-foreground: hsl(210 40% 98%);
  --secondary: hsl(210 40% 96%);
  --secondary-foreground: hsl(222.2 84% 4.9%);
  --muted: hsl(210 40% 96%);
  --muted-foreground: hsl(214, 5%, 27%);
  --accent: hsl(210 40% 96%);
  --accent-foreground: hsl(222.2 84% 4.9%);
  --destructive: hsl(0 84.2% 60.2%);
  --destructive-foreground: hsl(210 40% 98%);
  --border: hsl(214.3 31.8% 91.4%);
  --input: hsl(214.3 31.8% 91.4%);
  --ring: hsl(221.2 83.2% 53.3%);
  --chart-1: hsl(221.2 83.2% 53.3%);
  --chart-2: hsl(142.1 76.2% 36.3%);
  --chart-3: hsl(47.9 95.8% 53.1%);
  --chart-4: hsl(280.8 62.5% 47.4%);
  --chart-5: hsl(11.2 91.2% 55.9%);
  --radius: 0.75rem;
  --font-sans: 'Inter', sans-serif;
}

.dark {
  --background: hsl(222.2 84% 4.9%);
  --foreground: hsl(210 40% 98%);
  --card: hsl(222.2 84% 4.9%);
  --card-foreground: hsl(210 40% 98%);
  --popover: hsl(222.2 84% 4.9%);
  --popover-foreground: hsl(210 40% 98%);
  --primary: hsl(221.2 83.2% 53.3%);
  --primary-foreground: hsl(222.2 84% 4.9%);
  --secondary: hsl(217.2 32.6% 17.5%);
  --secondary-foreground: hsl(210 40% 98%);
  --muted: hsl(217.2 32.6% 17.5%);
  --muted-foreground: hsl(215 20.2% 65.1%);
  --accent: hsl(217.2 32.6% 17.5%);
  --accent-foreground: hsl(210 40% 98%);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(210 40% 98%);
  --border: hsl(217.2 32.6% 17.5%);
  --input: hsl(217.2 32.6% 17.5%);
  --ring: hsl(212.7 26.8% 83.9%);
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }
}

@layer utilities {
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  .animate-shimmer {
    animation: shimmer 3s ease-in-out infinite;
  }
  
  .animate-pulse-slow {
    animation: pulseGlow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .animate-slide-down {
    animation: slideDown 0.5s ease-out;
  }
  
  .animate-slide-up {
    animation: slideUp 0.3s ease-out;
  }
  
  .animate-fade-in {
    animation: fadeIn 0.5s ease-out;
  }
  
  .animate-scale-in {
    animation: scaleIn 0.3s ease-out;
  }
}

@keyframes float {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg); 
  }
  50% { 
    transform: translateY(-20px) rotate(180deg); 
  }
}

@keyframes floatRandom {
  0%, 100% { 
    transform: translate(0px, 0px) rotate(0deg); 
  }
  50% { 
    transform: translate(var(--move-x, -20px), var(--move-y, -20px)) rotate(var(--rotate, 180deg)); 
  }
}

@keyframes shimmer {
  0% { 
    transform: translateX(-100%); 
  }
  100% { 
    transform: translateX(100%); 
  }
}

@keyframes slideDown {
  from { 
    transform: translateY(-100%); 
    opacity: 0; 
  }
  to { 
    transform: translateY(0); 
    opacity: 1; 
  }
}

@keyframes slideUp {
  from { 
    transform: translateY(20px); 
    opacity: 0; 
  }
  to { 
    transform: translateY(0); 
    opacity: 1; 
  }
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
  }
  to { 
    opacity: 1; 
  }
}

@keyframes scaleIn {
  from { 
    transform: scale(0.8); 
    opacity: 0; 
  }
  to { 
    transform: scale(1); 
    opacity: 1; 
  }
}

@keyframes pulseGlow {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.02); 
  }
}

.shimmer-effect {
  position: relative;
  overflow: hidden;
}

.shimmer-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
  animation: shimmer 3s infinite;
}

.gradient-shimmer {
  background: linear-gradient(90deg, currentColor 0%, rgba(37, 99, 235, 0.8) 50%, currentColor 100%);
  background-size: 200% 100%;
  animation: gradient-shimmer 3s ease-in-out infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

.floating-particles {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  opacity: 0.1;
  animation: floatRandom 6s ease-in-out infinite;
}

.drag-over {
  border-color: hsl(221.2 83.2% 53.3%) !important;
  background-color: hsla(221.2, 83.2%, 53.3%, 0.05) !important;
  transform: scale(1.02);
}

.comparison-cell.different {
  background-color: hsla(0, 84.2%, 60.2%, 0.1);
  border-left: 3px solid hsl(0 84.2% 60.2%);
}

.comparison-cell.same {
  background-color: hsla(142.1, 76.2%, 36.3%, 0.1);
}

.processing-card {
  background: linear-gradient(45deg, hsla(221.2, 83.2%, 53.3%, 0.05), hsla(221.2, 83.2%, 53.3%, 0.05));
}

.processing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, hsla(221.2, 83.2%, 53.3%, 0.1), transparent);
  animation: shimmer 2s infinite;
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}