/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY · Global type system
   ══════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

/* ── Headings ──────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
}

h2 {
  font-size: var(--text-h2);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-8);
}

h3 {
  font-size: var(--text-h3);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

h4 {
  font-size: var(--text-h4);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

/* ── Body sizes ────────────────────────────────────────────── */

.body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  font-weight: 300;
}

p {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

/* ── Display (Bebas Neue) ──────────────────────────────────── */

.display {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: var(--leading-tight);
}

/* ── Section eyebrow ───────────────────────────────────────── */

.section-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

/* ── Links ─────────────────────────────────────────────────── */

a {
  color: inherit;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-accent-light);
}

/* ── Strong / Em ───────────────────────────────────────────── */

strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

em {
  font-style: italic;
  color: var(--color-text-secondary);
}

/* ── Labels & captions ─────────────────────────────────────── */

.label {
  font-family: var(--font-heading);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── Selection ─────────────────────────────────────────────── */

::selection {
  background-color: var(--color-accent);
  color: #0A0B0D;
}