/* Lane 9, item 6: the whole product's type system.
   Four sizes, two weights. A fifth size fails A6-2, so nothing here may add one. */

:root {
  --type-family: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* the four sizes */
  --type-display: 28px;
  --type-title: 17px;
  --type-body: 13px;
  --type-micro: 11px;

  /* their line heights, paired one to one with the sizes above */
  --leading-display: 1.15;
  --leading-title: 1.3;
  --leading-body: 1.45;
  --leading-micro: 1.35;

  /* the two weights */
  --weight-regular: 400;
  --weight-strong: 600;
}

.t-display {
  font-family: var(--type-family);
  font-size: var(--type-display);
  line-height: var(--leading-display);
  font-weight: var(--weight-strong);
  letter-spacing: -0.01em;
}

.t-title {
  font-family: var(--type-family);
  font-size: var(--type-title);
  line-height: var(--leading-title);
  font-weight: var(--weight-strong);
}

.t-body {
  font-family: var(--type-family);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
}

.t-micro {
  font-family: var(--type-family);
  font-size: var(--type-micro);
  line-height: var(--leading-micro);
  font-weight: var(--weight-regular);
}

/* Weight is a modifier, never a fifth size. */
.t-regular { font-weight: var(--weight-regular); }
.t-strong { font-weight: var(--weight-strong); }

/* Numbers that get compared line up column by column. */
.t-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}