/* ============================================================
   typography.css — type roles, base styles, shared text patterns
   ============================================================ */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--bg);
  letter-spacing: 0.01em;
}

/* ---- Display / headings — Satoshi, bold and geometric ---- */
.display,
.section__title,
.hero__title,
.project__name,
.studio__statement,
.feature__title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  font-optical-sizing: auto;
}

.hero__title,
.studio__statement {
  line-height: var(--lh-tight);
}

/* Accent within display type — colored, upright (Satoshi has no italic) */
.accent-italic {
  color: var(--accent-text);
}

/* ---- UI type (nav, labels, buttons, meta) ---- */
.eyebrow,
.hero__eyebrow,
.nav__link,
.btn,
.project__industry,
.project__index,
.service__index,
.industry,
.menu__link,
.footer__nav a,
.tag {
  font-family: var(--font-ui);
}

/* ---- Eyebrow / kicker label ---- */
.eyebrow,
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: #ffffff;
}

/* ---- Section titles ---- */
.section__title {
  font-size: var(--fs-h2);
  max-width: 20ch;
}

.section__lead {
  font-size: var(--fs-lead);
  color: #ffffff;
  max-width: 54ch;
  line-height: 1.5;
}

/* ---- Body copy helpers ---- */
.lead {
  font-size: var(--fs-lead);
  color: #ffffff;
}

.muted {
  color: #ffffff;
}

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

::selection {
  background: var(--accent);
  color: var(--on-accent);
}