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/tests/components/ManualCropUI.test.tsx

@@ -165,7 +165,7 @@ describe('ManualCropUI Component', () => {
         />
       );
 
-      const overlays = container.querySelectorAll('div[class*="bg-black"]');
+      const overlays = container.querySelectorAll('div[class*="bg-surface-container-lowest"]');
       expect(overlays.length).toBeGreaterThan(0);
     });
 
@@ -195,7 +195,7 @@ describe('ManualCropUI Component', () => {
         />
       );
 
-      const overlays = container.querySelectorAll('div[class*="bg-black/40"]');
+      const overlays = container.querySelectorAll('div[class*="bg-surface-container-lowest/40"]');
       expect(overlays.length).toBe(0);
     });
   });

frontend/tests/components/PhotoModal.test.tsx

@@ -63,7 +63,7 @@ describe('PhotoModal', () => {
 
       // Check for rose-colored X icon
       const xIcon = closeButton.querySelector('svg');
-      expect(xIcon).toHaveClass('text-rose-500');
+      expect(xIcon).toHaveClass('text-error');
     });
   });