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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

@layer base {
  * {
    @apply box-border;
  }
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-white text-gray-900 font-sans antialiased;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary-500 hover:bg-primary-600 active:bg-primary-700 text-white px-6 py-3 rounded-full font-semibold transition-all duration-200 shadow-md hover:shadow-lg inline-flex items-center gap-2;
  }
  .btn-accent {
    @apply bg-accent hover:bg-accent-dark active:bg-orange-800 text-white px-6 py-3 rounded-full font-semibold transition-all duration-200 shadow-md hover:shadow-lg inline-flex items-center gap-2;
  }
  .btn-outline {
    @apply border-2 border-primary-500 text-primary-600 hover:bg-primary-500 hover:text-white px-6 py-3 rounded-full font-semibold transition-all duration-200 inline-flex items-center gap-2;
  }
  .btn-white {
    @apply bg-white text-primary-600 hover:bg-primary-50 px-6 py-3 rounded-full font-semibold transition-all duration-200 shadow-md hover:shadow-lg inline-flex items-center gap-2;
  }
  .section-badge {
    @apply inline-block text-xs font-semibold tracking-widest text-primary-600 uppercase bg-primary-50 px-4 py-1.5 rounded-full mb-4;
  }
  .section-title {
    @apply text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 leading-tight;
  }
  .section-subtitle {
    @apply text-lg text-gray-500 mt-4 leading-relaxed;
  }
  .card {
    @apply bg-white rounded-2xl overflow-hidden transition-all duration-300;
    box-shadow: 0 2px 16px 0 rgba(43, 145, 119, 0.07);
  }
  .card:hover {
    box-shadow: 0 8px 32px 0 rgba(43, 145, 119, 0.15);
  }
  .input-field {
    @apply w-full border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all;
  }
  .label {
    @apply block text-sm font-medium text-gray-700 mb-1.5;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #2b9177;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #237561;
}