/* ========================================================================== TYPOGRAPHY.CSS — Font Scale, Headings, Body Text, Links CRM + HRMS Platform | Infusion Business Intelligence ========================================================================== All values reference design tokens from variables.css. Font: Inter (Google Fonts CDN) — loaded in the HTML . ========================================================================== */ /* ------------------------------------------------------------------ 1. Body defaults ------------------------------------------------------------------ */ body { font-family: var(--font-base); font-size: var(--text-base); color: var(--text-primary); line-height: 1.6; font-weight: 400; } /* ------------------------------------------------------------------ 2. Heading scale — h1 (3xl) → h6 (sm) All headings: bold weight, tight line-height for visual density. ------------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; color: var(--text-primary); } h1 { font-size: var(--text-3xl); /* 30px */ letter-spacing: -0.02em; } h2 { font-size: var(--text-2xl); /* 24px */ letter-spacing: -0.015em; } h3 { font-size: var(--text-xl); /* 20px */ } h4 { font-size: var(--text-lg); /* 18px */ } h5 { font-size: var(--text-md); /* 16px */ } h6 { font-size: var(--text-sm); /* 13px */ text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); } /* ------------------------------------------------------------------ 3. Paragraph & body text ------------------------------------------------------------------ */ p { font-size: var(--text-base); /* 14px */ line-height: 1.6; color: var(--text-primary); } p + p { margin-top: var(--space-2); } /* ------------------------------------------------------------------ 4. Small / muted text ------------------------------------------------------------------ */ small, .text-sm { font-size: var(--text-sm); /* 13px */ } .text-xs { font-size: var(--text-xs); /* 11px */ } .text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); } /* ------------------------------------------------------------------ 5. Strong / emphasis ------------------------------------------------------------------ */ strong, b { font-weight: 600; } em, i { font-style: italic; } /* ------------------------------------------------------------------ 6. Links ------------------------------------------------------------------ */ a { color: var(--company-primary); transition: color var(--transition-fast); } a:hover { color: var(--company-secondary); } a:focus-visible { outline: 2px solid var(--company-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* ------------------------------------------------------------------ 7. Code / monospace ------------------------------------------------------------------ */ code, kbd, pre { font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; font-size: var(--text-sm); } code { background: var(--info-bg); padding: 2px 6px; border-radius: var(--radius-sm); color: var(--company-primary); } pre { background: var(--content-bg); padding: var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow-x: auto; } pre code { background: none; padding: 0; border-radius: 0; } /* ------------------------------------------------------------------ 8. Selection ------------------------------------------------------------------ */ ::selection { background: var(--company-primary); color: var(--text-inverse); } /* ------------------------------------------------------------------ 9. Utility classes — text alignment & weight ------------------------------------------------------------------ */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* ------------------------------------------------------------------ 10. Truncation — single-line ellipsis ------------------------------------------------------------------ */ .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }