:root {
  /* Display — Srotone. Medium only. Sentence case. */
  --display-family: var(--font-display);
  --display-size: 64px;
  --display-weight: 500;
  --display-leading: 1.04;
  --display-tracking: -0.022em;

  --h1-family: var(--font-display);
  --h1-size: 44px;
  --h1-weight: 500;
  --h1-leading: 1.1;
  --h1-tracking: -0.018em;

  --h2-family: var(--font-display);
  --h2-size: 32px;
  --h2-weight: 500;
  --h2-leading: 1.16;
  --h2-tracking: -0.014em;

  --h3-family: var(--font-display);
  --h3-size: 22px;
  --h3-weight: 500;
  --h3-leading: 1.28;
  --h3-tracking: -0.008em;

  /* Body — Salena. Light to Bold, italic available. */
  --body-lg-family: var(--font-body);
  --body-lg-size: 19px;
  --body-lg-weight: 400;
  --body-lg-leading: 1.72;
  --body-lg-tracking: 0;

  --body-family: var(--font-body);
  --body-size: 17px;
  --body-weight: 400;
  --body-leading: 1.66;
  --body-tracking: 0;

  --small-family: var(--font-body);
  --small-size: 15px;
  --small-weight: 400;
  --small-leading: 1.6;
  --small-tracking: 0;

  /* Label — Pixotype. The only uppercase in the system. */
  --label-family: var(--font-label);
  --label-size: 12px;
  --label-weight: 500;
  --label-leading: 1.2;
  --label-tracking: 0.14em;
  --label-case: uppercase; /* @kind other */

  --data-family: var(--font-label);
  --data-size: 15px;
  --data-weight: 400;
  --data-tracking: 0.02em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
}