/* ============================================================================
   Components - Type helpers
   system/components/type-helpers.css

   Class-based typography helpers built on top of the typography tokens.
   These are the named text styles components and pages compose with -
   .gm-hero-headline, .gm-section-heading, etc.

   For raw font/size tokens see system/tokens/typography.{md,css}.
   ============================================================================ */

/* Hero headline - landing pages, big intros */
.gm .gm-hero-headline {
  font-size: var(--gm-fs-hero);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-tighter);
  line-height: var(--gm-lh-tight);
  color: var(--gm-text-primary);
}
.gm .gm-hero-headline em {
  font-style: normal;
  color: var(--gm-accent);
}

/* Section heading - top of a content section */
.gm .gm-section-heading {
  font-size: var(--gm-fs-section);
  font-weight: 700;
  letter-spacing: var(--gm-tracking-tight);
  line-height: var(--gm-lh-tight);
  color: var(--gm-text-primary);
}

/* Card heading - title inside a card */
.gm .gm-card-heading {
  font-size: var(--gm-fs-xl);
  font-weight: 600;
  letter-spacing: var(--gm-tracking-tight);
  line-height: var(--gm-lh-snug);
  color: var(--gm-text-primary);
}

/* Body copy */
.gm .gm-body {
  font-size: var(--gm-fs-body);
  font-weight: 400;
  line-height: var(--gm-lh-base);
  color: var(--gm-text-secondary);
}

/* ----------------------------------------------------------------------
   Section label - uppercase mono with trailing line.
   THE Giant Monkey signature element. Use it above section headings.
   ---------------------------------------------------------------------- */
.gm .gm-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--gm-font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--gm-tracking-wide);
  text-transform: uppercase;
  color: var(--gm-text-muted);
}
.gm .gm-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  max-width: 80px;
}

/* Inline mono - version strings, IPs, code spans */
.gm .gm-mono {
  font-family: var(--gm-font-mono);
  font-size: var(--gm-fs-xs);
  color: var(--gm-text-muted);
  letter-spacing: 0.02em;
}