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>

.claude/rules/css-design-system.md

@@ -14,6 +14,60 @@ paths: src/modules/**/*.{vue,css}
 - Check `CSS_PATTERNS.md` BEFORE writing any CSS
 - Import shared styles from `shared/frontend/styles/`
 
+## Dark Mode Support (CRITICAL)
+Dark mode is ACTIVE via `@media (prefers-color-scheme: dark)`.
+
+**Use semantic surface tokens for backgrounds:**
+| Token | Light | Dark | Use For |
+|-------|-------|------|---------|
+| `--surface-card` | white | dark | Card/container backgrounds |
+| `--surface-ground` | light gray | darker | Page background |
+| `--surface-hover` | hover gray | dark hover | Hover states |
+| `--surface-border` | light border | dark border | Borders |
+| `--text-color` | dark | light | Primary text |
+| `--text-color-secondary` | gray | light gray | Secondary text |
+
+**For status colors, use scales:**
+- Success: `--green-50` to `--green-900` (bg: 50/100, text: 500/600)
+- Warning: `--yellow-50` to `--yellow-900`
+- Error: `--red-50` to `--red-900`
+- Info: `--blue-50` to `--blue-900`
+
+## Color Variable Quick Reference
+
+### Backgrounds
+```css
+background: var(--surface-card);     /* Cards, modals, containers */
+background: var(--surface-ground);   /* Page background */
+background: var(--surface-hover);    /* Hover states */
+```
+
+### Text
+```css
+color: var(--text-color);            /* Primary text */
+color: var(--text-color-secondary);  /* Secondary/muted text */
+```
+
+### Borders
+```css
+border-color: var(--surface-border); /* Standard borders */
+```
+
+### Status Colors
+```css
+/* Success */
+background: var(--green-50);         /* Light success bg */
+color: var(--green-600);             /* Success text */
+
+/* Warning */
+background: var(--yellow-50);        /* Light warning bg */
+color: var(--yellow-700);            /* Warning text */
+
+/* Error */
+background: var(--red-50);           /* Light error bg */
+color: var(--red-600);               /* Error text */
+```
+
 ## Shared Styles to Import
 - Login: `@import 'shared/frontend/styles/login.css'`
 - Header: `@import 'shared/frontend/styles/layout/header.css'`
@@ -23,4 +77,6 @@ paths: src/modules/**/*.{vue,css}
 - Use `:deep()` for PrimeVue overrides (use `vendor/` files)
 - Duplicate patterns that exist in CSS_PATTERNS.md
 - Use hardcoded colors like `#2563eb` (use `var(--color-primary)`)
+- Use hardcoded backgrounds like `#ffffff` or `white` (use `var(--surface-card)`)
 - Create scoped CSS for patterns that already exist in shared files
+- Forget dark mode - always test with `prefers-color-scheme: dark`