54 lines
2.1 KiB
CSS
54 lines
2.1 KiB
CSS
/* Wiggleverse — Typography tokens
|
|
Two registers, one meaning (BRAND.md):
|
|
• Machine register — Space Grotesk (display) + Inter (body/UI): precise, structural.
|
|
• Human register — Fraunces, ITALIC ONLY: warm, literary, used sparingly
|
|
for the lines that carry conscience ("the soul").
|
|
@font-face rules live in assets/fonts/fonts.css. */
|
|
|
|
:root {
|
|
/* ---- Families ---- */
|
|
--wv-font-display: 'Space Grotesk', system-ui, sans-serif; /* headings, wordmark */
|
|
--wv-font-body: 'Inter', system-ui, sans-serif; /* body / UI */
|
|
--wv-font-human: 'Fraunces', Georgia, serif; /* pull-quotes — italic only */
|
|
|
|
/* semantic aliases */
|
|
--font-display: var(--wv-font-display);
|
|
--font-body: var(--wv-font-body);
|
|
--font-soul: var(--wv-font-human);
|
|
|
|
/* ---- Weights ---- */
|
|
--weight-regular: 400; /* Inter body */
|
|
--weight-medium: 500; /* nav, eyebrows, buttons, Space Grotesk text */
|
|
--weight-semibold:600; /* Inter emphasis, ledger totals */
|
|
--weight-bold: 700; /* Space Grotesk headings, wordmark */
|
|
--weight-soul: 500; /* Fraunces italic pull-quotes */
|
|
|
|
/* ---- Fluid display sizes (clamp: min, vw, max) ---- */
|
|
--text-h1: clamp(2.1rem, 5.2vw, 3.6rem);
|
|
--text-h2: clamp(1.6rem, 3.4vw, 2.4rem);
|
|
--text-h3: 1.2rem;
|
|
--text-lead: clamp(1.05rem, 1.8vw, 1.3rem); /* intro paragraph */
|
|
--text-soul: clamp(1.2rem, 2.4vw, 1.7rem); /* hero pull-quote */
|
|
|
|
/* ---- Body / UI scale ---- */
|
|
--text-body: 1rem; /* 16px base */
|
|
--text-small: .95rem;
|
|
--text-fine: .92rem;
|
|
--text-eyebrow: .8rem; /* uppercase label */
|
|
--text-tag: .72rem; /* pill tags */
|
|
|
|
/* ---- Line heights ---- */
|
|
--leading-tight: 1.12; /* headings */
|
|
--leading-body: 1.6; /* paragraphs */
|
|
|
|
/* ---- Letter spacing ---- */
|
|
--tracking-display: -0.015em; /* headings + wordmark draw in slightly */
|
|
--tracking-eyebrow: 0.12em; /* uppercase eyebrows open up */
|
|
--tracking-tag: 0.08em;
|
|
--tracking-notice: 0.06em;
|
|
|
|
/* ---- Measure ---- */
|
|
--measure-lead: 60ch;
|
|
--measure-prose:68ch;
|
|
}
|