/* ============================================================ Typography System ============================================================ Font imports, heading hierarchy, body text, captions, labels, and fluid responsive scaling via clamp(). ============================================================ */ /* ── Font Imports ─────────────────────────────────────────── */ /* Plus Jakarta Sans — Primary (headings, brand) */ /* Inter — Secondary (body, UI) */ /* Loaded via Google Fonts in HTML for now; migrate to self-hosted @font-face for production. */ /* ── Heading Hierarchy ────────────────────────────────────── */ .text-hero { font-family: var(--font-primary); font-size: var(--text-hero); font-weight: var(--weight-extrabold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text); } .text-display { font-family: var(--font-primary); font-size: var(--text-display); font-weight: var(--weight-extrabold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text); } .text-h3 { font-family: var(--font-primary); font-size: var(--text-h3); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--color-text); } .text-h4 { font-family: var(--font-primary); font-size: var(--text-h4); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--color-text); } /* ── Body Text ────────────────────────────────────────────── */ .text-body { font-family: var(--font-secondary); font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-normal); letter-spacing: var(--tracking-wide); color: var(--color-text); } .text-body-muted { font-family: var(--font-secondary); font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--color-text-muted); } /* ── Small / Caption ──────────────────────────────────────── */ .text-small { font-family: var(--font-secondary); font-size: var(--text-small); font-weight: var(--weight-medium); line-height: var(--leading-normal); color: var(--color-text-muted); } .text-caption { font-family: var(--font-secondary); font-size: var(--text-caption); font-weight: var(--weight-medium); line-height: 1.4; color: var(--color-text-muted); } /* ── Labels / Badges ──────────────────────────────────────── */ .text-label { font-family: var(--font-secondary); font-size: var(--text-badge); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-wider); text-transform: uppercase; } .text-overline { font-family: var(--font-secondary); font-size: var(--text-small); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-primary); } /* ── Font Weight Utilities ────────────────────────────────── */ .fw-regular { font-weight: var(--weight-regular); } .fw-medium { font-weight: var(--weight-medium); } .fw-semibold { font-weight: var(--weight-semibold); } .fw-bold { font-weight: var(--weight-bold); } .fw-extrabold { font-weight: var(--weight-extrabold); } /* ── Text Color Utilities ─────────────────────────────────── */ .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } .text-accent { color: var(--color-accent); } .text-success { color: var(--color-success); } .text-danger { color: var(--color-danger); } .text-warning { color: var(--color-warning); } .text-muted { color: var(--color-text-muted); } .text-light { color: var(--color-text-light); } .text-inverse { color: var(--color-text-inverse); } .text-dark { color: var(--color-text); } /* ── Line Clamping ────────────────────────────────────────── */ .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ── Section Headers ──────────────────────────────────────── */ .section-header { text-align: center; margin-bottom: var(--space-2xl); } .section-header .text-overline { display: block; margin-bottom: var(--space-sm); } .section-header .text-display { margin-bottom: var(--space-md); } .section-header .section-subtitle { font-size: var(--text-body); color: var(--color-text-muted); max-width: 600px; margin-inline: auto; line-height: var(--leading-relaxed); }