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

@@ -69,7 +69,7 @@ export default function ManualCropUI({
     return (
       <div className="flex items-center justify-center p-8 bg-surface-container rounded-none">
         <div className="text-center">
-          <p className="text-rose-500">{error}</p>
+          <p className="text-error">{error}</p>
         </div>
       </div>
     );
@@ -219,7 +219,7 @@ export default function ManualCropUI({
           <div className="absolute inset-0 pointer-events-none">
             {/* Top overlay */}
             <div
-              className="absolute left-0 right-0 bg-black/40"
+              className="absolute left-0 right-0 bg-surface-container-lowest/40"
               style={{
                 top: 0,
                 height: `${crop.y * scale}px`,
@@ -227,7 +227,7 @@ export default function ManualCropUI({
             />
             {/* Bottom overlay */}
             <div
-              className="absolute left-0 right-0 bg-black/40"
+              className="absolute left-0 right-0 bg-surface-container-lowest/40"
               style={{
                 top: `${(crop.y + crop.height) * scale}px`,
                 bottom: 0,
@@ -235,7 +235,7 @@ export default function ManualCropUI({
             />
             {/* Left overlay */}
             <div
-              className="absolute top-0 bottom-0 bg-black/40"
+              className="absolute top-0 bottom-0 bg-surface-container-lowest/40"
               style={{
                 left: 0,
                 width: `${crop.x * scale}px`,
@@ -245,7 +245,7 @@ export default function ManualCropUI({
             />
             {/* Right overlay */}
             <div
-              className="absolute top-0 bottom-0 bg-black/40"
+              className="absolute top-0 bottom-0 bg-surface-container-lowest/40"
               style={{
                 left: `${(crop.x + crop.width) * scale}px`,
                 right: 0,