/* app/assets/stylesheets/base/typography.css
   ─────────────────────────────────────────────────────────────────────────────
   Newspaper-editorial type system.
   Serif for headlines. Sans for body and UI. Mono for data.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Heading scale ───────────────────────────────────────────────────────── */

.headline-xl {
  font-family:    var(--font-serif);
  font-size:      var(--text-4xl);
  font-weight:    700;
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-black);
}

.headline-lg {
  font-family:    var(--font-serif);
  font-size:      var(--text-3xl);
  font-weight:    700;
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-black);
}

.headline-md {
  font-family:    var(--font-serif);
  font-size:      var(--text-2xl);
  font-weight:    700;
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

.headline-sm {
  font-family:    var(--font-serif);
  font-size:      var(--text-xl);
  font-weight:    700;
  line-height:    var(--leading-snug);
}

/* ── Editorial classes ───────────────────────────────────────────────────── */

/* The opening sentence of an article — slightly larger, serif */
.lead {
  font-family: var(--font-serif);
  font-size:   var(--text-lg);
  line-height: var(--leading-normal);
  color:       var(--text-primary);
}

/* Section label above a headline — all-caps, small, tracked */
.eyebrow {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--text-secondary);
}

/* Author / editor credit line */
.byline {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
}

/* Image or chart caption */
.caption {
  font-family:  var(--font-sans);
  font-size:    var(--text-xs);
  color:        var(--text-muted);
  font-style:   italic;
  margin-top:   var(--space-1);
}

/* Data values — tabular figures, monospace */
.data-label {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--text-secondary);
}

.data-value {
  font-family: var(--font-mono);
  font-size:   var(--text-base);
  font-weight: 600;
  color:       var(--text-primary);
}

/* Stat number — large display figure */
.stat-number {
  font-family:    var(--font-sans);
  font-size:      var(--text-3xl);
  font-weight:    700;
  letter-spacing: var(--tracking-tight);
  color:          var(--color-black);
  line-height:    1;
}

/* Inline code */
code {
  font-family:      var(--font-mono);
  font-size:        0.875em;
  background:       var(--color-gray-100);
  padding:          0.1em 0.35em;
  border-radius:    var(--radius-sm);
  color:            var(--color-blue-700);
}

/* ── Utility text classes ─────────────────────────────────────────────────── */

.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-accent    { color: var(--accent-color); }
.text-danger    { color: var(--color-red-600); }
.text-success   { color: var(--color-green-600); }
.text-warning   { color: var(--color-amber-500); }

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }

.font-serif { font-family: var(--font-serif); }
.font-sans  { font-family: var(--font-sans); }
.font-mono  { font-family: var(--font-mono); }

.font-bold   { font-weight: 700; }
.font-normal { font-weight: 400; }

.uppercase { text-transform: uppercase; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }