/**
 * Bengal SSG Default Theme
 * Typography Styles
 */

/* ============================================
   PROSE / CONTENT TYPOGRAPHY
   ============================================ */

.prose {
  max-width: var(--prose-width);
  color: var(--color-text-primary);
}

.prose>*+* {
  margin-top: var(--space-6);
}

/* Headings */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  scroll-margin-top: var(--space-20);
  /* For anchor links */
  letter-spacing: var(--letter-spacing-tight);
}

.prose h1 {
  font-size: var(--text-heading-1);
  font-weight: var(--font-extrabold);
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-tighter);
}

.prose h2 {
  font-size: var(--text-heading-2);
  font-weight: var(--font-bold);
  margin-top: 1.75em;
  margin-bottom: 0.5em;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--color-border-light);
  letter-spacing: var(--letter-spacing-tight);
}

.prose h3 {
  font-size: var(--text-heading-3);
  font-weight: var(--font-semibold);
  margin-top: 1.5em;
}

.prose h4 {
  font-size: var(--text-heading-4);
  font-weight: var(--font-semibold);
  margin-top: 1.25em;
}

.prose h5 {
  font-size: var(--text-heading-5);
  font-weight: var(--font-medium);
  margin-top: 1.25em;
}

.prose h6 {
  font-size: var(--text-heading-6);
  font-weight: var(--font-medium);
  margin-top: 1.25em;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-secondary);
}

/* Paragraphs */
.prose p {
  margin-bottom: 1.25em;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
}

.prose p:last-child {
  margin-bottom: 0;
}

/* Lead paragraph (first paragraph) */
.prose>p:first-of-type {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* Explicit lead class for introductory paragraphs */
.lead,
.prose .lead {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-6);
}

/* Lead in header contexts - add border for visual separation */
.docs-header .lead,
header .lead {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

/* Responsive lead styles */
@media (max-width: 768px) {

  .lead,
  .prose .lead {
    font-size: var(--text-base);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
  }
}

/* Links */
.prose a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-light);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: all var(--transition-fast);
  font-weight: var(--font-weight-medium);
}

.prose a:hover {
  color: var(--color-text-link-hover);
  text-decoration-color: var(--color-text-link-hover);
  text-decoration-thickness: 2px;
}

.prose a:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--border-radius-small);
}

/* Strong & Emphasis */
.prose strong {
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
}

.prose em {
  font-style: italic;
}

/* Lists */
.prose ul,
.prose ol {
  margin: var(--space-6) 0;
  padding-left: var(--space-8);
}

.prose ul {
  list-style-type: disc;
}

.prose ol {
  list-style-type: decimal;
}

.prose li {
  margin: var(--space-2) 0;
  line-height: var(--leading-relaxed);
}

.prose li>ul,
.prose li>ol {
  margin: var(--space-2) 0;
}

/* Nested lists */
.prose ul ul,
.prose ol ul {
  list-style-type: circle;
}

.prose ul ul ul,
.prose ol ul ul,
.prose ul ol ul,
.prose ol ol ul {
  list-style-type: square;
}

/* Blockquotes */
.prose blockquote {
  margin: var(--space-6) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--color-border-light);
  background-color: transparent;
  border-radius: 0;
  font-style: italic;
  color: var(--color-text-secondary);
  opacity: 0.9;
}

.prose blockquote p {
  margin: 0 0 var(--space-2) 0;
}

.prose blockquote p:last-child {
  margin-bottom: 0;
}

.prose blockquote cite {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-style: normal;
  color: var(--color-text-tertiary);
  opacity: 0.8;
}

.prose blockquote cite::before {
  content: "— ";
}

/* Blockquote headers should not have anchor links */
.prose blockquote h1,
.prose blockquote h2,
.prose blockquote h3,
.prose blockquote h4,
.prose blockquote h5,
.prose blockquote h6 {
  font-style: normal;
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Code */
.prose code {
  padding: 0.125em 0.375em;
  background-color: var(--color-bg-code);
  border-radius: var(--radius-sm);
  font-size: 0.875em;
  font-family: var(--font-mono);
  color: var(--color-text-primary);
}

.prose pre {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  background-color: var(--color-bg-code);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: var(--leading-relaxed);
}

.prose pre code {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: var(--text-sm);
}

/* Horizontal Rule */
.prose hr {
  margin: var(--space-12) 0;
  border: none;
  border-top: 1px solid var(--color-border);
}

/* Images */
.prose img {
  margin: var(--space-8) auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.prose figure {
  margin: var(--space-8) 0;
}

.prose figcaption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--color-text-muted);
}

/* Tables */
.prose table {
  margin: var(--space-8) 0;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.prose thead {
  border-bottom: 2px solid var(--color-border);
}

.prose th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  background-color: var(--color-bg-secondary);
}

.prose td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
}

.prose tbody tr:hover {
  background-color: var(--color-bg-hover);
}

/* Definition Lists */
.prose dl {
  margin: var(--space-6) 0;
}

.prose dt {
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-4);
}

.prose dd {
  margin-left: var(--space-6);
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text Sizes */
.text-xs {
  font-size: var(--text-xs);
}

.text-sm {
  font-size: var(--text-sm);
}

.text-base {
  font-size: var(--text-base);
}

.text-lg {
  font-size: var(--text-lg);
}

.text-xl {
  font-size: var(--text-xl);
}

.text-2xl {
  font-size: var(--text-2xl);
}

.text-3xl {
  font-size: var(--text-3xl);
}

.text-4xl {
  font-size: var(--text-4xl);
}

.text-5xl {
  font-size: var(--text-5xl);
}

/* Font Weights */
.font-light {
  font-weight: var(--font-light);
}

.font-normal {
  font-weight: var(--font-normal);
}

.font-medium {
  font-weight: var(--font-medium);
}

.font-semibold {
  font-weight: var(--font-semibold);
}

.font-bold {
  font-weight: var(--font-bold);
}

.font-extrabold {
  font-weight: var(--font-extrabold);
}

/* Text Colors */
.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

/* Line Heights */
.leading-none {
  line-height: var(--leading-none);
}

.leading-tight {
  line-height: var(--leading-tight);
}

.leading-snug {
  line-height: var(--leading-snug);
}

.leading-normal {
  line-height: var(--leading-normal);
}

.leading-relaxed {
  line-height: var(--leading-relaxed);
}

.leading-loose {
  line-height: var(--leading-loose);
}

/* Text Alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

/* Text Transform */
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

/* Text Decoration */
.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

.no-underline {
  text-decoration: none;
}

/* Letter Spacing */
.tracking-tight {
  letter-spacing: var(--tracking-tight);
}

.tracking-normal {
  letter-spacing: var(--tracking-normal);
}

.tracking-wide {
  letter-spacing: var(--tracking-wide);
}

.tracking-wider {
  letter-spacing: var(--tracking-wider);
}

.tracking-widest {
  letter-spacing: var(--tracking-widest);
}

/* Font Families */
.font-sans {
  font-family: var(--font-sans);
}

.font-serif {
  font-family: var(--font-serif);
}

.font-mono {
  font-family: var(--font-mono);
}
