/* GIG Kuwait Design System — typography tokens (PRD Appendix A.4) Two faces, loaded from the of every page (see fonts.css for why the load moved out of here): Georama for Latin, Almarai for Arabic. Stack order rule: Georama ALWAYS comes first, in every stack including the Arabic one. Georama carries no Arabic glyphs, so Arabic text can never match it and always falls through to Almarai — while Latin words and Western digits inside Arabic copy stay in the brand face. That ordering is what makes `font-variant-numeric: tabular-nums` work at all. Georama's digits are monospaced (564/1000 across 0-9) and it ships a real `tnum`. Almarai's Latin subset has NO `tnum` table and its digits are proportional (355..531/1000 — "1" is a third narrower than "8"), so the tabular-nums declarations dotted through styles.css were a silent no-op there: measured in Chrome with the subset loaded, `tabular-nums` changes Almarai's digit advances by exactly nothing. The cost was live: a countdown ticking 00:11:11 -> 88:88:88 at 48px swung 138.1px -> 172.1px (25% reflow every second) and a KWD column of 1,111.000 over 8,888.000 at 32px misaligned by 22.5px. In Georama the same two pairs measure 189.9/190.1 and 145.7/145.7. Almarai trails every Latin stack for the mirror case: an Arabic company name inside the English UI now renders in Almarai instead of dropping to whatever the platform happens to pick. */ :root { --font-display: "Georama", "Almarai", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: "Georama", "Almarai", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-arabic: "Georama", "Almarai", "Segoe UI", Tahoma, Arial, sans-serif; --font-numeric: "Georama", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-display: 64px; --text-h1: 56px; --text-h2: 40px; --text-h2-sm: 24px; --text-h3: 18px; --text-lead: 18px; --text-body: 15px; --text-sm: 13px; --text-xs: 11px; --leading-tight: 1.1; --leading-body: 1.8; --leading-ui: 1.4; --tracking-display: -0.04em; --tracking-h2: -0.02em; --tracking-eyebrow: 0.06em; --weight-display: 300; --weight-body: 400; --weight-medium: 500; --weight-strong: 600; --weight-eyebrow: 700; /* Legacy bridge for pages that still read the Teradix font names */ --t-font-sans: var(--font-body); --t-font-mono: var(--font-mono); } /* ── Arabic / RTL ──────────────────────────────────────────────────────────── Everything below is a correction for a real property of Almarai, not a taste change. The Latin ramp in :root above is untouched, so dir="ltr" renders exactly as before. */ [dir="rtl"] { /* Same bilingual stack for body and display: Arabic -> Almarai, Latin and digits -> Georama. */ --font-body: var(--font-arabic); --font-display: var(--font-arabic); /* Almarai ships 300/400/700/800 — there is no 500 and no 600. CSS font matching therefore resolves --weight-medium (500) down to 400, making "medium" indistinguishable from body text, and --weight-strong (600) up to 700, making "strong" a step heavier in Arabic than the same token is in English. Pinning both to weights the face actually has removes the silent resolution, keeps the ramp honest, and guarantees no engine can reach for synthetic bold. */ --weight-medium: 400; --weight-strong: 700; /* Almarai Light at 40-68px is a hairline in Arabic: the script's strokes are already thinner than Latin's at equal weight and it has no serifs to hold the shape. Georama Light at that size is a deliberate look; this is not. */ --weight-display: 400; /* Arabic is a connected script. Negative letter-spacing crushes the joins between letters and positive letter-spacing pulls them apart — the eyebrow tracking is as wrong here as the display tracking. Neither is a preference; both break the shape of the word. */ --tracking-display: normal; --tracking-h2: normal; --tracking-eyebrow: normal; /* Almarai declares USE_TYPO_METRICS with a content box of 1.116em (ascender 905 + descender 211 per mille), and its ink reaches 1.561em when marks stack — hamza and madda sit on top of alef, and آ / أ are unavoidable in Arabic. A 1.1 heading line-height is therefore already narrower than the face's own content box before a single diacritic, so wrapped Arabic headings collide. Georama's box is 1.194em but Latin caps and descenders only occupy 0.93em, which is why 1.1 was never a problem in English. --leading-body (1.8) and --leading-ui (1.4) are both already inside the comfortable band for Arabic and are deliberately left alone. */ --leading-tight: 1.3; }