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

:root {
  --primary: #2563eb;
  --secondary: #3b82f6;
  --accent: #60a5fa;
  --bg-dark: #0f172a;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
}

@layer base {
  body {
    @apply bg-slate-50 text-slate-900 font-sans antialiased scroll-smooth;
  }
}

@layer components {
  .glass {
    @apply bg-white/70 backdrop-blur-md border border-white/20 shadow-xl;
  }
  
  .glass-dark {
    @apply bg-slate-900/80 backdrop-blur-md border border-slate-700/50 shadow-2xl;
  }

  .btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-2xl transition-all active:scale-95 shadow-lg shadow-blue-500/30;
  }

  .section-title {
    @apply text-4xl md:text-5xl font-extrabold text-slate-900 mb-6;
  }
  
  .gradient-text {
    @apply text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600;
  }
}

/* Custom animations */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}