/* A text style is composed from five dimensions:
     {family}/{category}/{scale}/{weight}[/italic]
   e.g. ibmPlexMono/label/400/medium. Italic is a style dimension, not a
   weight — regular style is omitted from the notation.
   Letter-spacing is 0 everywhere except headline and display (-2%). */
:root{
  --font-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --font-serif:"IBM Plex Serif",ui-serif,Georgia,"Times New Roman",serif;

  --weight-regular:400;
  --weight-medium:500;

  /* SCALE — size / paragraph spacing. 100 is reserved and unused. */
  --size-200:12px; --para-200:10px;
  --size-300:14px; --para-300:12px;
  --size-400:16px; --para-400:12px;
  --size-500:17px; --para-500:12px;
  --size-600:20px; --para-600:16px;
  --size-700:32px; --para-700:20px;
  --size-800:40px; --para-800:20px;
  --size-900:56px; --para-900:28px;
  --size-1000:72px; --para-1000:32px;

  /* CATEGORY — shared line-height and tracking across every scale in it. */
  --lh-caption:1.25; /* @kind other */   --ls-caption:0; /* @kind other */
  --lh-label:1; /* @kind other */       --ls-label:0; /* @kind other */
  --lh-body:1.5; /* @kind other */      --ls-body:0; /* @kind other */
  --lh-headline:1.25; /* @kind other */ --ls-headline:-0.02em; /* @kind other */
  --lh-display:1.25; /* @kind other */  --ls-display:-0.02em; /* @kind other */
}

/* Composed classes for the pairs the products actually use. The full matrix is
   family × category × scale × weight × italic; these are the built ones. */
.t-caption-200{font-size:var(--size-200);line-height:var(--lh-caption);letter-spacing:var(--ls-caption)}
.t-caption-300{font-size:var(--size-300);line-height:var(--lh-caption);letter-spacing:var(--ls-caption)}.t-label-300{font-size:var(--size-300);line-height:var(--lh-label);letter-spacing:var(--ls-label);white-space:nowrap}
.t-label-400{font-size:var(--size-400);line-height:var(--lh-label);letter-spacing:var(--ls-label);white-space:nowrap}
.t-label-500{font-size:var(--size-500);line-height:var(--lh-label);letter-spacing:var(--ls-label);white-space:nowrap}
.t-body-400{font-size:var(--size-400);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.t-body-500{font-size:var(--size-500);line-height:var(--lh-body);letter-spacing:var(--ls-body)}
.t-headline-600{font-size:var(--size-600);line-height:var(--lh-headline);letter-spacing:var(--ls-headline)}
.t-headline-700{font-size:var(--size-700);line-height:var(--lh-headline);letter-spacing:var(--ls-headline)}
.t-display-900{font-size:var(--size-900);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.t-display-1000{font-size:var(--size-1000);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.f-sans{font-family:var(--font-sans)}
.f-mono{font-family:var(--font-mono)}
.f-serif{font-family:var(--font-serif)}
.w-regular{font-weight:var(--weight-regular)}
.w-medium{font-weight:var(--weight-medium)}
.italic{font-style:italic}