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

@layer base {
  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply font-sans text-gray-700 antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-bold text-gray-900;
  }
}

@layer components {
  .rounded-lg {
    border-radius: 2rem !important;
  }

  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 font-medium transition duration-200 ease-in-out;
    border-radius: 2rem;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 hover:scale-105;
  }

  .btn-secondary {
    @apply btn bg-secondary-600 text-white hover:bg-secondary-700 hover:scale-105;
  }

  .btn-outline {
    @apply btn border-2 border-gray-200 hover:border-primary-600 hover:text-primary-600;
  }

  .container {
    @apply mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl;
  }

  .section {
    @apply py-16 md:py-24;
  }

  .card {
    @apply bg-white p-6 transition duration-200 hover:shadow-md;
    border-radius: 2rem;
  }

  .nav-link {
    @apply text-gray-600 hover:text-primary-600 font-medium transition duration-200;
  }

  .feature-grid {
    @apply grid gap-8 md:grid-cols-2 lg:grid-cols-3;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-secondary-600;
  }
}