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

@layer base {
  body {
    @apply bg-neutral-50;
  }
}

@layer components {
  .btn-primary {
    @apply px-6 py-3 bg-neutral-900 text-white rounded-full font-medium 
    hover:bg-neutral-800 transition-all duration-300 ease-out;
  }
  
  .btn-secondary {
    @apply px-6 py-3 bg-white text-neutral-900 rounded-full font-medium 
    hover:bg-neutral-100 transition-all duration-300 ease-out border border-neutral-200;
  }

  .category-btn {
    @apply w-full text-left px-4 py-3 rounded-lg transition-all duration-300 ease-out
    hover:bg-neutral-100 font-medium text-lime-800;
  }

  .category-btn.active {
    @apply bg-lime-600 text-white hover:bg-lime-600;
  }
}