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

@@ -22,7 +22,7 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
         </div>
         <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={24} />
         </button>
@@ -40,7 +40,7 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
               <div className="flex-1 min-w-0">
                 <div className="flex items-center gap-2 mb-1">
                   <p className={`text-xs font-normal ${
-                    log.action.includes('CHECK_IN') ? "text-green-500" : (log.action.includes('TRASH') ? "text-rose-500" : "text-amber-500")
+                    log.action.includes('CHECK_IN') ? "text-tertiary" : (log.action.includes('TRASH') ? "text-error" : "text-primary")
                   }`}>
                     {log.action}
                   </p>
@@ -58,7 +58,7 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
                       {new Date(log.timestamp).toLocaleString()}
                     </p>
                     {log.details && (
-                      <span className="text-xs bg-black text-muted px-2 py-0.5 border border-border font-mono">
+                      <span className="text-xs bg-surface-container-lowest text-muted px-2 py-0.5 border border-border font-mono">
                         {log.details}
                       </span>
                     )}
@@ -67,7 +67,7 @@ export default function LogsOverlay({ show, onClose, logs, inventory }: LogsOver
               </div>
               <div className="text-right">
                 <p className={`text-lg font-normal ${
-                  log.quantity_change > 0 ? "text-green-400" : "text-rose-400"
+                  log.quantity_change > 0 ? "text-tertiary" : "text-error"
                 }`}>
                   {log.quantity_change > 0 ? '+' : ''}{log.quantity_change}
                 </p>