feat: Add PWA support and consolidate CSS design system

- Add PWA manifest, icons (192x192, 512x512), and service worker
- Register service worker in index.html with Apple mobile web app support
- Consolidate CSS variables and design tokens documentation
- Update PrimeVue overrides for consistent theming
- Refactor data-entry components to use shared CSS patterns
- Add frontend-style-auditor agent for style consistency checks
- Minor OCR validation and job worker improvements
- Update start-prod.sh configuration

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

docs/DESIGN_TOKENS.md

@@ -125,7 +125,32 @@ Design tokens are the visual design atoms of the ROA2WEB design system. They are
 | `--color-bg` | #ffffff | Primary background, cards |
 | `--color-bg-secondary` | #f9fafb | Alternate backgrounds, hover states |
 | `--color-bg-muted` | #f3f4f6 | Disabled backgrounds, subtle sections |
-| `--color-bg-dark` | #111827 | Dark mode (future) |
+| `--color-bg-dark` | #111827 | Dark backgrounds |
+
+### Semantic Surface Tokens (PrimeVue-compatible)
+
+**CRITICAL for dark mode support!** These tokens automatically switch values in dark mode.
+
+| Token | Light Value | Dark Value | Use Case |
+|-------|-------------|------------|----------|
+| `--surface-card` | #ffffff | #1e293b | Card backgrounds, elevated surfaces |
+| `--surface-ground` | #f8fafc | #0f172a | Page background, base layer |
+| `--surface-section` | #ffffff | #1e293b | Section backgrounds |
+| `--surface-hover` | #f1f5f9 | #334155 | Hover states on surfaces |
+| `--surface-border` | #e2e8f0 | #475569 | Borders on surfaces |
+| `--surface-overlay` | #ffffff | #1e293b | Modal/overlay backgrounds |
+
+**Usage:**
+```css
+.card {
+  background: var(--surface-card);
+  border: 1px solid var(--surface-border);
+}
+
+.page {
+  background: var(--surface-ground);
+}
+```
 
 ### Border Colors
 
@@ -456,9 +481,56 @@ For backwards compatibility with existing code:
 
 ---
 
-## Dark Mode (Future)
+## Dark Mode (ACTIVE)
 
-Dark mode tokens are defined in `variables.css` using `@media (prefers-color-scheme: dark)`. When enabled, tokens automatically switch to dark variants.
+Dark mode is fully supported via `@media (prefers-color-scheme: dark)` in `variables.css`. All tokens automatically switch to dark variants.
+
+### How It Works
+
+```css
+/* Light mode (default) */
+:root {
+  --surface-card: #ffffff;
+  --text-color: #111827;
+}
+
+/* Dark mode (automatic) */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --surface-card: #1e293b;
+    --text-color: #f9fafb;
+  }
+}
+```
+
+### Key Dark Mode Tokens
+
+| Token | Light | Dark | Purpose |
+|-------|-------|------|---------|
+| `--surface-card` | #ffffff | #1e293b | Card/container backgrounds |
+| `--surface-ground` | #f8fafc | #0f172a | Page background |
+| `--surface-border` | #e2e8f0 | #475569 | Borders |
+| `--text-color` | #111827 | #f9fafb | Primary text |
+| `--text-color-secondary` | #6b7280 | #d1d5db | Secondary text |
+
+### Color Scales for Status
+
+Each color has a full scale (50-900) that inverts appropriately in dark mode:
+
+| Color | Light Background | Dark Background | Use Case |
+|-------|-----------------|-----------------|----------|
+| `--green-50/100` | Light green bg | Dark green bg | Success backgrounds |
+| `--green-500/600` | Green text/icons | Same | Success accents |
+| `--yellow-50/100` | Light yellow bg | Dark yellow bg | Warning backgrounds |
+| `--yellow-500/600` | Yellow text/icons | Same | Warning accents |
+| `--red-50/100` | Light red bg | Dark red bg | Error backgrounds |
+| `--red-500/600` | Red text/icons | Same | Error accents |
+
+### Testing Dark Mode
+
+1. In browser DevTools: Set `prefers-color-scheme: dark`
+2. In Playwright: `await page.emulateMedia({ colorScheme: 'dark' })`
+3. System preference: Change OS dark mode setting
 
 ---