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

@layer base {
  body {
    @apply bg-bg text-text-primary antialiased;
  }
}

@layer components {
  .article-body {
    @apply text-base leading-relaxed text-text-secondary;
  }
  .article-body p {
    @apply mb-5;
  }
  .article-body h2 {
    @apply text-2xl font-bold text-text-primary mt-9 mb-4;
  }
  .article-body h3 {
    @apply text-xl font-semibold text-text-primary mt-7 mb-3;
  }
  .article-body strong {
    @apply text-text-primary font-semibold;
  }
  .article-body a {
    @apply text-accent underline hover:text-accent-hover;
  }
  .article-body ul {
    @apply list-disc pl-6 mb-5 space-y-1;
  }
  .article-body ol {
    @apply list-decimal pl-6 mb-5 space-y-1;
  }
  .article-body blockquote {
    @apply border-l-4 border-accent bg-bg-card rounded-r-md pl-5 pr-4 py-3 my-6;
  }
  .article-body blockquote p {
    @apply mb-0 italic;
  }
  .article-body img {
    @apply rounded-md w-full my-6;
  }
  .article-body code:not(pre code) {
    @apply bg-bg-card text-accent font-mono text-sm px-1.5 py-0.5 rounded;
  }
  .article-body pre {
    @apply bg-bg-card rounded-md p-4 overflow-x-auto my-6 text-sm font-mono;
  }
  .article-body hr {
    @apply border-border my-8;
  }
}