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

/* Custom Components */
@layer components {
  .btn-primary {
    @apply px-6 py-3 bg-contractor-blue text-white font-semibold rounded-lg hover:bg-sky-700 transition duration-200 shadow-md hover:shadow-lg;
  }

  .btn-secondary {
    @apply px-6 py-3 bg-contractor-gray text-white font-semibold rounded-lg hover:bg-slate-600 transition duration-200 shadow-md hover:shadow-lg;
  }

  .btn-cta {
    @apply px-6 py-3 bg-contractor-orange text-white font-semibold rounded-lg hover:bg-orange-600 transition duration-200 shadow-md hover:shadow-lg;
  }

  .btn-outline {
    @apply px-6 py-3 border-2 border-contractor-blue text-contractor-blue font-semibold rounded-lg hover:bg-contractor-blue hover:text-white transition duration-200;
  }

  .card {
    @apply bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-xl;
  }

  .input-field {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-contractor-blue focus:border-transparent;
  }

  .category-badge {
    @apply inline-block px-3 py-1 text-sm font-semibold rounded-full bg-gray-100 text-gray-700 hover:bg-contractor-blue hover:text-white transition duration-200;
  }
}

/* Custom Utilities */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}