/* ============================================================
 * Trophy typography — base rhythm.
 *
 * Sites override --font-display / --font-deco / --font-sans / --font-mono
 * in their own style.css and the rules below pick the new families up.
 * Default sizes come from --type-* in tokens.css.
 *
 * What's in here:
 *   - body family + body type
 *   - display h1-h4 sizing
 *   - paragraph defaults
 *   - link defaults (inline + bare)
 *   - .eyebrow / .tag mono-caps label class (used everywhere)
 *   - .display utility for display-serif text outside of headings
 *
 * Reference: 119 W 57 prototype-merged.html lines 116-135 + per-section
 * type rules across the file.
 * ============================================================ */

body {
  font-family: var(--font-sans);
  background: var(--bg-base);
  color: var(--ink);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--lh-body);
}

/* Display headings — use the serif display family, lining figures, tight tracking.
   Sites override --font-display (e.g. Bodoni Moda on 119W57, a slab on a brutalist site). */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--ink);
  font-feature-settings: "lnum" 1;
}

h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }
h4 { font-size: var(--type-body); font-weight: 500; line-height: var(--lh-snug); }

/* No trailing periods on display headings (universal Trophy rule).
   This is a copywriting rule, not enforceable in CSS — included
   here as a comment so it surfaces during inspection. */

/* Body paragraphs */
p {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

p + p { margin-top: 1em; }

/* Lede (oversized body) — used for section opening paragraphs. */
.lede {
  font-size: var(--type-body);
  line-height: var(--lh-loose);
  color: var(--ink-soft);
}

/* Inline links — bronze, no static underline, hairline appears on hover.
   Matches Tier 3 inline link in 119W57 CTA system. */
a {
  color: inherit;
}

a.link,
.body-copy a {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
a.link:hover,
.body-copy a:hover {
  color: var(--accent-bright);
  background-size: 100% 1px;
}

/* Eyebrow / tag — small-caps label system shared across the site.
   Mono family, generous tracking, bronze accent. The single most-reused
   label treatment in Trophy sites. */
.eyebrow,
.tag {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--accent);
  line-height: 1;
}

.eyebrow.on-dark,
.tag.on-dark {
  color: var(--accent-bright);
}

/* Display utility — use when you need display-serif type outside a heading. */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-feature-settings: "lnum" 1;
  letter-spacing: var(--ls-display);
}

/* Mono utility — short labels, meta lines. */
.mono {
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}