/* Global Styles & Variable Design Tokens */ @import url('local-fonts.css'); /* ── Typography pairings [Phase 2 ✅] ────────────────────────────────────── The four --font-{en,ar}-* properties below are written onto at runtime by `applyTypography()` in js/typography.js, which owns the pairing library. The values here are only the pre-JS fallback, so a page renders in the default pairing rather than an unstyled system font if config is slow. The old `body.font-en-*` / `body.font-ar-*` classes are gone: they let a merchant combine any Latin face with any Arabic face, including pairs with mismatched proportions, and they were applied by overwriting `body.className` — which wiped every other class on . */ :root { /* [Phase 6 ✅] 'Cairo' sits inside the Latin stacks too — see the long note in applyTypography(). A font stack resolves per character, so Arabic typed inside an English string (bilingual product names, mixed descriptions) has no lang attribute and lands on the Latin stack. Without an Arabic family there, Chrome falls through to a thin system Naskh while Firefox picks something else — same page, two different renderings. Latin is unaffected: Cairo is only reached for glyphs the Latin face does not have. */ --font-en-display: 'Outfit', 'Cairo', system-ui, sans-serif; --font-en-primary: 'Plus Jakarta Sans', 'Cairo', system-ui, sans-serif; --font-ar-display: 'Cairo', system-ui, sans-serif; --font-ar-primary: 'Cairo', system-ui, sans-serif; /* Arabic metrics — overridden per pairing (PLAN §3.2). */ --ar-scale: 1.10; --ar-line-height: 1.65; } /* --font-heading / --font-body are Tailwind @theme tokens and are restated HERE, on , rather than pointed at --font-display from :root. A custom property's value is computed at the element that declares it: writing `--font-heading: var(--font-display)` inside :root resolves it once against :root's own --font-display and then inherits that frozen string everywhere, so headings kept rendering the root default no matter the language. */ body { --font-primary: var(--font-en-primary); --font-display: var(--font-en-display); --font-heading: var(--font-en-display); --font-body: var(--font-en-primary); } html[lang="ar"] body, [dir="rtl"] body { --font-primary: var(--font-ar-primary); --font-display: var(--font-ar-display); --font-heading: var(--font-ar-display); --font-body: var(--font-ar-primary); } /* ── Arabic script metrics [Phase 2 ✅] ──────────────────────────────────── Previously this file swapped font-family for Arabic and compensated nothing, so Arabic rendered at Latin's size and leading — too small and too tight for a script whose diacritics sit above and below the baseline. Size is applied at the ROOT so every rem-based size scales together and nothing has to be restated. Known limitation: px-hardcoded font sizes do not scale — converting those to rem is Phase 3's legibility work. */ html[lang="ar"], html[dir="rtl"] { font-size: calc(100% * var(--ar-scale)); } html[lang="ar"] body, html[dir="rtl"] body { line-height: var(--ar-line-height); } /* Arabic is a CONNECTED script: any tracking literally breaks the joins between letterforms. This neutralises tracking inherited from Latin-oriented rules anywhere in the cascade — the one sanctioned use of !important here, matching the existing reduced-motion backstop. PLAN §3.2. */ html[lang="ar"] *, html[dir="rtl"] *, [lang="ar"], [lang="ar"] * { letter-spacing: 0 !important; } /* Arabic inside an otherwise-English page — the language toggle, bilingual product names, mixed descriptions — must also pick up the Arabic face and its leading, or it renders in a Latin font's fallback glyphs at Latin leading. The element-level [lang="ar"] selectors above and below are what make that work without the whole page being Arabic. */ [lang="ar"] { font-family: var(--font-ar-primary); line-height: var(--ar-line-height); } [lang="ar"] :is(h1, h2, h3, h4, h5, h6) { font-family: var(--font-ar-display); } /* ══════════════════════════════════════════════════════════════════════════ SEMANTIC COLOUR TOKENS [Phase 4 ✅] — PLAN §3.4 ══════════════════════════════════════════════════════════════════════════ This block is the SINGLE SOURCE OF TRUTH for colour in the product. It used to be split in two: a six-value `--theme-*` set here that applyTheme() drove, and a thirty-value `--color-*` set inside tailwind.input.css's @theme that NOTHING drove. The `--color-*` half has ~580 call sites across the five stylesheets and the inline