feat(ui): dark-mode token sweep, mobile nav safe-area and a11y polish

- Convert hardcoded light surfaces/borders/text in index.css to theme tokens
- Token-driven status cards, semantic colors, elevation shadows
- Mobile bottom nav: 20px icons, aria-current, safe-area inset padding
- Neutral dark pre-mount canvas fallback

src/components/MobileNav.tsx

@@ -10,9 +10,10 @@ export function MobileNav({ activeView, onChange }: { activeView: AppView; onCha
           type="button"
           className={`mobile-nav-item ${activeView === item.id ? "mobile-nav-item-active" : ""}`}
           onClick={() => onChange(item.id)}
+          aria-current={activeView === item.id ? "page" : undefined}
         >
-          <item.icon size={16} aria-hidden="true" />
-          {item.label}
+          <item.icon size={20} aria-hidden="true" />
+          <span>{item.label}</span>
         </button>
       ))}
     </nav>

src/components/StatusRail.tsx

@@ -18,13 +18,13 @@ export function StatusRail({ busyAction, syncError, setupStatus }: StatusRailPro
         </div>
       )}
       {syncError && (
-        <div className="status-card" style={{ borderColor: "#ffc9c2", background: "#fff3f1", color: "#9f1c16" }}>
+        <div className="status-card status-card--error">
           <AlertTriangle size={17} aria-hidden="true" />
           {syncError}
         </div>
       )}
       {setupStatus.state === "error" && (
-        <div className="status-card" style={{ borderColor: "#f9e3b0", background: "#fff8e8", color: "#7a4e00" }}>
+        <div className="status-card status-card--warning">
           <AlertTriangle size={17} aria-hidden="true" />
           {setupStatus.message}
         </div>