/* ═══════════════════════════════════════════════════════════════════════════ QUANTUM TRADER — Typography @font-face rules, type scale classes, heading styles. ALL values come from the design tokens above. ═══════════════════════════════════════════════════════════════════════════ */ /* Inter + JetBrains Mono are loaded via the Google Fonts in index.html's , not hardcoded @font-face rules here. gstatic.com file paths are content-hashed and internal to Google's infrastructure — hand-typing a specific hash (as this file previously did) is exactly the kind of URL that silently 404s the moment Google rotates it. The CSS2 API link tag always resolves to whatever is currently valid. */ /* ─── Type Scale Utility Classes ───────────────────────── */ .text-xs { font-size: var(--text-xs); line-height: var(--leading-tight); } .text-sm { font-size: var(--text-sm); line-height: var(--leading-tight); } .text-base { font-size: var(--text-base); line-height: var(--leading-normal); } .text-lg { font-size: var(--text-lg); line-height: var(--leading-normal); } .text-xl { font-size: var(--text-xl); line-height: var(--leading-normal); } .text-2xl { font-size: var(--text-2xl); line-height: var(--leading-tight); } .text-3xl { font-size: var(--text-3xl); line-height: var(--leading-tight); } .text-4xl { font-size: var(--text-4xl); line-height: var(--leading-tight); } .font-normal { font-weight: var(--font-weight-normal); } .font-medium { font-weight: var(--font-weight-medium); } .font-semibold { font-weight: var(--font-weight-semibold); } .font-bold { font-weight: var(--font-weight-bold); } .font-primary { font-family: var(--font-family-primary); } .font-mono { font-family: var(--font-family-mono); } /* ─── Heading Styles (Consume spec tokens) ──────────────── */ /* Display — largest, for hero/section titles */ .heading-display { font-family: var(--font-family-primary); font-size: var(--text-4xl); font-weight: var(--font-weight-bold); line-height: var(--leading-tight); letter-spacing: -0.025em; color: var(--theme-text); } .heading-h1 { font-family: var(--font-family-primary); font-size: var(--text-3xl); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); letter-spacing: -0.02em; color: var(--theme-text); } .heading-h2 { font-family: var(--font-family-primary); font-size: var(--text-2xl); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); letter-spacing: -0.01em; color: var(--theme-text); } .heading-h3 { font-family: var(--font-family-primary); font-size: var(--text-xl); font-weight: var(--font-weight-semibold); line-height: var(--leading-tight); color: var(--theme-text); } .heading-h4 { font-family: var(--font-family-primary); font-size: var(--text-lg); font-weight: var(--font-weight-medium); line-height: var(--leading-tight); color: var(--theme-text); } /* ─── Code / Data Blocks ───────────────────────────────── */ .code-block { font-family: var(--font-family-mono); font-size: var(--text-sm); line-height: var(--leading-relaxed); background: var(--theme-surface); border: 1px solid var(--theme-border); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; } /* ─── Body text defaults ──────────────────────────────── */ .body-text { font-family: var(--font-family-primary); font-size: var(--text-base); font-weight: var(--font-weight-normal); line-height: var(--leading-normal); color: var(--theme-text-secondary); } .body-text-sm { font-family: var(--font-family-primary); font-size: var(--text-sm); font-weight: var(--font-weight-normal); line-height: var(--leading-normal); color: var(--theme-text-secondary); } /* ─── Data value / metric display ──────────────────────── */ .data-value { font-family: var(--font-family-mono); font-size: var(--text-lg); font-weight: var(--font-weight-medium); color: var(--theme-text); } .data-value-sm { font-family: var(--font-family-mono); font-size: var(--text-sm); font-weight: var(--font-weight-normal); color: var(--theme-text); } /* ─── Label styling ─────────────────────────────────────── */ .label { font-family: var(--font-family-primary); font-size: var(--text-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.08em; color: var(--theme-text-secondary); }