/* ============================================================ Arbah v1 — Shell migration Scoped overrides for the app frame (sidebar, topbar, bottom nav) under the .arbah-v1 class. Legacy declarations in tokens.css stay byte-identical; nothing here applies unless has .arbah-v1. Spec: cluade/design/arbah-v1-design-system-COMPLETE-2026-05-12.md ============================================================ */ /* ---------- Legacy class definitions (paint-preserving) -------- */ /* These classes replace inline style= attributes on Layout.js. Outside the .arbah-v1 scope so unflagged renders pick them up at specificity (0,1,0). Each .arbah-v1 .legacy-X rule below has (0,2,0) and wins under the flag on plain specificity. Migrated from inline styles in PR 17 (zero-specificity-hack cleanup): legacy-app-shell-bg ← style="background:var(--surface-sunken);" legacy-bottom-nav-frame ← style="background:var(--surface);border-top:1px solid var(--border);" legacy-sidebar-overlay ← style="background:rgba(15,23,42,0.55)" legacy-sidebar-drawer ← style="width:240px" */ .legacy-app-shell-bg { background: var(--surface-sunken); } .legacy-bottom-nav-frame { background: var(--surface); border-top: 1px solid var(--border); } .legacy-sidebar-overlay { background: rgba(15, 23, 42, 0.55); } .legacy-sidebar-drawer { width: 240px; } /* BottomNav button color — was inline `style=${active ? 'color:var(--brand);' : 'color:var(--ink-muted);'}`. Now driven by .legacy-bn-active / .legacy-bn-inactive. Scope- nested .arbah-v1 .bottom-nav .bn-active rule (0,3,0) wins under the flag over .legacy-bn-active (0,1,0). */ .legacy-bn-active { color: var(--brand); } .legacy-bn-inactive { color: var(--ink-muted); } /* ---------- Root shell frame ----------------------------------- */ /* `app-shell` is an additive class on the outer Layout wrapper. The legacy wrapper now carries .legacy-app-shell-bg instead of an inline style — scope-specificity (0,2,0) beats it (0,1,0) without . */ .arbah-v1 .app-shell { background: var(--arbah-bg); color: var(--arbah-text); font-family: var(--arbah-font-sans); } /* ---------- Sidebar ------------------------------------------- */ .arbah-v1 .sidebar { background: var(--arbah-navy-700); color: rgba(255, 255, 255, .85); font-family: var(--arbah-font-sans); } .arbah-v1 .sidebar-brand { border-bottom-color: rgba(255, 255, 255, .08); } .arbah-v1 .sidebar-brand-title { font-family: var(--arbah-font-sans); font-weight: 600; color: #fff; } .arbah-v1 .sidebar-brand-sub { color: rgba(255, 255, 255, .72); } .arbah-v1 .sidebar-logo { color: var(--arbah-navy-700); } .arbah-v1 .sidebar-item { font-family: var(--arbah-font-sans); font-weight: 500; font-size: var(--arbah-text-sm); color: rgba(255, 255, 255, .72); } .arbah-v1 .sidebar-item:hover { background: var(--arbah-navy-800); color: #fff; } .arbah-v1 .sidebar-item-active { background: var(--arbah-navy-800); color: #fff; } .arbah-v1 .sidebar-item-active::before { background: var(--arbah-bronze-500); } .arbah-v1 .sidebar-item:focus-visible { outline: 2px solid var(--arbah-bronze-500); outline-offset: -2px; } .arbah-v1 .sidebar-footer { border-top-color: rgba(255, 255, 255, .08); } .arbah-v1 .sidebar-avatar { background: var(--arbah-bronze-500); } .arbah-v1 .sidebar-user-name { color: rgba(255, 255, 255, .92); } .arbah-v1 .sidebar-user-role { color: rgba(255, 255, 255, .65); } /* ---------- Topbar (desktop header) --------------------------- */ .arbah-v1 .topbar { background: var(--arbah-surface); border-bottom: 1px solid var(--arbah-border); font-family: var(--arbah-font-sans); font-size: var(--arbah-text-base); color: var(--arbah-text); } .arbah-v1 .topbar-date { color: var(--arbah-text-muted); font-size: var(--arbah-text-sm); } .arbah-v1 .topbar-lang { background: var(--arbah-surface); border-color: var(--arbah-border-strong); color: var(--arbah-text-muted); font-family: var(--arbah-font-sans); font-weight: 600; } .arbah-v1 .topbar-lang:hover { background: var(--arbah-surface-2); color: var(--arbah-text); } /* ---------- Bottom nav (mobile) ------------------------------- Legacy