/*
 * Earpedia typography foundation.
 *
 * These utilities are intentionally opt-in. Existing page templates are not
 * forced into this system until later component and page polish phases.
 */

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

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

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

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

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

.ep-display,
.ep-page-title,
.ep-section-title,
.ep-card-title,
.ep-heading {
  color: var(--ep-color-text-primary);
  font-family: var(--ep-font-family-sans);
  font-weight: var(--ep-font-weight-bold);
  letter-spacing: var(--ep-letter-spacing-none);
}

.ep-display {
  font-size: var(--ep-font-size-6xl);
  line-height: var(--ep-line-height-tight);
}

.ep-page-title {
  font-size: var(--ep-font-size-5xl);
  line-height: var(--ep-line-height-tight);
}

.ep-section-title {
  font-size: var(--ep-font-size-4xl);
  line-height: var(--ep-line-height-tight);
}

.ep-section-eyebrow,
.ep-eyebrow {
  color: var(--ep-color-brand-secondary);
  font-size: var(--ep-font-size-xs);
  font-weight: var(--ep-font-weight-bold);
  letter-spacing: var(--ep-letter-spacing-eyebrow);
  line-height: var(--ep-line-height-tight);
  text-transform: uppercase;
}

.ep-card-title {
  font-size: var(--ep-font-size-xl);
  line-height: var(--ep-line-height-snug);
}

.ep-body,
.ep-body-text {
  color: var(--ep-color-text-body);
  font-family: var(--ep-font-family-sans);
  font-size: var(--ep-font-size-base);
  line-height: var(--ep-line-height-base);
}

.ep-body-lg {
  color: var(--ep-color-text-body);
  font-family: var(--ep-font-family-sans);
  font-size: var(--ep-font-size-lg);
  line-height: var(--ep-line-height-relaxed);
}

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

.ep-meta {
  color: var(--ep-color-text-muted);
  font-size: var(--ep-font-size-sm);
  font-weight: var(--ep-font-weight-medium);
  line-height: var(--ep-line-height-snug);
}

.ep-caption {
  color: var(--ep-color-text-muted);
  font-size: var(--ep-font-size-xs);
  line-height: var(--ep-line-height-snug);
}

.ep-label {
  color: var(--ep-color-text-primary);
  font-size: var(--ep-font-size-sm);
  font-weight: var(--ep-font-weight-bold);
  line-height: var(--ep-line-height-snug);
}

.ep-button-text {
  font-size: var(--ep-font-size-base);
  font-weight: var(--ep-font-weight-bold);
  line-height: var(--ep-line-height-tight);
}

.ep-prose {
  color: var(--ep-color-text-body);
  font-family: var(--ep-font-family-sans);
  font-size: var(--ep-font-size-lg);
  line-height: var(--ep-line-height-prose);
  max-width: var(--ep-container-reading);
}

.ep-prose :where(h1, h2, h3, h4, h5, h6) {
  color: var(--ep-color-text-primary);
  font-weight: var(--ep-font-weight-bold);
  letter-spacing: var(--ep-letter-spacing-none);
  line-height: var(--ep-line-height-tight);
  margin: var(--ep-space-8) 0 var(--ep-space-4);
}

.ep-prose :where(h1) {
  font-size: var(--ep-font-size-5xl);
}

.ep-prose :where(h2) {
  font-size: var(--ep-font-size-4xl);
}

.ep-prose :where(h3) {
  font-size: var(--ep-font-size-3xl);
}

.ep-prose :where(h4) {
  font-size: var(--ep-font-size-2xl);
}

.ep-prose :where(h5) {
  font-size: var(--ep-font-size-xl);
}

.ep-prose :where(h6) {
  font-size: var(--ep-font-size-lg);
}

.ep-prose :where(p, ul, ol, blockquote, figure, table, pre, hr) {
  margin: 0 0 var(--ep-space-6);
}

.ep-prose :where(ul, ol) {
  padding-left: var(--ep-space-6);
}

.ep-prose :where(li) {
  margin-block: var(--ep-space-2);
}

.ep-prose :where(a) {
  color: var(--ep-color-link);
  font-weight: var(--ep-font-weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.ep-prose :where(a:hover) {
  color: var(--ep-color-link-hover);
}

.ep-prose :where(blockquote) {
  border-left: 4px solid var(--ep-color-brand-secondary);
  color: var(--ep-color-text-secondary);
  font-size: var(--ep-font-size-lg);
  line-height: var(--ep-line-height-relaxed);
  padding: var(--ep-space-3) 0 var(--ep-space-3) var(--ep-space-5);
}

.ep-prose :where(img) {
  border-radius: var(--ep-radius-lg);
  display: block;
  height: auto;
  max-width: 100%;
}

.ep-prose :where(figure) {
  display: grid;
  gap: var(--ep-space-2);
}

.ep-prose :where(figcaption) {
  color: var(--ep-color-text-muted);
  font-size: var(--ep-font-size-sm);
  line-height: var(--ep-line-height-snug);
}

.ep-prose :where(table) {
  border-collapse: collapse;
  display: block;
  font-size: var(--ep-font-size-base);
  line-height: var(--ep-line-height-base);
  overflow-x: auto;
  width: 100%;
}

.ep-prose :where(th, td) {
  border: 1px solid var(--ep-color-border-subtle);
  padding: var(--ep-space-3) var(--ep-space-4);
  text-align: left;
  vertical-align: top;
}

.ep-prose :where(th) {
  background: var(--ep-color-bg-surface-muted);
  color: var(--ep-color-text-primary);
  font-weight: var(--ep-font-weight-bold);
}

.ep-prose :where(code) {
  background: var(--ep-color-bg-surface-muted);
  border: 1px solid var(--ep-color-border-subtle);
  border-radius: var(--ep-radius-sm);
  color: var(--ep-color-text-primary);
  font-family: var(--ep-font-family-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
}

.ep-prose :where(pre) {
  background: var(--ep-color-bg-inverse);
  border-radius: var(--ep-radius-lg);
  color: var(--ep-color-text-inverse);
  font-family: var(--ep-font-family-mono);
  font-size: var(--ep-font-size-sm);
  line-height: var(--ep-line-height-base);
  overflow-x: auto;
  padding: var(--ep-space-5);
}

.ep-prose :where(pre code) {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
}

.ep-prose :where(hr) {
  border: 0;
  border-top: 1px solid var(--ep-color-border-subtle);
}