:root{
--font-sans:'Geist','Helvetica Neue',Arial,sans-serif;
--font-detail:'Doto','Geist',ui-monospace,monospace;

--weight-light:300;
--weight-regular:400;
--weight-bold:700;

/* scale — display sizes are set tight; UI text stays at 400 */
--text-display:120px;
--text-h1:64px;
--text-h2:40px;
--text-h3:28px;
--text-h4:20px;
--text-body-lg:18px;
--text-body:15px;
--text-small:13px;
--text-label:11px;
--text-detail:11px;

--leading-display:0.92;
--leading-heading:1.05;
--leading-body:1.55;
--leading-tight:1.25;

--tracking-display:-0.03em;
--tracking-heading:-0.02em;
--tracking-body:0em;
--tracking-label:0.1em;
--tracking-detail:0.06em;

/* composed roles */
--type-display:var(--weight-regular) var(--text-display)/var(--leading-display) var(--font-sans);
--type-h1:var(--weight-regular) var(--text-h1)/var(--leading-heading) var(--font-sans);
--type-h2:var(--weight-regular) var(--text-h2)/var(--leading-heading) var(--font-sans);
--type-h3:var(--weight-bold) var(--text-h3)/var(--leading-tight) var(--font-sans);
--type-body:var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-sans);
--type-body-lg:var(--weight-regular) var(--text-body-lg)/var(--leading-body) var(--font-sans);
--type-small:var(--weight-regular) var(--text-small)/var(--leading-body) var(--font-sans);
--type-label:var(--weight-bold) var(--text-label)/1.2 var(--font-sans);
--type-detail:var(--weight-regular) var(--text-detail)/1.3 var(--font-detail);
}