/* ============================================================
   V2 Design System — Typography
   Google Fonts import + heading hierarchy + utility type classes.
   Depends on: tokens.css (--font-display, --font-mono, --font-body,
               --text, --text-sec, --text-muted)
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;600;700;900&family=Martian+Mono:wght@300;400;600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Headings ── */

/* Slide title — used in .slide-header__title */
h1,
.slide-title {
  font-family: var(--font-display);
  font-size:   18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color:       var(--text);
}

/* Block title — used in block headers, card headers */
h2,
.block-title {
  font-family: var(--font-display);
  font-size:   16px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color:       var(--text);
}

/* Card title — used in .card, .metric, component headers */
h3,
.card-title {
  font-family: var(--font-display);
  font-size:   13px;
  font-weight: 700;
  line-height: 1.4;
  color:       var(--text);
}

/* ── Body text ── */
.body-text {
  font-size:   var(--fs-slide-body);
  line-height: 1.55;
  color:       var(--text-sec);
}

/* ── Monospace label — uppercase tracking labels ── */
.mono-label {
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color:          var(--text-muted);
}

/* Larger variant for eyebrows / section markers */
.mono-label--lg {
  font-size:      10px;
  letter-spacing: 3px;
}

/* ── Caption — small descriptive text ── */
.caption {
  font-family:    var(--font-mono);
  font-size:      9px;
  letter-spacing: 1px;
  color:          var(--text-muted);
  line-height:    1.45;
}

/* ── Amount — numeric display ── */
.amount {
  font-family:           var(--font-mono);
  font-size:             12px;
  font-weight:           600;
  font-variant-numeric:  tabular-nums;
  white-space:           nowrap;
}

.amount--lg {
  font-size: 20px;
  font-family: var(--font-display);
  font-weight: 900;
}

/* ── Tabular numbers ── */
.tabnum {
  font-variant-numeric: tabular-nums;
}

/* ── Font weight utilities ── */
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-900 { font-weight: 900; }

/* ── Font size utilities ── */
.fs-xs  { font-size: 9px; }
.fs-sm  { font-size: 10.5px; }
.fs-md  { font-size: 12px; }
.fs-lg  { font-size: 14px; }
.fs-xl  { font-size: 18px; }
.fs-2xl { font-size: 22px; }
.fs-3xl { font-size: 30px; }

/* ── Font family utilities ── */
.mono   { font-family: var(--font-mono); }
.display { font-family: var(--font-display); }