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

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

@layer components {
  .prose {
    @apply max-w-none;
  }
  
  .prose h1 {
    @apply text-3xl font-bold mt-8 mb-4;
  }
  
  .prose h2 {
    @apply text-2xl font-semibold mt-6 mb-3;
  }
  
  .prose h3 {
    @apply text-xl font-semibold mt-4 mb-2;
  }
  
  .prose p {
    @apply mb-4 leading-relaxed;
  }
  
  .prose code {
    @apply bg-gray-100 px-1.5 py-0.5 rounded text-sm font-mono;
  }
  
  .prose pre {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
  }
  
  .prose pre code {
    @apply bg-transparent p-0 text-gray-100;
  }
  
  .prose ul, .prose ol {
    @apply mb-4 ml-6;
  }
  
  .prose li {
    @apply mb-2;
  }
  
  .prose a {
    @apply text-primary-600 hover:text-primary-700 underline;
  }
  
  .prose blockquote {
    @apply border-l-4 border-primary-300 pl-4 italic my-4;
  }
}