/* Hózhó. design tokens, generated from tokens.json. Bone = default (light), Jet = dark. */ @font-face { font-family: "HZ Coil"; src: url("fonts/HZCoil-Thin.woff2") format("woff2"); font-weight: 200; font-display: swap; } @font-face { font-family: "HZ Coil"; src: url("fonts/HZCoil-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "HZ Coil"; src: url("fonts/HZCoil-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "HZ Coil"; src: url("fonts/HZCoil-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; } /* Newsreader + IBM Plex Mono: load from Google Fonts in (see ../SITE-BRIEF.md). */ :root, [data-theme="bone"] { --hz-jet: #1f1d1b; --hz-bone: #e6dfd0; --hz-bone-ink: #ebe4d6; --hz-sandstone: #8e4a34; --hz-turquoise: #5d8a86; --ground: #efebe3; --panel: #e2dac9; --ink: #1f1d1b; --ink-muted: #5c554d; --rule: #d4cdbf; --rule-strong: #1f1d1b; --accent: var(--hz-sandstone); --on-accent: #efebe3; } [data-theme="jet"] { --ground: #1f1d1b; --panel: #332f2b; --ink: #ebe4d6; --ink-muted: #a19a8e; --rule: #3e3b36; --rule-strong: #ebe4d6; } :root { --space-page: 96px; --space-gutter: 40px; --space-stack: 32px; --space-row: 16px; --radius-none: 0px; --border-hairline: 1px; --border-rule: 2px; --font-display: "HZ Coil", system-ui, sans-serif; --font-text: Newsreader, Georgia, serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; } .wordmark { font-family: var(--font-display); font-size: 120px; line-height: 1; font-weight: 900; letter-spacing: -0.045em; } .display { font-family: var(--font-display); font-size: 96px; line-height: 1; font-weight: 900; } .headline { font-family: var(--font-display); font-size: 44px; line-height: 1.05; font-weight: 700; } .contrast { font-family: var(--font-display); font-size: 44px; line-height: 1.05; font-weight: 200; } .subhead { font-family: var(--font-display); font-size: 36px; line-height: 1.05; font-weight: 400; } .lede { font-family: var(--font-text); font-size: 28px; line-height: 1.35; font-weight: 400; } .body { font-family: var(--font-text); font-size: 20px; line-height: 1.45; font-weight: 400; } .system { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; }