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

@layer components {
  /* Button Components */
  .btn-primary {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200;
  }
  
  .btn-secondary {
    @apply inline-flex items-center justify-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200;
  }
  
  .btn-danger {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200;
  }

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

  /* Custom Colors - Define consistent color palette */
  .bg-gray-pale {
    @apply bg-gray-50;
  }
  
  .text-gray-dark {
    @apply text-gray-900;
  }
  
  .text-gray-medium {
    @apply text-gray-600;
  }
  
  .text-gray-light {
    @apply text-gray-400;
  }

  /* Ocean Theme Colors */
  .bg-ocean-primary {
    @apply bg-blue-600;
  }
  
  .bg-ocean-pale {
    @apply bg-blue-50;
  }
  
  .text-ocean-primary {
    @apply text-blue-600;
  }
  
  .text-ocean-dark {
    @apply text-blue-700;
  }

  /* Sage Theme Colors */
  .bg-sage-primary {
    @apply bg-green-600;
  }
  
  .bg-sage-pale {
    @apply bg-green-50;
  }
  
  .text-sage-primary {
    @apply text-green-600;
  }
  
  .text-sage-dark {
    @apply text-green-700;
  }

  /* Coral Theme Colors */
  .bg-coral-primary {
    @apply bg-orange-500;
  }
  
  .bg-coral-pale {
    @apply bg-orange-50;
  }
  
  .text-coral-primary {
    @apply text-orange-600;
  }
  
  .text-coral-dark {
    @apply text-orange-700;
  }

  /* Rounded corners */
  .rounded-soft {
    @apply rounded-lg;
  }
  
  .rounded-large {
    @apply rounded-xl;
  }

  /* Transitions */
  .transition-smooth {
    @apply transition-all duration-200 ease-in-out;
  }

  /* Status badges with better contrast */
  .badge-success {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800;
  }
  
  .badge-warning {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800;
  }
  
  .badge-danger {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800;
  }
  
  .badge-info {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800;
  }
  
  .badge-secondary {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800;
  }

  /* High contrast text for better readability */
  .text-high-contrast {
    @apply text-gray-900;
  }
  
  .text-medium-contrast {
    @apply text-gray-700;
  }
  
  .text-low-contrast {
    @apply text-gray-500;
  }

  /* Animation classes for comment reply forms */
  .animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
  }

  .animate-fade-out {
    animation: fadeOut 0.5s ease-in-out forwards;
  }

  .animate-slide-out {
    animation: slideOut 0.5s ease-in-out forwards;
  }

  .animate-scale-down {
    animation: scaleDown 0.3s ease-in-out forwards;
  }

  /* Loading spinner */
  .spinner {
    border-top-color: transparent;
    animation: spin 1s linear infinite;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
}

@keyframes slideOut {
  from {
    max-height: 1000px;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
  }
  to {
    max-height: 0;
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
  }
}

@keyframes scaleDown {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.95);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}