@import '@fontsource/pt-serif/400.css';
@import '@fontsource/pt-serif/400-italic.css';
@import '@fontsource/pt-serif/700.css';
@import '@fontsource/ibm-plex-sans/400.css';
@import '@fontsource/ibm-plex-sans/500.css';
@import '@fontsource/ibm-plex-sans/600.css';

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

@layer base {
  html { -webkit-text-size-adjust: 100%; }
  body {
    @apply font-sans bg-paper text-ink antialiased;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-serif text-ink;
  }
  a {
    @apply text-accent hover:underline underline-offset-2;
  }
}

@layer components {
  .prose-article {
    @apply font-serif text-[1.05rem] leading-[1.7] text-ink;
  }
  .prose-article p { @apply my-4; }
  .prose-article h1, .prose-article h2, .prose-article h3 {
    @apply font-serif font-bold mt-8 mb-3;
  }
  .prose-article h1 { @apply text-2xl; }
  .prose-article h2 { @apply text-xl; }
  .prose-article h3 { @apply text-lg; }
  .prose-article img {
    @apply my-4 max-w-full h-auto rounded shadow-sm border border-rule;
  }
  .prose-article a { @apply text-accent underline underline-offset-2; }
  .prose-article ul { @apply list-disc list-inside my-4; }
  .prose-article ol { @apply list-decimal list-inside my-4; }
  .prose-article blockquote {
    @apply border-l-2 border-accent pl-4 italic my-4 text-muted;
  }
  .prose-article strong { @apply font-bold; }
  .prose-article em { @apply italic; }
  .rule-line {
    @apply border-t border-rule;
  }
}