/**
 * Type. Two families; a semantically named scale in which size, line-height,
 * tracking and weight are fixed together - never mixed and matched at the call site.
 */
:root {
  --font-sans: "Chakra Petch", "Eurostile", system-ui, sans-serif;
  --font-mono: "Share Tech Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-ui: var(--font-sans);

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

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.45;
  --leading-loose: 1.7;

  --tracking-tight: 0.02em;
  --tracking-wide: 0.09em;
  --tracking-wider: 0.16em;
  --tracking-widest: 0.28em;

  /* raw ramp - the semantic roles below are what call sites use */
  --size-10: 10px;
  --size-11: 11px;
  --size-13: 13px;
  --size-15: 15px;
  --size-19: 19px;
  --size-24: 24px;
  --size-32: 32px;
  --size-44: 44px;
  --text-xs: var(--size-10);
  --text-sm: var(--size-11);
  --text-md: var(--size-13);
  --text-lg: var(--size-15);
  --text-xl: var(--size-19);
  --text-2xl: var(--size-24);
  --text-3xl: var(--size-32);
  --text-4xl: var(--size-44);

  --text-display-size: var(--size-44);
  --text-display-line: var(--leading-tight);
  --text-display-tracking: 0.2em;
  --text-display-weight: var(--weight-bold);

  --text-heading-lg-size: var(--size-32);
  --text-heading-lg-line: var(--leading-tight);
  --text-heading-lg-tracking: var(--tracking-wider);
  --text-heading-lg-weight: var(--weight-bold);

  --text-heading-size: var(--size-19);
  --text-heading-line: var(--leading-snug);
  --text-heading-tracking: var(--tracking-wider);
  --text-heading-weight: var(--weight-bold);

  --text-heading-sm-size: var(--size-13);
  --text-heading-sm-line: var(--leading-snug);
  --text-heading-sm-tracking: var(--tracking-widest);
  --text-heading-sm-weight: var(--weight-bold);

  --text-body-lg-size: var(--size-15);
  --text-body-lg-line: var(--leading-normal);
  --text-body-lg-tracking: var(--tracking-tight);
  --text-body-lg-weight: var(--weight-regular);

  --text-body-size: var(--size-13);
  --text-body-line: var(--leading-normal);
  --text-body-tracking: var(--tracking-wide);
  --text-body-weight: var(--weight-regular);

  --text-body-sm-size: var(--size-11);
  --text-body-sm-line: var(--leading-normal);
  --text-body-sm-tracking: var(--tracking-wide);
  --text-body-sm-weight: var(--weight-regular);

  --text-label-size: var(--size-11);
  --text-label-line: var(--leading-tight);
  --text-label-tracking: var(--tracking-wider);
  --text-label-weight: var(--weight-bold);

  --text-caption-size: var(--size-10);
  --text-caption-line: var(--leading-tight);
  --text-caption-tracking: var(--tracking-widest);
  --text-caption-weight: var(--weight-bold);

  --text-readout-size: var(--size-32);
  --text-readout-line: 1;
  --text-readout-tracking: var(--tracking-wide);
  --text-readout-weight: var(--weight-regular);

  --text-code-size: var(--size-11);
  --text-code-line: var(--leading-normal);
  --text-code-tracking: 0;
  --text-code-weight: var(--weight-regular);

  --measure: 68ch;
  --measure-narrow: 46ch;
  --measure-wide: 78ch;
  --numeric-tabular: tabular-nums lining-nums; /* @kind other */
}

/* Tables, readouts, any column of figures: columns must not twitch. */
[data-numeric="tabular"],
table,
.gw-tabular {
  font-variant-numeric: var(--numeric-tabular);
}