/**
 * GenieBlocks Landing — Typography system
 * Spec: Inter, single font; exact sizes per TYPOGRAPHY.md.
 * Breakpoint: 768px for mobile sizes.
 */

/* ---- Base (TYPOGRAPHY.md: single font Inter) ---- */
body,
#main,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--gb-font-family);
}

/* ---- Headings ---- */
.gb-h1 {
  font-size: var(--gb-text-h1);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--gb-tracking-tight);
}
.gb-h2 {
  font-size: var(--gb-text-h2);
  font-weight: 700;
  line-height: var(--gb-leading-snug);
  letter-spacing: 0;
}
.gb-h3 {
  font-size: var(--gb-text-h3);
  font-weight: 600;
  line-height: var(--gb-leading-normal);
  letter-spacing: 0;
}

/* ---- Body ---- */
.gb-body-lg {
  font-size: var(--gb-text-body-lg);
  font-weight: 400;
  line-height: var(--gb-leading-relaxed);
}
.gb-body {
  font-size: var(--gb-text-body);
  font-weight: 400;
  line-height: var(--gb-leading-relaxed);
}
.gb-body-sm {
  font-size: var(--gb-text-body-sm);
  font-weight: 400;
  line-height: var(--gb-leading-body-sm);
}

/* ---- Buttons ---- */
.gb-btn {
  font-size: var(--gb-text-btn);
  font-weight: 600;
  letter-spacing: var(--gb-tracking-btn);
  text-transform: none;
}
.gb-btn:focus-visible {
  outline: none;
  box-shadow: var(--gb-focus-ring);
}

/* ---- Measure (line length, TYPOGRAPHY §4) ---- */
.gb-measure-hero {
  max-width: var(--gb-measure-hero);
}
.gb-measure-body {
  max-width: var(--gb-measure-body);
}

/* Vertical rhythm: prefer 8px base; after H1 1–1.5rem to subtext, 1.5–2rem to buttons; after H2 1rem to first paragraph; between sections 3–4rem desktop / 2.5–3rem mobile (see style.css section padding). */

/* ---- Mobile: single breakpoint 768px ---- */
@media (max-width: 768px) {
  .gb-h1 {
    font-size: var(--gb-text-h1-mobile);
    line-height: 1.15;
  }
  .gb-h2 {
    font-size: var(--gb-text-h2-mobile);
  }
  .gb-h3 {
    font-size: var(--gb-text-h3-mobile);
  }
  .gb-body-lg {
    font-size: var(--gb-text-body-lg-mobile);
  }
  .gb-body-sm {
    font-size: var(--gb-text-body-sm-mobile);
  }
  .gb-btn {
    font-size: var(--gb-text-btn-mobile);
  }
}