@layer base {
  a {
    @apply text-blue-600 underline hover:text-blue-800;
  }

  h1 {
    @apply text-4xl font-bold mb-4 mt-6;
  }

  h2 {
    @apply text-2xl font-bold mb-3 mt-5;
  }

  h3 {
    @apply text-lg font-bold mb-2 mt-4;
  }

  h4, h5, h6 {
    @apply text-lg font-medium mb-2 mt-3;
  }

  p {
    @apply mb-4 leading-relaxed;
  }

  ul {
    @apply list-disc list-inside mb-4 space-y-1;
  }

  ol {
    @apply list-decimal list-inside mb-4 space-y-1;
  }

  li {
    @apply pl-2;
  }

  strong, b {
    @apply font-bold;
  }

  em, i {
    @apply italic;
  }

  blockquote {
    @apply border-l-4 border-gray-300 pl-4 py-2 my-4 italic text-gray-600;
  }

  hr {
    @apply my-6 border-gray-200;
  }

  code {
    @apply px-1.5 py-0.5 rounded bg-gray-100 text-sm font-mono;
  }

  pre {
    @apply p-4 rounded-md bg-gray-100 overflow-x-auto mb-4;
  }

  pre code {
    @apply p-0 bg-transparent;
  }

  img {
    @apply max-w-full h-auto align-middle;
  }

  table {
    @apply w-full border border-gray-200 mb-4;
  }

  th, td {
    @apply border border-gray-200 px-4 py-2 text-left;
  }

  th {
    @apply bg-gray-100 font-medium;
  }
}