:root{
  /* Two families only. Montserrat Alternates carries the brand voice (it matches the
     wordmark); Montserrat is the utility face for buttons, labels and icon lists. */
  --font-display:"Montserrat Alternates","Montserrat",sans-serif;
  --font-ui:"Montserrat","Montserrat Alternates",sans-serif;

  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px; --fs-16:16px;
  --fs-17:17px; --fs-18:18px; --fs-19:19px; --fs-20:20px; --fs-22:22px; --fs-24:24px;
  --fs-28:28px; --fs-30:30px; --fs-36:36px; --fs-40:40px;

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-extrabold:800; /* @kind font */
  --fw-black:900; /* @kind font */

  --lh-tight:1.22em;   /* section headings */
  --lh-heading:52px;   /* 40px display heading pairing used site-wide */
  --lh-snug:22px;      /* 14-16px copy blocks */
  --lh-body:1.6; /* @kind font */

  /* Semantic type roles */
  --type-display-size:var(--fs-40);
  --type-display-weight:var(--fw-extrabold);
  --type-section-size:var(--fs-30);
  --type-card-title-size:var(--fs-18);
  --type-card-title-weight:var(--fw-semibold);
  --type-body-size:var(--fs-16);
  --type-small-size:var(--fs-14);
  --type-button-size:var(--fs-20);
  --type-button-weight:var(--fw-black);
  --type-nav-size:var(--fs-14);
  --type-nav-weight:var(--fw-semibold);
}