/* ═══════════════════════════════════════════════════════════
   TIANX STUDIO — Typography
   ═══════════════════════════════════════════════════════════ */

/* ─── DISPLAY SCALE ────────────────────────────────────── */

.display-hero {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.display-xl {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.display-lg {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 400;
  line-height: 1.12;
}

.display-md {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 400;
  line-height: 1.18;
}

.display-sm {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 400;
  line-height: 1.22;
}

/* ─── HEADING SCALE ────────────────────────────────────── */

.heading-lg {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.heading-sm {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* ─── BODY SCALE ───────────────────────────────────────── */

.body-lg {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

.body-text {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 52ch;
}

.body-sm {
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ─── LABEL & CODE ─────────────────────────────────────── */

.label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.label--signal {
  color: var(--signal);
}

.code {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--signal);
  background: var(--signal-pale);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* ─── EMPHASIS ─────────────────────────────────────────── */

em {
  font-style: italic;
  font-family: var(--font-display);
  font-size: 1.05em;
}

strong {
  font-weight: 600;
}

/* ─── TEXT COLORS ──────────────────────────────────────── */

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-inverse   { color: var(--text-inverse); }
.text-accent    { color: var(--accent); }
.text-signal    { color: var(--signal); }