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

/* Test to make sure CSS is loading */
body {
  font-family: 'Inter', system-ui, sans-serif;
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 text-base font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  
  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
  }
  
  .btn-secondary {
    @apply btn bg-white text-primary-600 border-2 border-primary-600 hover:bg-primary-50 focus:ring-primary-500;
  }
  
  .btn-outline {
    @apply btn bg-transparent text-gray-700 border border-gray-300 hover:bg-gray-50 focus:ring-gray-500;
  }
  
  .section-padding {
    @apply py-16 sm:py-20 lg:py-24;
  }
  
  .container-width {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .gradient-bg {
    background: linear-gradient(135deg, theme('colors.primary.600'), theme('colors.primary.800'));
  }
  
  .gradient-text {
    background: linear-gradient(135deg, theme('colors.primary.600'), theme('colors.primary.800'));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

@layer utilities {
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }
  
  @keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
  }
  
  .text-balance {
    text-wrap: balance;
  }
}
