/* typography.css — type scale, utilities. Fonts via Google CDN in HTML . */ /* ─── HEADINGS ──────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 600; } h1 { font-size: var(--size-h1); } h2 { font-size: var(--size-h2); } h3 { font-size: var(--size-h3); } /* ─── TYPE SCALE UTILITIES ──────────────────────────────── */ .text-hero { font-family: var(--font-display); font-size: var(--size-hero); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 600; } .text-h1 { font-family: var(--font-display); font-size: var(--size-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 600; } .text-h2 { font-family: var(--font-display); font-size: var(--size-h2); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 600; } .text-h3 { font-family: var(--font-display); font-size: var(--size-h3); line-height: var(--leading-tight); font-weight: 600; } .text-body { font-family: var(--font-body); font-size: var(--size-body); line-height: var(--leading-body); font-weight: 400; } .text-small { font-family: var(--font-body); font-size: var(--size-small); line-height: var(--leading-body); font-weight: 400; } .text-eyebrow { font-family: var(--font-body); font-size: var(--size-eyebrow); line-height: 1; letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 500; color: var(--color-text-muted); } /* ─── DISPLAY ITALIC (editorial quotes, hero secondary lines) */ .text-display-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; } /* ─── COLOR UTILITIES ────────────────────────────────────── */ .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-inverse { color: var(--color-text-inverse); } .text-muted { color: var(--color-text-muted); } /* ─── ALIGNMENT ──────────────────────────────────────────── */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /* ─── BODY COPY ──────────────────────────────────────────── */ p { font-family: var(--font-body); font-size: var(--size-body); line-height: var(--leading-body); color: var(--color-text-secondary); } p + p { margin-top: var(--space-sm); } /* ─── STRONG / EM ────────────────────────────────────────── */ strong { font-weight: 600; color: var(--color-text-primary); } em { font-style: italic; }