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

@layer components {
  .btn {
    @apply px-5 py-2.5 font-medium rounded-lg transition-colors cursor-pointer
           inline-flex items-center justify-center gap-2;
  }

  .btn-outline {
    @apply px-5 py-2.5 font-medium rounded-lg border border-gray-300 text-sf-dark
           bg-white hover:bg-gray-50 transition-colors cursor-pointer
           inline-flex items-center justify-center gap-2;
  }

  .btn-destructive {
    @apply px-5 py-2.5 font-medium rounded-lg bg-red-600 text-white
           hover:bg-red-700 transition-colors cursor-pointer
           inline-flex items-center justify-center gap-2;
  }

  .btn-icon-outline {
    @apply p-2 rounded-lg border border-gray-300 text-gray-600 bg-white
           hover:bg-gray-50 transition-colors cursor-pointer
           inline-flex items-center justify-center;
  }

  .btn-sm {
    @apply text-sm px-3 py-1.5;
  }
}