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

@@ -68,7 +68,7 @@ export default function ItemDetailModal({
   };
 
   return (
-    <div className="fixed inset-0 bg-black/90 flex items-center justify-center z-50 p-4 animate-in fade-in duration-300">
+    <div className="fixed inset-0 bg-surface-container-lowest/90 flex items-center justify-center z-50 p-4 animate-in fade-in duration-300">
       <div className="level-2 max-w-2xl w-full max-h-[90vh] overflow-y-auto flex flex-col shadow-none">
         {/* Header */}
         <div className="sticky top-0 bg-surface-bright border-b border-border p-4 md:p-6 flex items-center justify-between z-10">
@@ -80,7 +80,7 @@ export default function ItemDetailModal({
             {currentPhoto && (
               <button
                 onClick={() => setShowDebugPanel(true)}
-                className="p-3 bg-black border border-border text-primary hover:text-white transition-colors"
+                className="p-3 bg-surface-container-lowest border border-border text-primary hover:text-white transition-colors"
                 title="Debug rotation & crop"
               >
                 <Wrench size={20} />
@@ -88,7 +88,7 @@ export default function ItemDetailModal({
             )}
             <button
               onClick={onClose}
-              className="p-3 bg-black border border-border text-secondary hover:text-white transition-colors"
+              className="p-3 bg-surface-container-lowest border border-border text-secondary hover:text-white transition-colors"
             >
               <X size={20} />
             </button>
@@ -124,7 +124,7 @@ export default function ItemDetailModal({
               <>
                 {currentPhoto ? (
                   <div className="space-y-3">
-                    <div className="relative bg-black border border-border overflow-hidden aspect-video">
+                    <div className="relative bg-surface-container-lowest border border-border overflow-hidden aspect-video">
                       <img
                         src={buildPhotoUrl(backendUrl, currentPhoto.full_url)}
                         alt={item.name}
@@ -141,14 +141,14 @@ export default function ItemDetailModal({
                       <button
                         onClick={handleDeletePhoto}
                         disabled={isDeleting}
-                        className="px-4 py-3 bg-rose-500/10 border border-rose-500/30 text-rose-500 hover:bg-rose-500/20 disabled:opacity-50 transition-colors text-xs"
+                        className="px-4 py-3 bg-error/10 border border-error/30 text-error hover:bg-error/20 disabled:opacity-50 transition-colors text-xs"
                       >
                         <Trash2 size={16} />
                       </button>
                     </div>
                   </div>
                 ) : (
-                  <div className="bg-black border border-border p-12 text-center flex flex-col items-center gap-4">
+                  <div className="bg-surface-container-lowest border border-border p-12 text-center flex flex-col items-center gap-4">
                     <div className="w-16 h-16 bg-surface-container flex items-center justify-center text-muted border border-border">
                        <Camera size={32} />
                     </div>
@@ -163,7 +163,7 @@ export default function ItemDetailModal({
                 )}
               </>
             ) : (
-              <div ref={photoUploadRef} className="bg-black border border-border p-4 md:p-6 animate-in slide-in-from-top-2 duration-300">
+              <div ref={photoUploadRef} className="bg-surface-container-lowest border border-border p-4 md:p-6 animate-in slide-in-from-top-2 duration-300">
                 <div className="mb-4 flex items-center justify-between border-b border-border pb-3">
                   <h4 className="font-normal text-white text-sm">Signature Acquisition Protocol</h4>
                   <button
@@ -185,7 +185,7 @@ export default function ItemDetailModal({
           </div>
         </div>
 
-        <div className="p-4 bg-black border-t border-border flex justify-end">
+        <div className="p-4 bg-surface-container-lowest border-t border-border flex justify-end">
            <button 
              onClick={onClose}
              className="btn-secondary px-8 py-2 text-xs"