/* ─────────────────────────────────────────
   typography.css — Hidden in Numbers
   Font imports & text utility classes
───────────────────────────────────────── */

/* Google Fonts — swap for self-hosted woff2 in production */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Rajdhani:wght@400;500;600;700&display=swap');

/* ── Base Body ── */
body {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-main);
  background: var(--color-black);
}

/* ── Display Headings ── */
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
.h2 { font-size: clamp(1.8rem, 4vw, 3.5rem); }
.h3 { font-size: clamp(1.2rem, 2.5vw, 2rem); }

/* ── Label / Eyebrow ── */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ── Mono body text ── */
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--color-text-mid);
}

/* ── Code / binary text ── */
.code-text {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

/* ── Uppercase tracking ── */
.caps {
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* ── Dim text ── */
.text-dim  { color: var(--color-text-dim); }
.text-mid  { color: var(--color-text-mid); }
.text-main { color: var(--color-text-main); }
.text-white { color: var(--color-white); }
.text-accent { color: var(--color-accent); }