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

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-slate-50 text-slate-900 font-sans;
  }
}

@layer components {
  .btn-primary {
    @apply bg-emerald-600 hover:bg-emerald-700 text-white font-semibold px-6 py-2.5 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2;
  }

  .btn-secondary {
    @apply border-2 border-emerald-600 text-emerald-600 hover:bg-emerald-600 hover:text-white font-semibold px-6 py-2.5 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2;
  }

  .btn-amber {
    @apply bg-amber-500 hover:bg-amber-600 text-white font-semibold px-6 py-2.5 rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2;
  }

  .section-title {
    @apply text-3xl md:text-4xl font-bold text-slate-900 mb-4;
  }

  .section-subtitle {
    @apply text-lg text-slate-600 max-w-2xl mx-auto;
  }
}

/* Custom animation for counters */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.count-animate {
  animation: countUp 0.6s ease-out forwards;
}