frontend/src/index.css

@import "tailwindcss";

/* Base styles */
body {
  font-family: 'Inter', system-ui, sans-serif;
  @apply bg-gray-50 text-gray-900 antialiased;
}

/* Custom animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes bounce-subtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-slide-up {
  animation: slideUp 0.4s ease-out forwards;
}

.animate-pulse-slow {
  animation: pulse-slow 2s ease-in-out infinite;
}

.animate-bounce-subtle {
  animation: bounce-subtle 1s ease-in-out;
}

/* Progress bar animation */
@keyframes fillBar {
  from { width: 0%; }
}

.animate-fill-bar {
  animation: fillBar 0.8s ease-out forwards;
}

/* Monospace for metrics */
.font-mono {
  font-family: 'Fira Code', 'Courier New', monospace;
}