/* Figure & Ground — typography
   One typeface, three weights. Display sizes run Light; body Regular; labels and buttons Medium. */
:root{
--font-brand-stack:var(--font-brand);
/* --- Weights (only these three) --- */
--weight-light:300; /* @kind other */
--weight-regular:400; /* @kind other */
--weight-medium:500; /* @kind other */
/* --- Display scale --- */
--text-display-xl:88px;--text-display-l:64px;--text-display-m:44px;--text-display-s:32px;
/* --- Editorial + UI scale --- */
--text-title:24px;--text-body-l:18px;--text-body:16px;--text-body-s:14px;--text-caption:12px;--text-eyebrow:11px;
/* Navigation runs larger than body copy: the header is the one place the studio raises its voice. */
--text-nav:25px;--text-button-nav:15px;
/* --- Line heights --- */
--leading-display:1.04; /* @kind other */
--leading-display-loose:1.12; /* @kind other */
--leading-title:1.25; /* @kind other */
--leading-body:1.55; /* @kind other */
--leading-tight:1.35; /* @kind other */
/* --- Tracking. Display is tightened; uppercase eyebrows are tracked wide. --- */
--tracking-display:-0.02em; /* @kind other */
--tracking-title:-0.01em; /* @kind other */
--tracking-body:0em; /* @kind other */
--tracking-label:0.04em; /* @kind other */
--tracking-eyebrow:0.16em; /* @kind other */
--tracking-eyebrow-wide:0.22em; /* @kind other */
/* --- Semantic roles --- */
--type-hero:var(--weight-light) var(--text-display-xl)/var(--leading-display) var(--font-brand);
--type-section:var(--weight-light) var(--text-display-m)/var(--leading-display-loose) var(--font-brand);
--type-project-title:var(--weight-regular) var(--text-title)/var(--leading-title) var(--font-brand);
--type-body:var(--weight-regular) var(--text-body)/var(--leading-body) var(--font-brand);
--type-body-small:var(--weight-regular) var(--text-body-s)/var(--leading-body) var(--font-brand);
--type-eyebrow:var(--weight-medium) var(--text-eyebrow)/1.2 var(--font-brand);
--type-button:var(--weight-medium) var(--text-body-s)/1 var(--font-brand);
--type-nav:var(--weight-medium) var(--text-nav)/1.2 var(--font-brand);
}
