/* LoomiTV — shared design tokens (colors used identically across every page). Page-specific tokens (radius, max-width, sidebar width, status colors, etc.) stay in each page's own CSS file and are declared after this one. */ :root{ --bg:#150F1A; --bg-warm:#1F1724; --bg-deep:#0F0A13; --bg-card:#1B141F; --light:#F3ECDD; --light-2:#EAE0C9; --fg:#F6F1E8; --fg-on-light:#1C1420; --muted:#AFA2BC; --muted-2:#6E6480; --line:rgba(255,255,255,0.09); --line-strong:rgba(255,255,255,0.18); --line-on-light:rgba(28,20,32,0.14); --gold:#E3A63E; --crimson:#C6342A; /* Font stacks — centralized so an RTL font swap (below) only needs to override these three custom properties once, instead of touching the literal font-family declarations still repeated per component in each page's own CSS file. */ --font-heading:'Fraunces',serif; --font-body:'Inter',sans-serif; --font-mono:'IBM Plex Mono',monospace; } /* Arabic typography — Fraunces/Inter/IBM Plex Mono have no Arabic glyph coverage, so RTL swaps in an Arabic-supporting pairing instead: Cairo for headings (geometric, premium weight range comparable to Fraunces' boldness) and Tajawal for body copy (clean, comfortable at UI sizes). Both are Google Fonts (OFL-licensed) loaded alongside the Latin fonts on every page — see the in each page's . */ html[dir="rtl"]{ --font-heading:'Cairo', var(--font-heading); --font-body:'Tajawal', var(--font-body); }