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

// Custom component styles
@layer components {
  .btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2;
  }
  
  .btn-primary {
    @apply btn bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
  }
  
  .btn-secondary {
    @apply btn bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
  }
  
  .btn-outline {
    @apply btn border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-blue-500;
  }
  
  .card {
    @apply bg-white overflow-hidden shadow rounded-lg;
  }
  
  .card-header {
    @apply px-4 py-5 sm:px-6 border-b border-gray-200;
  }
  
  .card-body {
    @apply px-4 py-5 sm:p-6;
  }
  
  .nav-link {
    @apply text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200;
  }
  
  .nav-link-active {
    @apply bg-blue-100 text-blue-700;
  }
  
  .code-block {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto;
  }
  
  .hero {
    @apply bg-gradient-to-r from-blue-600 to-purple-600 text-white;
  }
  
  .feature-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
  }
  
  .feature-card {
    @apply card hover:shadow-lg transition-shadow duration-300;
  }
  
  .docs-sidebar {
    @apply w-64 bg-gray-50 border-r border-gray-200 min-h-screen sticky top-0;
  }
  
  .docs-content {
    @apply flex-1 max-w-4xl mx-auto px-6 py-8;
  }
  
  .alert {
    @apply p-4 rounded-md;
  }
  
  .alert-info {
    @apply alert bg-blue-50 border border-blue-200 text-blue-800;
  }
  
  .alert-warning {
    @apply alert bg-yellow-50 border border-yellow-200 text-yellow-800;
  }
  
  .alert-success {
    @apply alert bg-green-50 border border-green-200 text-green-800;
  }
  
  .alert-error {
    @apply alert bg-red-50 border border-red-200 text-red-800;
  }
}