/* JP Pirinen — Morning Light — Typography tokens (generated from tokens/typography.tokens.json) */

/* Webfonts load from Google Fonts (see tokens/fonts.css or the <link> in the page head).
   The former local() @font-face stubs were removed: Chrome picked them over the Google
   faces for 'Hanken Grotesk' and 'JetBrains Mono', the local lookup failed, and the
   page fell back to the system font. */

:root {
  /* families */
  --font-family-display: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* sizes */
  --font-size-xs: 12.8px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-md: 20px;
  --font-size-lg: 25px;
  --font-size-xl: 31.25px;
  --font-size-2xl: 39px;
  --font-size-3xl: 48.8px;
  --font-size-4xl: 61px;
  --font-size-5xl: 76.3px;

  /* line heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* letter spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-eyebrow: 0.12em;
}

/* semantic typography — apply as utility classes on any element */
.text-display-hero {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}
.text-heading-1 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-tight);
}
.text-heading-2 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
}
.text-heading-3 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
}
.text-heading-4 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-normal);
}
.text-body-lead {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-md);
  line-height: var(--line-height-relaxed);
  letter-spacing: var(--letter-spacing-normal);
}
.text-body {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}
.text-body-sm {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-normal);
}
.text-label {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
}
.text-button {
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-wide);
}
.text-eyebrow {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-eyebrow);
}
.text-stat {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-normal);
}