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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
  
  /* Container consistency */
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  /* Rich text content styling */
  .prose {
    @apply text-gray-800 leading-relaxed;
  }
  
  .prose h1 {
    @apply text-3xl font-bold mb-4 text-gray-900;
  }
  
  .prose h2 {
    @apply text-2xl font-semibold mb-3 text-gray-900;
  }
  
  .prose h3 {
    @apply text-xl font-semibold mb-2 text-gray-900;
  }
  
  .prose p {
    @apply mb-4;
  }
  
  .prose ul, .prose ol {
    @apply mb-4 pl-6;
  }
  
  .prose li {
    @apply mb-1;
  }
  
  .prose blockquote {
    @apply border-l-4 border-gray-300 pl-4 italic text-gray-600 mb-4;
  }
  
  .prose pre {
    @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
  }
  
  .prose code {
    @apply bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-sm;
  }
  
  .prose pre code {
    @apply bg-transparent text-gray-100 p-0;
  }
  
  .prose a {
    @apply text-blue-600 hover:text-blue-800 underline;
  }
  
  .prose img {
    @apply rounded-lg shadow-md mb-4;
  }
}