/* Clean font setup - Tailwind will handle everything else */
body {
  font-family: 'Manrope', 'Helvetica Neue', 'Arial', sans-serif;
}

/* Ensure all headings use serif by default */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', 'Georgia', serif;
}

/* Links in headings should also use serif */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  font-family: 'Playfair Display', 'Georgia', serif !important;
}

/* Clean link styles using standard Tailwind colors */
a {
  color: #0284c7; /* Tailwind sky-600 */
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: #0369a1; /* Tailwind sky-700 */
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* Exception: Links inside headings should use heading colors */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: #6b7280; /* Tailwind gray-500 */
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* Standard list styling */
ul, ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.25rem;
  line-height: 1.625; /* Tailwind leading-relaxed equivalent */
}

/* Clean blockquote styling using Tailwind values */
blockquote {
  font-size: 1.125rem; /* Tailwind text-lg */
  font-style: italic;
  line-height: 1.625; /* Tailwind leading-relaxed */
  margin: 1.5rem 0;
  padding-left: 1.5rem;
  border-left: 4px solid #e5e7eb; /* Tailwind gray-200 */
  color: #6b7280; /* Tailwind gray-500 */
}

/* Clean code styling */
code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 0.875rem; /* Tailwind text-sm */
  background-color: #f3f4f6; /* Tailwind gray-100 */
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
}

pre {
  background-color: #1f2937; /* Tailwind gray-800 */
  color: #f9fafb; /* Tailwind gray-50 */
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0;
}

pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
}

/* Clean utility classes using standard values */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Responsive typography using Tailwind breakpoints */
@media (max-width: 768px) {
  h1 {
    font-size: 2.25rem; /* Tailwind text-4xl */
  }
  
  h2 {
    font-size: 1.875rem; /* Tailwind text-3xl */
  }
  
  h3 {
    font-size: 1.5rem; /* Tailwind text-2xl */
  }
  
  h4 {
    font-size: 1.25rem; /* Tailwind text-xl */
  }
}