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

@layer base {
  html {
    font-family: system-ui, sans-serif;
  }
}

@layer components {
  .btn-primary {
    @apply bg-bzzz-primary hover:bg-opacity-90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  .btn-secondary {
    @apply bg-bzzz-secondary hover:bg-opacity-90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  .btn-outline {
    @apply border-2 border-bzzz-primary text-bzzz-primary hover:bg-bzzz-primary hover:text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
  }
  
  .card {
    @apply bg-white rounded-lg shadow-lg p-6 border border-gray-200;
  }
  
  .input-field {
    @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-bzzz-primary focus:ring-bzzz-primary sm:text-sm;
  }
  
  .label {
    @apply block text-sm font-medium text-gray-700 mb-2;
  }
  
  .error-text {
    @apply text-red-600 text-sm mt-1;
  }
  
  .success-text {
    @apply text-green-600 text-sm mt-1;
  }
  
  .status-indicator {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }
  
  .status-online {
    @apply status-indicator bg-green-100 text-green-800;
  }
  
  .status-offline {
    @apply status-indicator bg-red-100 text-red-800;
  }
  
  .status-pending {
    @apply status-indicator bg-yellow-100 text-yellow-800;
  }
}