/* Type scale, one token trio per style. Values are taken verbatim from the source spec. */
:root {
  --display-2xl-size: 96px; --display-2xl-line: 0.98; /* @kind other */
  --display-xl-size: 64px;  --display-xl-line: 1; /* @kind other */
  --display-lg-size: 48px;  --display-lg-line: 1.05; /* @kind other */

  --heading-xl-size: 40px;  --heading-xl-line: 1.1; /* @kind other */
  --heading-lg-size: 28px;  --heading-lg-line: 1.15; /* @kind other */
  --heading-md-size: 20px;  --heading-md-line: 1.25; /* @kind other */
  --heading-sm-size: 16px;  --heading-sm-line: 1.3; /* @kind other */   --heading-sm-tracking: 0.01em; /* @kind other */
  --display-numeral-size: 88px; --display-numeral-line: 0.9; /* @kind other */

  --body-lg-size: 18px; --body-lg-line: 1.5; /* @kind other */
  --body-md-size: 16px; --body-md-line: 1.5; /* @kind other */
  --body-sm-size: 14px; --body-sm-line: 1.45; /* @kind other */

  --mono-label-size: 13px; --mono-label-line: 1.4; /* @kind other */ --mono-label-tracking: 0.02em; /* @kind other */
  --mono-body-size: 15px;  --mono-body-line: 1.6; /* @kind other */
  --mono-italic-size: 14px;--mono-italic-line: 1.5; /* @kind other */

  --tracking-display: -0.01em; /* @kind other */
}

/* Utility classes mirroring the scale, for card specimens and hand-written HTML. */
.wrkn-display-2xl{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--display-2xl-size);line-height:var(--display-2xl-line);letter-spacing:var(--tracking-display)}
.wrkn-display-xl{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--display-xl-size);line-height:var(--display-xl-line);letter-spacing:var(--tracking-display)}
.wrkn-display-lg{font-family:var(--font-display);font-weight:var(--weight-display);font-size:var(--display-lg-size);line-height:var(--display-lg-line);letter-spacing:var(--tracking-display)}
.wrkn-heading-xl{font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--heading-xl-size);line-height:var(--heading-xl-line)}
.wrkn-heading-lg{font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--heading-lg-size);line-height:var(--heading-lg-line)}
.wrkn-heading-md{font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--heading-md-size);line-height:var(--heading-md-line)}
.wrkn-heading-sm{font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--heading-sm-size);line-height:var(--heading-sm-line);letter-spacing:var(--heading-sm-tracking)}
.wrkn-numeral{font-family:var(--font-heading);font-weight:var(--weight-bold);font-size:var(--display-numeral-size);line-height:var(--display-numeral-line);color:var(--red)}
.wrkn-body-lg{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--body-lg-size);line-height:var(--body-lg-line)}
.wrkn-body-md{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--body-md-size);line-height:var(--body-md-line)}
.wrkn-body-sm{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--body-sm-size);line-height:var(--body-sm-line)}
.wrkn-mono-label{font-family:var(--font-mono);font-size:var(--mono-label-size);line-height:var(--mono-label-line);letter-spacing:var(--mono-label-tracking)}
.wrkn-mono-body{font-family:var(--font-mono);font-size:var(--mono-body-size);line-height:var(--mono-body-line)}
.wrkn-mono-italic{font-family:var(--font-mono);font-style:italic;font-size:var(--mono-italic-size);line-height:var(--mono-italic-line)}