/* ═══════════════════════════════════════════════════ JACQUARD DESIGN SYSTEM — Typography Version 2.1 · April 2026 Apply via semantic class, e.g.

Web-appropriate ratios; mirror the SwiftUI JTypography scale. ═══════════════════════════════════════════════════ / .j-display, .j-title, .j-heading, .j-compact-title, .j-small-title, .j-eyebrow-title, .j-numeric-display { font-family: var(--font-display); color: var(--fg-1); } .j-display { font-weight: 800; font-size: clamp(56px, 9vw, var(--type-display)); line-height: var(--lh-display); letter-spacing: var(--track-display); } .j-title { font-weight: 700; font-size: var(--type-title); line-height: var(--lh-title); letter-spacing: var(--track-heading); } .j-heading { font-weight: 700; font-size: var(--type-heading); line-height: var(--lh-heading); letter-spacing: var(--track-heading); } .j-compact-title { font-weight: 700; font-size: var(--type-compact); line-height: var(--lh-compact); letter-spacing: var(--track-compact); } .j-small-title { font-weight: 700; font-size: var(--type-small); line-height: var(--lh-small); letter-spacing: var(--track-compact); } .j-eyebrow-title { font-weight: 700; font-size: var(--type-eyebrow); line-height: var(--lh-small); letter-spacing: var(--track-compact); } .j-numeric-display { font-weight: 800; font-size: var(--type-title); line-height: var(--lh-tight); letter-spacing: var(--track-display); font-feature-settings: 'tnum' 1; } / ── DM Sans styles ── / .j-body, .j-compact-body, .j-small-body, .j-small-emphasis, .j-caption, .j-caption-emphasis, .j-small-caption, .j-label, .j-micro, .j-micro-label, .j-loose-label, .j-nano, .j-field-text, .j-light, .j-medium { font-family: var(--font-body); color: var(--fg-1); } .j-body { font-weight: 400; font-size: var(--type-body); line-height: var(--lh-body); } .j-compact-body { font-weight: 400; font-size: var(--type-compact-body); line-height: var(--lh-compact-body); } .j-small-body { font-weight: 400; font-size: var(--type-small); line-height: var(--lh-dense); } .j-small-emphasis { font-weight: 500; font-size: var(--type-small); line-height: var(--lh-dense); } .j-caption { font-weight: 300; font-size: var(--type-caption); line-height: var(--lh-caption); color: var(--fg-2); } .j-caption-emphasis { font-weight: 500; font-size: var(--type-caption); line-height: var(--lh-caption); } .j-small-caption { font-weight: 400; font-size: var(--type-label); line-height: var(--lh-caption); } .j-label { font-weight: 600; font-size: var(--type-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); } .j-micro { font-weight: 600; font-size: var(--type-micro); } .j-micro-label { font-weight: 600; font-size: var(--type-micro); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--fg-3); } .j-loose-label { font-weight: 600; font-size: var(--type-micro); letter-spacing: var(--track-label-loose); text-transform: uppercase; color: var(--fg-3); } .j-nano { font-weight: 500; font-size: var(--type-nano); line-height: var(--lh-field); } .j-field-text { font-weight: 400; font-size: var(--type-body); line-height: var(--lh-field); } .j-light { font-weight: 300; font-size: var(--type-small); line-height: var(--lh-dense); color: var(--fg-2); } .j-medium { font-weight: 500; font-size: var(--type-compact-body); line-height: var(--lh-caption); } .j-mono { font-family: var(--font-mono); font-weight: 500; font-size: var(--type-label); font-feature-settings: 'tnum' 1; color: var(--fg-code); } / ── Semantic element mapping (opt in with ) ── */ .j-prose h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 6vw, 56px); line-height: var(--lh-tight); letter-spacing: var(--track-display); } .j-prose h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 5vw, 44px); line-height: var(--lh-prose-title); letter-spacing: var(--track-heading); } .j-prose h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--type-heading); line-height: var(--lh-heading); letter-spacing: var(--track-heading); } .j-prose h4 { font-family: var(--font-display); font-weight: 700; font-size: var(--type-compact); line-height: var(--lh-compact); letter-spacing: var(--track-compact); } .j-prose p { font-family: var(--font-body); font-weight: 300; font-size: var(--type-body); line-height: var(--lh-prose); color: var(--fg-2); } .j-prose code { font-family: var(--font-mono); font-size: var(--type-caption); background: var(--glycine-pale); color: var(--fg-code); padding: var(--r-micro) var(--sp-sm); border-radius: var(--r-checkbox); }