:root{
/* Families */
--font-mark:"Bricolage Grotesque","Bricolage Grotesque 24pt",system-ui,sans-serif;
--font-serif:Newsreader,Georgia,serif;
--font-serif-alt:Petrona,Georgia,serif;
--font-sans:Archivo,system-ui,sans-serif;

/* Wordmark variation axes */
--mark-variation:"wdth" 84,"opsz" 32; /* @kind other */
--mark-variation-small:"wdth" 84,"opsz" 20; /* @kind other */
--mark-weight:700; /* @kind other */
--mark-tracking:-.02em; /* @kind other */

/* Scale — sizes are literal to the source specimens, not a ratio grid */
--size-mark:84px;
--size-display:56px;
--size-lead:28px;
--size-body:17px;
--size-body-sm:16px;
--size-ui:14px;
--size-ui-sm:12px;
--size-label:10px;

/* Line heights */
--lh-mark:1.05; /* @kind other */
--lh-display:1.15; /* @kind other */
--lh-lead:1.35; /* @kind other */
--lh-body:1.7; /* @kind other */
--lh-body-tight:1.65; /* @kind other */
--lh-ui:1.6; /* @kind other */
--lh-label:1; /* @kind other */

/* Tracking */
--track-display:0; /* @kind other */
--track-label:.16em; /* @kind other */
--track-label-tight:.12em; /* @kind other */

/* Weights */
--weight-display:300; /* @kind other */
--weight-serif:400; /* @kind other */
--weight-ui:400; /* @kind other */
--weight-ui-strong:500; /* @kind other */

/* Composed roles */
--type-display:var(--weight-display) var(--size-display)/var(--lh-display) var(--font-serif);
--type-lead:var(--weight-serif) var(--size-lead)/var(--lh-lead) var(--font-serif);
--type-body:var(--weight-serif) var(--size-body)/var(--lh-body) var(--font-serif);
--type-ui:var(--weight-ui) var(--size-ui)/var(--lh-ui) var(--font-sans);
--type-label:var(--weight-ui-strong) var(--size-label)/var(--lh-label) var(--font-sans);
}