@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600&family=JetBrains+Mono&display=swap');

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-offwhite);
  background-color: var(--color-charcoal);
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  line-height: 1;
  font-weight: 400;
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

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

/* ── Font Size Utilities ── */
.fs-xs { font-size: var(--text-xs); }
.fs-sm { font-size: var(--text-sm); }
.fs-md { font-size: var(--text-md); }
.fs-lg { font-size: var(--text-lg); }

/* ── Color Utilities ── */
.text-rust      { color: var(--color-rust); }
.text-sand      { color: var(--color-sand); }
.text-concrete  { color: var(--color-concrete); }
.text-offwhite  { color: var(--color-offwhite); }

/* ── Eyebrow ── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-rust);
}

/* ── Section Title ── */
.section-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
}

/* ── Body Large ── */
.body-large {
  font-size: var(--text-md);
  color: var(--color-sand-light);
  font-weight: 300;
}