/* ========================================================================== typography.css ========================================================================== */ body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text); background: var(--bg); letter-spacing: var(--tracking-normal); } /* Arabic: swap font + adjust rhythm when */ html[lang="ar"] body, html[dir="rtl"] body { font-family: var(--font-arabic); line-height: 1.85; } h1, h2, h3 { font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--text); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); } h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 { letter-spacing: 0; } p { color: var(--text-muted); } .lead { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.55; } .eyebrow { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); } html[dir="rtl"] .eyebrow { letter-spacing: 0; } .caption { font-size: var(--fs-caption); color: var(--text-subtle); } .text-accent { color: var(--accent); } /* Section heading block (title + subtitle) */ .section-head { max-width: 720px; margin: 0 auto var(--space-7); text-align: center; } .section-head .lead { margin-top: var(--space-4); }