/* typography.css — families, type ramp, tracking. Sizes are rem (16px root) so browser text size scales them, as Dynamic Type does.
   Source: web/helix-tokens.css (HELIX web foundations), which mirrors HLXTheme.swift,
   HLXTypography.swift and HLXMetrics.swift. 1 iOS pt = 1 CSS px. */

:root {
  /* Families */
  --hlx-font-display: "Archivo", system-ui, sans-serif;
  --hlx-font-ui: "IBM Plex Sans", system-ui, sans-serif;
  --hlx-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Type — use as `font: var(--hlx-type-body-l)` */
  --hlx-type-display-xl: 600 3.25rem/normal var(--hlx-font-display);
  --hlx-type-display-l: 600 2.5rem/normal var(--hlx-font-display);
  --hlx-type-display-m: 600 2.125rem/normal var(--hlx-font-display);
  --hlx-type-display-s: 600 1.875rem/normal var(--hlx-font-display);
  --hlx-type-body-l: 400 1.0625rem/normal var(--hlx-font-ui);
  --hlx-type-body-l-strong: 600 1.0625rem/normal var(--hlx-font-ui);
  --hlx-type-body-m: 400 1rem/normal var(--hlx-font-ui);
  --hlx-type-body-m-strong: 600 1rem/normal var(--hlx-font-ui);
  --hlx-type-body-s: 400 0.9375rem/normal var(--hlx-font-ui);
  --hlx-type-body-s-strong: 600 0.9375rem/normal var(--hlx-font-ui);
  --hlx-type-label-caps: 600 0.8125rem/normal var(--hlx-font-ui);
  --hlx-type-mono-s: 400 0.6875rem/normal var(--hlx-font-mono);
  --hlx-type-mono-m: 400 0.75rem/normal var(--hlx-font-mono);
  --hlx-type-mono-eyebrow: 600 0.6875rem/normal var(--hlx-font-mono);
  --hlx-type-mono-metric: 600 1.625rem/normal var(--hlx-font-mono);
  --hlx-tracking-label-caps: 0.06em;   /* iOS 0.78pt at 13 */
  --hlx-tracking-eyebrow: 0.18em;      /* iOS 1.98pt at 11 */

  /* Per-feature faces from TOKENS.md (HLXFont+*.swift) */
  --hlx-type-display-xs: 600 1.375rem/normal var(--hlx-font-display);   /* displayXS 22 */
  --hlx-type-body-xl: 600 1.25rem/normal var(--hlx-font-ui);            /* bodyXL 20 */
  --hlx-type-mono-l: 400 1.25rem/normal var(--hlx-font-mono);           /* monoL 20 */
  --hlx-type-mono-detail: 400 0.8125rem/normal var(--hlx-font-mono);    /* monoDetail / detailMeta 13 */
  --hlx-type-mono-identifier: 600 0.8125rem/normal var(--hlx-font-mono);/* monoIdentifier 13 */
  --hlx-type-mono-value: 400 1rem/normal var(--hlx-font-mono);          /* monoValue 16 */
  --hlx-type-mono-value-strong: 600 1rem/normal var(--hlx-font-mono);   /* monoValueStrong 16 */
  --hlx-type-mono-metric-xl: 600 2.125rem/normal var(--hlx-font-mono);  /* monoMetricXL 34 */
  --hlx-type-key-digit: 500 2rem/normal var(--hlx-font-ui);             /* HLXKeypad digit, regular width */
  --hlx-type-key-digit-compact: 500 1.625rem/normal var(--hlx-font-ui); /* HLXKeypad digit, compact width */
}

/* Type utilities */
.hlx-display-xl { font: var(--hlx-type-display-xl); }
.hlx-display-l { font: var(--hlx-type-display-l); }
.hlx-display-m { font: var(--hlx-type-display-m); }
.hlx-display-s { font: var(--hlx-type-display-s); }
.hlx-body-l { font: var(--hlx-type-body-l); }
.hlx-body-l-strong { font: var(--hlx-type-body-l-strong); }
.hlx-body-m { font: var(--hlx-type-body-m); }
.hlx-body-m-strong { font: var(--hlx-type-body-m-strong); }
.hlx-body-s { font: var(--hlx-type-body-s); }
.hlx-body-s-strong { font: var(--hlx-type-body-s-strong); }
.hlx-label-caps { font: var(--hlx-type-label-caps); letter-spacing: var(--hlx-tracking-label-caps); text-transform: uppercase; }
.hlx-mono-s { font: var(--hlx-type-mono-s); }
.hlx-mono-m { font: var(--hlx-type-mono-m); }
/* .hlx-eyebrow uppercases, as in helix-tokens.css. iOS .hlxEyebrow() does not — the sign-in hero eyebrow is lowercase. */
.hlx-eyebrow { font: var(--hlx-type-mono-eyebrow); letter-spacing: var(--hlx-tracking-eyebrow); text-transform: uppercase; color: var(--hlx-eyebrow-ink); }
.hlx-mono-metric { font: var(--hlx-type-mono-metric); }