/**
 * PharmEtrade — Typography System
 */

/* ── Display / Heading ────────────────────────────── */
.text-display {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.h1 { font-size: var(--text-hero);  font-family: var(--font-display); font-weight: 400; line-height: 1.08; }
.h2 { font-size: var(--text-3xl);   font-family: var(--font-display); font-weight: 400; line-height: 1.15; }
.h3 { font-size: var(--text-xl);    font-family: var(--font-display); font-weight: 400; line-height: 1.25; }
.h4 { font-size: var(--text-lg);    font-weight: var(--weight-semibold); line-height: 1.35; }
.h5 { font-size: var(--text-base);  font-weight: var(--weight-semibold); line-height: 1.4; }
.h6 { font-size: var(--text-sm);    font-weight: var(--weight-semibold); line-height: 1.4; }

/* ── Label / Tag ──────────────────────────────────── */
.label-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.label-tag--green { color: var(--color-green); }
.label-tag--navy  { color: var(--color-navy); }
.label-tag--muted { color: var(--color-text-muted); }

/* ── Body Sizes ───────────────────────────────────── */
.text-lg   { font-size: var(--text-lg); }
.text-md   { font-size: var(--text-md); }
.text-base { font-size: var(--text-base); }
.text-sm   { font-size: var(--text-sm); }
.text-xs   { font-size: var(--text-xs); }

/* ── Weight Helpers ───────────────────────────────── */
.font-light    { font-weight: var(--weight-light); }
.font-regular  { font-weight: var(--weight-regular); }
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }

/* ── Color Helpers ────────────────────────────────── */
.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-inverse   { color: var(--color-text-inverse); }
.text-green     { color: var(--color-green); }
.text-navy      { color: var(--color-navy); }
.text-danger    { color: var(--color-danger); }
.text-warning   { color: var(--color-warning); }

/* ── Prose ────────────────────────────────────────── */
.prose {
  font-size: var(--text-md);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
  max-width: 65ch;
}

.prose p + p { margin-top: var(--space-4); }

.prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text-primary);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.prose h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.prose ul, .prose ol {
  padding-left: var(--space-6);
  margin: var(--space-4) 0;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li { margin-bottom: var(--space-2); }

.prose strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

.prose a {
  color: var(--color-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover { color: var(--color-green-dark); }

.prose blockquote {
  border-left: 3px solid var(--color-green);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  font-style: italic;
  color: var(--color-text-secondary);
}