refactor(design): implement improved OLED dark palette and typography system

- Upgraded color palette with enhanced contrast (5.2:1 to 15:1 ratios)
- Replaced all text-slate-* utilities with semantic color tokens
- Added Fira Code + Fira Sans typography stack
- Converted CSS variables from SCSS to direct hex values
- Updated 26 components with improved color semantics
- Added cursor-pointer and focus states (accessibility phase 1)
- Added aria-labels to 35+ icon-only buttons
- Added prefers-reduced-motion support in globals.css

WCAG AA compliance verified across all text color combinations.
Fixes invisible text issues (slate-500 4.2:1 → muted 5.2:1).

frontend/app/admin/page.tsx

@@ -32,11 +32,11 @@ export default function AdminPage() {
           </div>
           <div>
             <h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Admin Control</h1>
-            <p className="text-[10px] md:text-xs text-slate-500 font-bold tracking-tight mt-0.5">System Configuration & Security</p>
+            <p className="text-[10px] md:text-xs text-muted font-bold tracking-tight mt-0.5">System Configuration & Security</p>
           </div>
           <button 
              onClick={admin.handleLogout}
-             className="ml-auto p-3 bg-slate-900 border border-slate-800 text-slate-500 hover:text-rose-500 rounded-2xl transition-all active:scale-95"
+             className="ml-auto p-3 bg-surface border border-slate-800 text-muted hover:text-rose-500 rounded-2xl transition-all active:scale-95"
              title="Secure Logout"
           >
             <LogOut size={20} />