@import "tailwindcss";

/* Typography Styles */
@layer base {
  /* Headings */
  h1 {
    @apply text-4xl font-bold text-gray-900 mb-6 mt-8;
    line-height: 1.2;
  }

  h2 {
    @apply text-3xl font-semibold text-gray-800 mb-5 mt-7;
    line-height: 1.3;
  }

  h3 {
    @apply text-2xl font-semibold text-gray-800 mb-4 mt-6;
    line-height: 1.4;
  }

  h4 {
    @apply text-xl font-medium text-gray-700 mb-3 mt-5;
    line-height: 1.4;
  }

  h5 {
    @apply text-lg font-medium text-gray-700 mb-2 mt-4;
    line-height: 1.5;
  }

  h6 {
    @apply text-base font-medium text-gray-600 mb-2 mt-4;
    line-height: 1.5;
  }

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

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

  li {
    @apply text-gray-700 leading-relaxed;
  }

  /* Nested lists */
  ul ul, ol ol, ul ol, ol ul {
    @apply mt-2 ml-6;
  }

  ul ul {
    @apply list-[circle];
  }

  ul ul ul {
    @apply list-[square];
  }

  /* Blockquotes */
  blockquote {
    @apply border-l-4 border-blue-500 bg-blue-50 pl-6 py-4 my-6 italic text-gray-700;
    position: relative;
  }

  blockquote::before {
    content: '"';
    @apply text-4xl text-blue-400 font-serif absolute -left-2 top-2;
  }

  blockquote p {
    @apply mb-0;
  }

  blockquote cite {
    @apply block text-sm text-gray-500 mt-2 not-italic;
  }

  /* Inline quotes */
  q {
    @apply text-gray-600;
  }

  q::before {
    content: '"';
  }

  q::after {
    content: '"';
  }

  /* Paragraphs */
  p {
    @apply text-gray-700 leading-relaxed mb-4;
  }

  /* Links - no underline */
  a {
    @apply text-blue-600 hover:text-blue-800 transition-colors duration-200;
  }

  /* Code blocks */
  pre {
    @apply bg-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
  }

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

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

  /* Tables */
  table {
    @apply w-full border-collapse border border-gray-300 mb-4;
  }

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

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

  /* Horizontal rule */
  hr {
    @apply border-t border-gray-300 my-8;
  }

  /* Definition lists */
  dl {
    @apply mb-4;
  }

  dt {
    @apply font-semibold text-gray-800 mb-1;
  }

  dd {
    @apply text-gray-700 mb-3 ml-4;
  }
}