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/globals.css

@@ -1,19 +1,28 @@
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 :root {
-  /* slate-950 forced as default to prevent white flash */
-  --background: #020617;
-  --foreground: #f1f5f9;
-  --primary: #3b82f6;
-  --primary-foreground: #ffffff;
+  /* Dark Mode (OLED) - Improved Contrast Palette */
+  --background: #0A0E27;
+  --foreground: #F0F4F8;
+  --primary: #3B82F6;
+  --primary-foreground: #FFFFFF;
+  --font-code: 'Fira Code', monospace;
+  --font-sans: 'Fira Sans', sans-serif;
 }
 
 body {
   color: var(--foreground);
   background-color: var(--background);
-  font-family: inherit; /* Use Next.js font if defined, or system default */
+  font-family: var(--font-sans);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-code);
+  font-weight: 600;
 }
 
 /* Custom Scrollbar Styling */