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

@layer components {
  .btn-primary {
    @apply bg-primary hover:bg-primary-dark text-white font-semibold py-2.5 px-6 rounded-lg transition-colors duration-200;
  }

  .btn-accent {
    @apply bg-accent hover:bg-accent-dark text-white font-semibold py-2.5 px-6 rounded-lg transition-colors duration-200;
  }

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

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

  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
  }

  .sidebar-link {
    @apply flex items-center px-4 py-3 text-gray-700 hover:bg-primary-light hover:text-primary rounded-lg transition-colors duration-200;
  }

  .sidebar-link-active {
    @apply bg-primary text-white;
  }
}