/* ============================================================
   typography.css — Font imports and typographic utilities
   ============================================================ */

/* Google Fonts — loaded via <link> in index.html for performance.
   This file documents the import config for reference:

   @import url('https://fonts.googleapis.com/css2?
     family=Cardo:ital,wght@0,400;0,700;1,400
     &family=Inter:wght@300;400;500
     &family=Montserrat:wght@400;500;600
     &family=Roboto:wght@400;500
     &display=swap');
*/

/* ── Base body typography ──────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
}

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

/* Small uppercase label — "ABOUT", "CONNECT", "BASED" */
.label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Large serif display text */
.display {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Body copy */
.body-copy {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
}

/* Monospace-style metadata (dates, numbers) */
.meta-text {
  font-family: var(--font-alt);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-normal);
}