/* =========================================================
   Semantic type classes
   Uso directo en markup (.t-display, .t-h2, .t-body, etc.).
   ========================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--fg); }

.t-eyebrow {
  font: 600 var(--text-xs) / 1 var(--font-display);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--green-600);
}

.t-display {
  font: 700 clamp(40px, 5.2vw, 72px) / var(--leading-tight) var(--font-display);
  letter-spacing: var(--track-tight);
  color: var(--fg);
  text-wrap: balance;
}

.t-h1 {
  font: 700 clamp(36px, 4vw, 56px) / 1.1 var(--font-display);
  letter-spacing: var(--track-tight);
}

.t-h2 {
  font: 600 clamp(28px, 3vw, 40px) / 1.15 var(--font-display);
  letter-spacing: var(--track-snug);
}

.t-h3 {
  font: 600 var(--text-2xl) / 1.25 var(--font-display);
  letter-spacing: var(--track-snug);
}

.t-h4 {
  font: 600 var(--text-xl) / 1.3 var(--font-display);
}

.t-lead {
  font: 400 var(--text-lg) / var(--leading-relaxed) var(--font-body);
  color: var(--fg-muted);
  text-wrap: pretty;
}

.t-body {
  font: 400 var(--text-base) / var(--leading-relaxed) var(--font-body);
  color: var(--fg);
}

.t-body-sm {
  font: 400 var(--text-sm) / var(--leading-relaxed) var(--font-body);
  color: var(--fg-muted);
}

.t-meta,
.t-caption {
  font: 500 var(--text-xs) / 1.4 var(--font-body);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
}

.t-link {
  color: var(--green-600);
  font-weight: 600;
  text-decoration: none;
}
.t-link:hover { color: var(--green-700); }