:root{
--font-brand:"Titillium Web","Segoe UI",Tahoma,sans-serif;
--font-body:"Titillium Web","Segoe UI",Tahoma,sans-serif;
--font-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;

--fw-extralight:200;/* @kind font */
--fw-light:300;/* @kind font */
--fw-regular:400;/* @kind font */
--fw-semibold:600;/* @kind font */
--fw-bold:700;/* @kind font */
--fw-black:900;/* @kind font */

--fs-display-1:72px;
--fs-display-2:56px;
--fs-h1:44px;
--fs-h2:34px;
--fs-h3:26px;
--fs-h4:21px;
--fs-h5:18px;
--fs-body-lg:19px;
--fs-body:17px;
--fs-body-sm:15px;
--fs-caption:13px;
--fs-overline:12px;

--lh-tight:1.06;/* @kind font */
--lh-heading:1.18;/* @kind font */
--lh-snug:1.35;/* @kind font */
--lh-body:1.62;/* @kind font */

--ls-display:-0.02em;/* @kind font */
--ls-heading:-0.01em;/* @kind font */
--ls-body:0;/* @kind font */
--ls-overline:0.14em;/* @kind font */

/* Semantic type roles */
--type-hero:var(--fw-bold) var(--fs-display-1)/var(--lh-tight) var(--font-brand);
--type-h1:var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-brand);
--type-h2:var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-brand);
--type-h3:var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-brand);
--type-h4:var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-brand);
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body);
--type-body-lg:var(--fw-light) var(--fs-body-lg)/var(--lh-body) var(--font-body);
--type-caption:var(--fw-regular) var(--fs-caption)/var(--lh-snug) var(--font-body);
--type-overline:var(--fw-bold) var(--fs-overline)/1.2 var(--font-brand);
}