:root{
  /* Families */
  --font-sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --font-display:var(--font-sans);
  --font-ui:var(--font-sans);
  --font-figures:var(--font-mono);

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

  /* Size ramp */
  --size-2xs:11px;--size-xs:12px;--size-sm:13px;--size-md:14px;
  --size-lg:16px;--size-xl:18px;--size-2xl:21px;--size-3xl:25px;--size-4xl:31px;
  --size-5xl:38px;--size-6xl:46px;--size-7xl:56px;
  /* Display-only, and the sign-in statement is its one caller. The ramp stopped at
     --size-7xl, which capped that headline at 56px against the design system
     template's own clamp(34px,4.4vw,70px) - so the statement was quietly rendering a
     step and a half smaller than the design. Not part of the text ramp: nothing that
     has to be read as prose should ever be set at 70px. */
  --size-8xl:70px;

  /* Line heights */
  --leading-tight:1.15;--leading-snug:1.3;--leading-normal:1.45;
  --leading-relaxed:1.6;

  /* Tracking */
  --tracking-tighter:-.024em;--tracking-tight:-.014em;--tracking-normal:0;
  --tracking-caps:.06em;

  /* Composed roles */
  --type-display-lg:var(--weight-semibold) var(--size-6xl)/var(--leading-tight) var(--font-display);
  --type-display-md:var(--weight-semibold) var(--size-5xl)/var(--leading-tight) var(--font-display);
  --type-display-sm:var(--weight-semibold) var(--size-4xl)/var(--leading-snug) var(--font-display);
  --type-heading-lg:var(--weight-semibold) var(--size-3xl)/var(--leading-snug) var(--font-ui);
  --type-heading-md:var(--weight-semibold) var(--size-2xl)/var(--leading-snug) var(--font-ui);
  --type-heading-sm:var(--weight-semibold) var(--size-xl)/var(--leading-snug) var(--font-ui);
  --type-title:var(--weight-semibold) var(--size-lg)/var(--leading-snug) var(--font-ui);
  --type-body-lg:var(--weight-regular) var(--size-lg)/var(--leading-relaxed) var(--font-ui);
  --type-body:var(--weight-regular) var(--size-md)/var(--leading-normal) var(--font-ui);
  --type-body-sm:var(--weight-regular) var(--size-sm)/var(--leading-normal) var(--font-ui);
  --type-label:var(--weight-medium) var(--size-sm)/1.2 var(--font-ui);
  --type-label-sm:var(--weight-medium) var(--size-xs)/1.2 var(--font-ui);
  --type-caption:var(--weight-regular) var(--size-xs)/var(--leading-normal) var(--font-ui);
  --type-overline:var(--weight-semibold) var(--size-2xs)/1.2 var(--font-ui);
  --type-figure:var(--weight-regular) var(--size-md)/1.3 var(--font-figures);
  --type-figure-sm:var(--weight-regular) var(--size-sm)/1.3 var(--font-figures);
  --type-figure-lg:var(--weight-medium) var(--size-2xl)/1.2 var(--font-figures);
  --type-code:var(--weight-regular) var(--size-xs)/1.5 var(--font-figures);

  /* Every numeric figure in Ryber is tabular. Non-negotiable. */
  --numeric-tabular:tabular-nums lining-nums; /* @kind other */
}