@import "tailwindcss";

@layer components {
  /* Custom prose styles */
  .prose {
    @apply max-w-none;
  }

  /* Article content styles */
  .article-content {
    @apply max-w-none leading-relaxed;
  }

  .article-content h1 {
    @apply text-3xl font-bold mb-4 mt-6;
  }

  .article-content h2 {
    @apply text-2xl font-semibold mb-3 mt-8;
  }

  .article-content h3 {
    @apply text-xl font-semibold mb-2 mt-6;
  }

  .article-content p {
    @apply mb-4;
  }

  .article-content ul,
  .article-content ol {
    @apply mb-4 ml-6;
  }

  .article-content li {
    @apply mb-2;
  }

  .article-content code {
    @apply bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-sm font-mono;
  }

  .article-content pre {
    @apply bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto mb-4;
  }

  /* Editor styles */
  .editor-container {
    @apply min-h-[500px] border rounded-lg;
  }

  /* Comment thread styles */
  .comment-thread {
    @apply border-l-2 border-gray-200 dark:border-gray-700 pl-4 ml-4;
  }
}