/* PNOĒ — Typography tokens & webfonts

   Display / editorial headings: a transitional Times-family serif (high-craft,
   moderate contrast, bracketed serifs). The brand's licensed face is substituted
   here with **Source Serif 4** (Google Fonts) — the nearest open match.
   See readme.md › Visual Foundations for the substitution flag.

   Body / UI / data: a neutral grotesque (Helvetica/Aktiv-grade). Substituted with
   **Hanken Grotesk** (Google Fonts) — clean, slightly warm, clinical-legible.

   Numeric / metric readouts reuse the grotesque with tabular figures. */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---- families ---- */
  --font-serif: 'Source Serif 4', 'Times New Roman', Georgia, serif;
  --font-sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono: 'Hanken Grotesk', ui-monospace, 'SF Mono', Menlo, monospace;

  /* semantic family aliases */
  --font-display: var(--font-serif);
  --font-heading: var(--font-serif);
  --font-body: var(--font-sans);
  --font-ui: var(--font-sans);
  --font-metric: var(--font-sans); /* pair with font-feature-settings tabular */

  /* ---- type scale (px, 1.0 = 16px base) ---- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 21px;
  --text-xl: 26px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 52px;
  --text-5xl: 66px;
  --text-6xl: 84px;

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

  /* ---- line heights ---- */
  --leading-tight: 1.04;   /* display serif */
  --leading-snug: 1.18;    /* headings */
  --leading-normal: 1.5;   /* body */
  --leading-relaxed: 1.62; /* long-form body */

  /* ---- letter spacing ---- */
  --tracking-tight: -0.02em;  /* large serif display */
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-eyebrow: 0.14em;  /* uppercase red eyebrows / labels */

  /* ---- numeric figures ---- */
  --feature-tabular: 'tnum' 1, 'lnum' 1; /* @kind other */
}