/* Mobile ramps: Title 1-4, Body 1-2, Small Title 1-3, Caption 1-2. Bold 700 / Regular 400. */
:root{
--font-weight-regular:400;--font-weight-bold:700;

--font-size-title-1:24px;--line-height-title-1:36px;
--font-size-title-2:21px;--line-height-title-2:32px;
--font-size-title-3:18px;--line-height-title-3:28px;
--font-size-title-4:16px;--line-height-title-4:24px;
--font-size-body-1:16px;--line-height-body-1:24px;
--font-size-body-2:14px;--line-height-body-2:20px;
--font-size-small-title-1:14px;--line-height-small-title-1:20px;
--font-size-small-title-2:12px;--line-height-small-title-2:18px;
--font-size-small-title-3:10px;--line-height-small-title-3:15px;
--font-size-caption-1:12px;--line-height-caption-1:18px;
--font-size-caption-2:10px;--line-height-caption-2:15px;

/* Desktop display sizes, extrapolated from the ramp for web surfaces */
--font-size-display-1:44px;--line-height-display-1:52px;
--font-size-display-2:32px;--line-height-display-2:40px;

--letter-spacing-eyebrow:.14em;
}
.type-title-1{font:var(--font-weight-bold) var(--font-size-title-1)/var(--line-height-title-1) var(--font-sans)}
.type-title-2{font:var(--font-weight-bold) var(--font-size-title-2)/var(--line-height-title-2) var(--font-sans)}
.type-title-3{font:var(--font-weight-bold) var(--font-size-title-3)/var(--line-height-title-3) var(--font-sans)}
.type-title-4{font:var(--font-weight-bold) var(--font-size-title-4)/var(--line-height-title-4) var(--font-sans)}
.type-body-1{font:var(--font-weight-regular) var(--font-size-body-1)/var(--line-height-body-1) var(--font-sans)}
.type-body-2{font:var(--font-weight-regular) var(--font-size-body-2)/var(--line-height-body-2) var(--font-sans)}
.type-small-title-1{font:var(--font-weight-bold) var(--font-size-small-title-1)/var(--line-height-small-title-1) var(--font-sans)}
.type-small-title-2{font:var(--font-weight-bold) var(--font-size-small-title-2)/var(--line-height-small-title-2) var(--font-sans)}
.type-small-title-3{font:var(--font-weight-bold) var(--font-size-small-title-3)/var(--line-height-small-title-3) var(--font-sans)}
.type-caption-1{font:var(--font-weight-regular) var(--font-size-caption-1)/var(--line-height-caption-1) var(--font-sans)}
.type-caption-2{font:var(--font-weight-regular) var(--font-size-caption-2)/var(--line-height-caption-2) var(--font-sans)}
.type-eyebrow{font:var(--font-weight-regular) var(--font-size-small-title-2)/var(--line-height-small-title-2) var(--font-mono);letter-spacing:var(--letter-spacing-eyebrow);text-transform:uppercase;color:var(--text-secondary)}
.type-token{font:var(--font-weight-regular) var(--font-size-body-2)/var(--line-height-body-2) var(--font-mono);color:var(--text-link)}