/* Poise — typography tokens.
   SF Pro throughout, self-hosted (see fonts.css).
   Display = black weight + compressed width, driven by the variable
   'SF Pro' face's wght + wdth axes. Used for big numerals + headlines. */

:root {
  /* Families */
  --font-sans: 'SF Pro Text', 'SF Pro', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-display: 'SF Pro', 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
  --display-stretch: 62%; /* maps to the wdth axis (30–150) on 'SF Pro' */
  --display-vars: 'wght' 860, 'wdth' 62, 'opsz' 28; /* @kind font */ /* explicit axis values */

  /* Scale (px @1x) */
  --text-display-xl: 96px;  /* hero numerals */
  --text-display-lg: 72px;  /* score numerals */
  --text-display-md: 48px;  /* section numerals / big headlines */
  --text-headline: 30px;    /* screen headlines, bold */
  --text-title: 22px;       /* card titles, semibold */
  --text-body: 17px;        /* body, regular */
  --text-callout: 15px;     /* secondary body */
  --text-footnote: 13px;    /* footnotes */
  --text-caption: 11px;     /* labels, caption2, medium */

  /* Weights */
  --weight-black: 900;
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;

  /* Tracking & leading */
  --tracking-display: -0.01em;
  --tracking-caps: 0.08em; /* uppercase caption labels */
  --leading-display: 0.95;
  --leading-tight: 1.2;
  --leading-body: 1.45;
}

/* Type utility classes — mirror the iOS text styles */
.poise-display-xl,
.poise-display-lg,
.poise-display-md {
  font-family: var(--font-display);
  font-stretch: var(--display-stretch);
  font-weight: var(--weight-black);
  font-variation-settings: var(--display-vars);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.poise-display-xl { font-size: var(--text-display-xl); }
.poise-display-lg { font-size: var(--text-display-lg); }
.poise-display-md { font-size: var(--text-display-md); }

.poise-headline {
  font-family: var(--font-sans);
  font-size: var(--text-headline);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.poise-title {
  font-family: var(--font-sans);
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}
.poise-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--text-primary);
}
.poise-callout {
  font-family: var(--font-sans);
  font-size: var(--text-callout);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}
.poise-footnote {
  font-family: var(--font-sans);
  font-size: var(--text-footnote);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  color: var(--text-secondary);
}
.poise-caption {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}