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

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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-sans text-gray-900 antialiased;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-display font-semibold;
  }
}

@layer components {
  /* Button Styles */
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-lg font-medium transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  
  .btn-primary {
    @apply bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500;
  }
  
  .btn-secondary {
    @apply bg-secondary-600 text-white hover:bg-secondary-700 focus:ring-secondary-500;
  }
  
  .btn-outline {
    @apply border-2 border-primary-600 text-primary-600 hover:bg-primary-600 hover:text-white focus:ring-primary-500;
  }
  
  .btn-white {
    @apply bg-white text-primary-600 hover:bg-gray-50 focus:ring-primary-500;
  }
  
  /* Card Styles */
  .card {
    @apply bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300;
  }
  
  .card-hover {
    @apply hover:shadow-2xl hover:-translate-y-2;
  }
  
  /* Section Styles */
  .section {
    @apply py-16 md:py-24;
  }
  
  .section-title {
    @apply text-center mb-12;
  }
  
  .section-title h2 {
    @apply text-3xl md:text-4xl lg:text-5xl font-bold mb-4;
  }
  
  .section-title p {
    @apply text-lg text-gray-600 max-w-2xl mx-auto;
  }
  
  /* Navigation */
  .nav-link {
    @apply text-gray-700 hover:text-primary-600 font-medium transition-colors duration-200;
  }
  
  .nav-link-active {
    @apply text-primary-600;
  }
  
  /* Form Styles */
  .form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
  
  /* Glassmorphism */
  .glass {
    @apply bg-white bg-opacity-80 backdrop-blur-lg border border-white border-opacity-20;
  }
  
  /* Gradient Text */
  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-600 to-secondary-600;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}