/**
 * Global Typography System
 * Semantic typography classes based on CSS custom properties from theme system.
 * Configured via /admin/style → Typography tab
 */

/* ═══════════════════════════════════════════════════════════════
   Base Typography
   ═══════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--font-size-base, 16px);
  line-height: var(--line-height-base, 1.5);
  font-weight: var(--font-weight-normal, 400);
  letter-spacing: var(--letter-spacing-normal, 0);
}

/* ═══════════════════════════════════════════════════════════════
   Semantic Headings
   ═══════════════════════════════════════════════════════════════ */

h1, .text-h1 {
  font-size: var(--font-size-h1, 2.25rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-tight, 1.25);
  letter-spacing: var(--letter-spacing-tight, -0.025em);
  margin: 0 0 0.75rem 0;
}

.page-title {
  font-size: var(--page-title-font-size, var(--font-size-h1, 2.25rem));
  font-weight: var(--page-title-font-weight, var(--font-weight-bold, 700));
  line-height: var(--page-title-line-height, var(--line-height-tight, 1.25));
  letter-spacing: var(--page-title-letter-spacing, var(--letter-spacing-tight, -0.025em));
  color: var(--page-title-color, var(--mhn-fg, currentColor));
  margin: 0 0 var(--page-title-gap, 1.5rem);
  text-transform: var(--page-title-text-transform, none);
}

h2, .text-h2 {
  font-size: var(--font-size-h2, 1.875rem);
  font-weight: var(--font-weight-bold, 700);
  line-height: var(--line-height-tight, 1.25);
  letter-spacing: var(--letter-spacing-tight, -0.025em);
  margin: 0 0 0.625rem 0;
}

h3, .text-h3 {
  font-size: var(--font-size-h3, 1.5rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-tight, 1.25);
  letter-spacing: var(--letter-spacing-tight, -0.025em);
  margin: 0 0 0.5rem 0;
}

h4, .text-h4 {
  font-size: var(--font-size-h4, 1.25rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-normal, 1.5);
  letter-spacing: var(--letter-spacing-normal, 0);
  margin: 0 0 0.5rem 0;
}

h5, .text-h5 {
  font-size: var(--font-size-h5, 1.125rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-normal, 1.5);
  letter-spacing: var(--letter-spacing-normal, 0);
  margin: 0 0 0.375rem 0;
}

h6, .text-h6 {
  font-size: var(--font-size-h6, 1rem);
  font-weight: var(--font-weight-semibold, 600);
  line-height: var(--line-height-normal, 1.5);
  letter-spacing: var(--letter-spacing-normal, 0);
  margin: 0 0 0.375rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   Paragraph & Body Text
   ═══════════════════════════════════════════════════════════════ */

p, .text-body {
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-relaxed, 1.75);
  margin: 0 0 1rem 0;
}

.text-lead {
  font-size: var(--font-size-lg, 1.125rem);
  line-height: var(--line-height-relaxed, 1.75);
  font-weight: var(--font-weight-normal, 400);
  color: var(--mhn-fg, currentColor);
}

.text-caption, small {
  font-size: var(--font-size-sm, 0.875rem);
  line-height: var(--line-height-normal, 1.5);
  color: var(--mhn-muted, #64748b);
}

/* ═══════════════════════════════════════════════════════════════
   Font Size Utilities
   ═══════════════════════════════════════════════════════════════ */

.text-xs { font-size: var(--font-size-xs, 0.75rem); }
.text-sm { font-size: var(--font-size-sm, 0.875rem); }
.text-base { font-size: var(--font-size-base, 1rem); }
.text-lg { font-size: var(--font-size-lg, 1.125rem); }
.text-xl { font-size: var(--font-size-xl, 1.25rem); }
.text-2xl { font-size: var(--font-size-2xl, 1.5rem); }
.text-3xl { font-size: var(--font-size-3xl, 1.875rem); }
.text-4xl { font-size: var(--font-size-4xl, 2.25rem); }

/* ═══════════════════════════════════════════════════════════════
   Font Weight Utilities
   ═══════════════════════════════════════════════════════════════ */

.font-normal { font-weight: var(--font-weight-normal, 400); }
.font-medium { font-weight: var(--font-weight-medium, 500); }
.font-semibold { font-weight: var(--font-weight-semibold, 600); }
.font-bold { font-weight: var(--font-weight-bold, 700); }

/* ═══════════════════════════════════════════════════════════════
   Line Height Utilities
   ═══════════════════════════════════════════════════════════════ */

.leading-tight { line-height: var(--line-height-tight, 1.25); }
.leading-normal { line-height: var(--line-height-normal, 1.5); }
.leading-relaxed { line-height: var(--line-height-relaxed, 1.75); }

/* ═══════════════════════════════════════════════════════════════
   Letter Spacing Utilities
   ═══════════════════════════════════════════════════════════════ */

.tracking-tight { letter-spacing: var(--letter-spacing-tight, -0.025em); }
.tracking-normal { letter-spacing: var(--letter-spacing-normal, 0); }
.tracking-wide { letter-spacing: var(--letter-spacing-wide, 0.025em); }

/* ═══════════════════════════════════════════════════════════════
   Monospace Font
   ═══════════════════════════════════════════════════════════════ */

code, kbd, samp, pre, .font-mono {
  font-family: var(--font-mono, ui-monospace, monospace);
}

code, kbd, samp {
  font-size: 0.9em;
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm, 4px);
  background: var(--mhn-surface-2, #f1f5f9);
}

pre {
  font-size: 0.875rem;
  line-height: var(--line-height-relaxed, 1.75);
  padding: 1rem;
  border-radius: var(--radius-md, 10px);
  background: var(--mhn-surface-2, #f1f5f9);
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   Text Color Utilities
   ═══════════════════════════════════════════════════════════════ */

.text-muted { color: var(--mhn-muted, #64748b); }
.text-fg { color: var(--mhn-fg, #0f172a); }
.text-success { color: var(--mhn-success-fg, #065f46); }
.text-warning { color: var(--mhn-warning-fg, #92400e); }
.text-danger { color: var(--mhn-danger-fg, #991b1b); }
.text-info { color: var(--mhn-info-fg, #075985); }

/* ═══════════════════════════════════════════════════════════════
   List Styling
   ═══════════════════════════════════════════════════════════════ */

ul, ol {
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
  line-height: var(--line-height-relaxed, 1.75);
}

li {
  margin: 0.25rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   Blockquote
   ═══════════════════════════════════════════════════════════════ */

blockquote {
  margin: 0 0 1rem 0;
  padding-left: 1rem;
  border-left: 4px solid var(--mhn-border, #e2e8f0);
  font-style: italic;
  color: var(--mhn-muted, #64748b);
}

/* ═══════════════════════════════════════════════════════════════
   Horizontal Rule
   ═══════════════════════════════════════════════════════════════ */

hr {
  border: none;
  border-top: 1px solid var(--mhn-border, #e2e8f0);
  margin: 1.5rem 0;
}