/* =========================================================================== Dits typography — global font system. Phase A.1 batch 2. Font families per script: Latin + Cyrillic display → Fraunces (variable: opsz, wght, SOFT, WONK) Latin + Cyrillic body → Inter (variable: wght) Arabic display + body → IBM Plex Sans Arabic (400/500/600/700) CJK fallback → Noto Sans CJK / Noto Serif CJK (system if available; otherwise the cascade falls through to platform default). Lobster, Salsa, Pacifico, and other casual-script display fonts are explicitly not loaded. Per the brand-identity anti-list (point 4): one literary serif for every section heading. `font-display: swap` everywhere so a flash of unstyled text is fine; a blank page for two seconds is not. =========================================================================== */ /* --- Family stacks (semantic) --- */ :root { --ff-display: "Fraunces", Georgia, "Iowan Old Style", "Times New Roman", serif; --ff-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Long-form READING serif (book reader column only). Spectral is drawn for extended on-screen reading; warmer/calmer than the UI sans, paired with the Fraunces display headings. */ --ff-reading: "Spectral", Georgia, "Iowan Old Style", "Times New Roman", serif; --ff-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Geeza Pro", "Tahoma", sans-serif; --ff-cjk: "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans CJK KR", "PingFang SC", "Hiragino Sans", "Microsoft YaHei", sans-serif; --ff-cjk-serif: "Noto Serif CJK SC", "Noto Serif CJK JP", "Noto Serif CJK KR", "Source Han Serif SC", "Songti SC", "Hiragino Mincho Pro", serif; } /* --- Per-language overrides --- Triggered by per the dits_tags.lang_dir helper. Body inherits the appropriate family without per-component overrides. */ :root[lang="ar"], :root[lang="ur"], :root[lang="fa"], :root[lang="sd"], :root[lang="ku"], :root[lang="ckb"], :root[lang="he"], :root[lang="yi"] { --ff-body: var(--ff-arabic); /* Display in Arabic-script locales falls back to the Arabic family — Fraunces does not include Arabic glyphs, so we use Plex Arabic for headings too. */ --ff-display: var(--ff-arabic); } :root[lang="zh"], :root[lang="zh-CN"], :root[lang="zh-TW"], :root[lang="ja"], :root[lang="ko"] { --ff-body: var(--ff-cjk); --ff-display: var(--ff-cjk-serif); } /* --- Line-height per script --- */ :root { --lh-base: 1.55; } :root[lang="ar"], :root[lang="ur"], :root[lang="fa"], :root[lang="sd"], :root[lang="ku"], :root[lang="ckb"], :root[lang="he"], :root[lang="yi"] { --lh-base: 1.75; /* Arabic gets more vertical breathing room */ } :root[lang="zh"], :root[lang="zh-CN"], :root[lang="zh-TW"], :root[lang="ja"], :root[lang="ko"] { --lh-base: 1.7; /* CJK ideographs read better with looser leading */ } /* --- Type role tokens (Phase A.1, used by future components) --- */ :root { --type-display: 600 var(--fs-3xl)/1.05 var(--ff-display); --type-headline: 600 var(--fs-2xl)/1.15 var(--ff-display); --type-title: 600 var(--fs-xl)/1.2 var(--ff-display); --type-body: 400 var(--fs-md)/var(--lh-base) var(--ff-body); --type-caption: 400 var(--fs-sm)/1.5 var(--ff-body); } /* --- Render hints --- */ html { font-family: var(--ff-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* OpenType features for Inter (the body face) — `ss01` and `cv11` improve the disambiguated zero/Greek-capitals shape. Already enabled in base.css; declared here as the canonical location going forward. */ body { font-feature-settings: "ss01", "cv11"; } /* Display family always wins on the wordmark and section heads, even when the page lang routes :root --ff-body to Arabic — the wordmark stays Latin per the brand spec (wordmarks do not transliterate). */ .dits-wordmark, .dits-hero__title, .dits-section__title { font-family: var(--ff-display); } :root[lang="ar"] .dits-wordmark, :root[lang="ur"] .dits-wordmark, :root[lang="fa"] .dits-wordmark, :root[lang="he"] .dits-wordmark, :root[lang="ar"] .dits-hero__title, :root[lang="ur"] .dits-hero__title { /* Wordmark stays Latin in RTL UI per brand-identity proposal. */ font-family: "Fraunces", Georgia, serif; direction: ltr; unicode-bidi: isolate; }