/* ============================================================
   PALOMA — TYPE
   One class per Figma text style (Paloma/*). Same names, same metrics.
   Apply the class that matches the style used on the Figma node.
   ============================================================ */

/* Serif — Postman's Serif Light */
.h1{font-family:var(--font-family-serif);font-weight:var(--font-weight-light);font-size:var(--font-size-h1);line-height:var(--lh-tight);letter-spacing:var(--track-tight);color:var(--color-blue)}
.h2{font-family:var(--font-family-serif);font-weight:var(--font-weight-light);font-size:var(--font-size-h2);line-height:var(--lh-tight);letter-spacing:var(--track-tight);color:var(--color-ink)}
.h3{font-family:var(--font-family-serif);font-weight:var(--font-weight-light);font-size:var(--font-size-h3);line-height:var(--lh-title);letter-spacing:var(--track-tight);color:var(--color-ink)}
.quote{font-family:var(--font-family-serif);font-weight:var(--font-weight-light);font-size:var(--font-size-quote);line-height:var(--lh-title);letter-spacing:var(--track-tight);color:var(--color-ink)}

/* Display — Funnel Display */
.title{font-family:var(--font-family-display);font-weight:var(--font-weight-semibold);font-size:var(--font-size-title);line-height:var(--lh-title);letter-spacing:var(--track-tight);color:var(--color-ink)}
.stat{font-family:var(--font-family-display);font-weight:var(--font-weight-bold);font-size:var(--font-size-stat);line-height:var(--lh-title);letter-spacing:var(--track-tight)}

/* Body — Funnel Sans */
.lead-lg{font-family:var(--font-family-body);font-weight:var(--font-weight-regular);font-size:var(--font-size-lead-lg);line-height:var(--lh-body);color:var(--color-ink-75)}
.lead{font-family:var(--font-family-body);font-weight:var(--font-weight-regular);font-size:var(--font-size-lead);line-height:var(--lh-body);color:var(--color-ink-75)}
.body{font-family:var(--font-family-body);font-weight:var(--font-weight-regular);font-size:var(--font-size-body);line-height:var(--lh-body);color:var(--color-ink-75)}

/* Utility / data — JetBrains Mono (uppercase where noted) */
.eyebrow{font-family:var(--font-family-mono);font-size:var(--font-size-label);line-height:var(--lh-body);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-blue)}
.meta{font-family:var(--font-family-mono);font-size:var(--font-size-meta);line-height:var(--lh-title);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-blue)}
.timeline{font-family:var(--font-family-mono);font-size:var(--font-size-timeline);line-height:var(--lh-title);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--color-ink)}
.btn-label{font-family:var(--font-family-mono);text-transform:uppercase;letter-spacing:var(--track-button)}
.btn-label--m{font-size:var(--font-size-button-m)}
.btn-label--l{font-size:var(--font-size-button-l)}

/* ---- Mobile overrides (≤700px) ----
   Verified against the Figma mobile frame (5438:106451). At this breakpoint,
   serif headlines flatten from h1(80)/h2(64) down to a single 40px size — the
   same value as h3, so no new size is introduced, just reused across contexts.
   Mono eyebrows step down from 16px to 14px. Titles, body copy and stat
   numbers are unchanged at mobile widths, so no other rule needs an override. */
@media(max-width:700px){
  .h1,.h2{font-size:var(--font-size-h3)}
  .eyebrow{font-size:var(--font-size-label-mobile)}
}