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

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-surface text-content-primary font-sans;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    @apply bg-surface;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-surface-overlay rounded-full border-2 border-surface;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-border;
  }
}

@layer components {
  .card {
    @apply bg-surface-raised border border-border rounded-xl p-6;
  }

  .card-compact {
    @apply bg-surface-raised border border-border rounded-lg p-4;
  }

  .btn-primary {
    @apply bg-brand-500 hover:bg-brand-600 text-white font-medium px-4 py-2 rounded-lg transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-surface disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-secondary {
    @apply bg-surface-overlay hover:bg-border-light text-content-primary font-medium px-4 py-2 rounded-lg transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-surface disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-danger {
    @apply bg-status-error/10 hover:bg-status-error/20 text-status-error font-medium px-4 py-2 rounded-lg transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-status-error focus:ring-offset-2 focus:ring-offset-surface disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-ghost {
    @apply hover:bg-surface-overlay text-content-secondary hover:text-content-primary font-medium px-4 py-2 rounded-lg transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2 focus:ring-offset-surface;
  }

  .input-field {
    @apply bg-surface border border-border rounded-lg px-3 py-2 text-content-primary placeholder-content-muted focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-brand-500 transition-colors duration-150;
  }

  .skeleton {
    @apply bg-surface-overlay rounded animate-pulse;
  }

  .badge {
    @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium;
  }
}

@layer utilities {
  /* Prose customization for premium readability */
  .prose pre {
    @apply bg-surface-raised border border-border rounded-xl shadow-lg !important;
  }
  
  .prose code {
    @apply font-mono !important;
  }

  .animate-fade-in {
    animation: fadeIn 0.15s ease-out;
  }

  .animate-slide-in {
    animation: slideIn 0.2s ease-out;
  }

  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  .skeleton-shimmer {
    background: linear-gradient(
      90deg,
      theme('colors.surface.overlay') 25%,
      theme('colors.border.DEFAULT') 50%,
      theme('colors.surface.overlay') 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }
}