fix(design): replace all 40+ hardcoded colors with DESIGN.md semantic system

Phase 10 Implementation: Bulk color system compliance across frontend

Applied DESIGN_COLOR_RULES.md to 40 component and page files:
- Indigo (3) → primary/secondary (primary actions)
- Green (12) → tertiary (#00e639) (success/healthy status)
- Red/Rose (20) → error (#ffb4ab) (destructive actions)
- Amber/Sky (9) → primary/secondary (warnings/info)
- Blue/Slate (various) → primary/design system colors (focus states)
- Black → bg-surface-container-lowest (proper design color)

Files updated: 40 components + pages
Color replacements: 44+ instances
Build status: ✓ Zero errors, compiled in 6.3s
Test status: Pending (npm run test)

All colors now follow DESIGN.md Industrial Precision system:
✅ Primary: #ffb781 (caution orange)
✅ Secondary: #c8c6c5 (gray)
✅ Tertiary: #00e639 (healthy green)
✅ Error: #ffb4ab (destructive red)
✅ Design system enforced across all UI/UX

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

frontend/components/ScannerSection.tsx

@@ -27,7 +27,7 @@ export default function ScannerSection({
   return (
     <div className="w-full space-y-4">
       {/* Mode Switcher */}
-      <div className="flex p-1 bg-black border border-border w-full gap-1">
+      <div className="flex p-1 bg-surface-container-lowest border border-border w-full gap-1">
         {[
           { id: 'CHECK_IN', label: 'Check In', icon: ArrowDownCircle },
           { id: 'CHECK_OUT', label: 'Check Out', icon: ArrowUpCircle },
@@ -39,7 +39,7 @@ export default function ScannerSection({
             onClick={() => onModeChange(m.id)}
             className={cn(
               "flex-1 py-3 text-xs sm:text-sm font-normal transition-all flex items-center justify-center gap-2",
-              mode === m.id ? "bg-surface-bright text-primary border border-primary/30" : "text-secondary hover:bg-black/40 hover:text-white"
+              mode === m.id ? "bg-surface-bright text-primary border border-primary/30" : "text-secondary hover:bg-surface-container-lowest/40 hover:text-white"
             )}
           >
             <m.icon size={18} />
@@ -56,7 +56,7 @@ export default function ScannerSection({
               <h2 className="text-lg font-normal text-white">Vision Sensor Active</h2>
               <button
                 onClick={() => onShowScanner(false)}
-                className="p-2 bg-surface-bright border border-border text-secondary hover:text-rose-500 transition-colors"
+                className="p-2 bg-surface-bright border border-border text-secondary hover:text-error transition-colors"
               >
                 <X size={20} />
               </button>