/* ============================================================ Arbah Al Madina — v3 design system: tokens + base ============================================================ Source of truth: design/arbah-v3/project/arbah.css (handoff bundle). v3 reuses v2's LOCKED palette verbatim and only ADDS shadow / ring / gradient / page-bg tokens — the palette is never redefined. SCOPING: every v3 painting rule is scoped under `.av3` — the surface root class each v3 page wraps its body in. The theme-flag adds `.arbah-v3` to (flag detection in JS), but CSS resolution keys off `.av3` so generic class names (.card / .kpi / .chip / .pill) can never leak onto legacy or v2 elements rendered elsewhere in the tree. Tokens are declared ON `.av3` so the root's own rules resolve them. `dir` lives on (app.js), so RTL rules read `[dir="rtl"] .av3 …`. ============================================================ */ /* TOKEN DECLARATIONS — must resolve at BOTH the theme root (html.arbah-v3) and the surface root (.av3). The app SHELL (Layout.js wraps it in .av3-shell) lives under html.arbah-v3 but is NOT inside any .av3 surface div, so tokens scoped to .av3 alone never reach the sidebar/topbar/bottom-nav — there, var(--arbah-navy-700) resolves EMPTY and the sidebar paints transparent (rgba(0,0,0,0)) with its hard-coded white text → invisible nav (P0). Declaring the custom properties on .arbah-v3 (the html class, an ancestor of .av3-shell) makes them inherit to the shell too. .arbah-v3 only matches when v3 is active, so legacy/v1/v2 never see these tokens (no :root leak). */ .arbah-v3, .av3 { /* --- LOCKED v2 PALETTE (verbatim) --- */ --arbah-navy-900:#0A1B2E; --arbah-navy-700:#102A43; /* PRIMARY brand */ --arbah-navy-500:#2C4A6E; --arbah-navy-100:#E3EAF3; --arbah-bronze-700:#7A4F1F; --arbah-bronze-500:#A06A2C; /* APP ACCENT */ --arbah-bronze-200:#D9C28A; --arbah-bronze-100:#F3E8D5; --arbah-ink:#0F172A; --arbah-ink-muted:#475569; --arbah-ink-subtle:#94A3B8; --arbah-surface:#FFFFFF; --arbah-surface-sunken:#F6F8FB; --arbah-surface-raised:#EEF2F7; --arbah-border:#E2E8F0; --arbah-border-strong:#CBD5E1; --arbah-success:#047857; --arbah-success-soft:#D1FAE5; --arbah-warning:#D97706; --arbah-warning-soft:#FEF3C7; --arbah-danger:#B91C1C; --arbah-danger-soft:#FEE2E2; --arbah-info:#1E40AF; --arbah-info-soft:#DBEAFE; /* radii (locked) */ --r-4:4px; --r-6:6px; --r-8:8px; --r-12:12px; /* --- v3 ADDITIONS (layered on top, palette untouched) --- */ --page-bg:#DCE2EA; --app-bg:var(--arbah-surface-sunken); --shadow-sm:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05); --shadow-md:0 4px 12px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.06); --shadow-card:0 1px 2px rgba(15,23,42,.05), 0 2px 6px rgba(15,23,42,.04); --ring:0 0 0 3px rgba(44,74,110,.30); --ring-danger:0 0 0 3px rgba(185,28,28,.28); --font-serif:"IBM Plex Serif", Georgia, serif; --font-sans:"IBM Plex Sans", system-ui, sans-serif; --font-sans-ar:"IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; --font-mono:"IBM Plex Mono", ui-monospace, monospace; } /* User-selected appearance. System mode resolves to this same attribute in appearance.js, so all surfaces share one deterministic token set. */ html[data-color-scheme="dark"] .arbah-v3, html[data-color-scheme="dark"].arbah-v3, html[data-color-scheme="dark"] .av3 { --arbah-navy-900:#07111F; --arbah-navy-700:#0D2238; --arbah-navy-500:#6F91B8; --arbah-navy-100:#263A50; --arbah-bronze-200:#E1CB95; --arbah-ink:#F1F5F9; --arbah-ink-muted:#CBD5E1; --arbah-ink-subtle:#94A3B8; --arbah-surface:#111C2A; --arbah-surface-sunken:#0B1420; --arbah-surface-raised:#1A293A; --arbah-border:#2B3D50; --arbah-border-strong:#3C5269; --arbah-success-soft:#123D35; --arbah-warning-soft:#473717; --arbah-danger-soft:#4A2025; --arbah-info-soft:#1C315A; --page-bg:#07111F; --app-bg:#0B1420; --shadow-sm:0 1px 3px rgba(0,0,0,.35); --shadow-md:0 8px 24px rgba(0,0,0,.35); --shadow-card:0 2px 8px rgba(0,0,0,.28); } html[data-color-scheme="dark"] body { background:#0B1420; color:#F1F5F9; } /* BASE SURFACE BODY — only the .av3 surface root, never . These are page-body treatments (container queries, line-height); putting container-type on the document root would break document-level layout/scroll. The shell has its own base rules in arbah-v3-shell.css. */ .av3 { /* base surface for any v3 page body */ font-family:var(--font-sans); color:var(--arbah-ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.45; /* responsive: container queries key off the surface's own width so the same body adapts whether the desktop sidebar is present or not. */ container-type:inline-size; container-name:app; } .av3, .av3 * { box-sizing:border-box; } /* numeral helpers (shared) */ .av3 .num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; } .av3 .seg-num { font-family:var(--font-mono); font-variant-numeric:tabular-nums; } .av3 .seg-txt { font-family:var(--font-sans); } .av3 .tnum { font-family:var(--font-mono); font-feature-settings:"tnum" 1, "zero" 1; font-variant-numeric:tabular-nums; } /* focus-visible rings for accessibility */ .av3 :focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--r-6); } /* directional arrows (view-all, CTA) flip in RTL */ [dir="rtl"] .av3 .flip-x { transform:scaleX(-1); } /* RTL: Arabic body font (IBM Plex Serif has no Arabic glyphs) */ [dir="rtl"] .av3 { font-family:var(--font-sans-ar); } [dir="rtl"] .av3 .seg-txt { font-family:var(--font-sans-ar); }