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

@layer base {
  body {
    @apply bg-gray-50 text-gray-900 antialiased;
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200;
  }
  
  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 shadow-lg hover:shadow-xl;
  }
  
  .btn-secondary {
    @apply btn bg-white text-secondary-700 border-secondary-200 hover:bg-secondary-50 focus:ring-primary-500 hover:border-primary-300;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-sm border border-secondary-100 overflow-hidden hover:shadow-md transition-shadow;
  }
  
  .input {
    @apply block w-full px-3 py-2 border border-secondary-300 rounded-lg shadow-sm focus:ring-primary-500 focus:border-primary-500 sm:text-sm transition-colors;
  }
  
  .label {
    @apply block text-sm font-medium text-secondary-700 mb-1;
  }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* Discord-style gradients */
  .bg-gradient-discord {
    @apply bg-gradient-to-br from-primary-50 via-white to-secondary-50;
  }
  
  .bg-gradient-primary {
    @apply bg-gradient-to-r from-primary-500 to-primary-600;
  }
  
  .bg-gradient-secondary {
    @apply bg-gradient-to-r from-secondary-500 to-secondary-600;
  }
  
  /* Status colors */
  .status-online {
    @apply bg-success-500;
  }
  
  .status-offline {
    @apply bg-secondary-400;
  }
  
  .status-away {
    @apply bg-warning-500;
  }
  
  .status-dnd {
    @apply bg-accent-500;
  }
}