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/components/BottomNav.tsx

@@ -25,8 +25,8 @@ export default function BottomNav({
   const isAdmin = pathname === '/admin';
 
   return (
-    <footer className="fixed bottom-0 left-0 right-0 py-3 px-2 pb-safe bg-slate-950 border-t border-slate-900 z-40 transition-all duration-300">
-      <div className="max-w-xl mx-auto flex justify-around items-center text-slate-400">
+    <footer className="fixed bottom-0 left-0 right-0 py-3 px-2 pb-safe bg-background border-t border-slate-900 z-40 transition-all duration-300">
+      <div className="max-w-xl mx-auto flex justify-around items-center text-secondary">
         
         <button
           onClick={() => router.push('/')}