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

@@ -54,12 +54,12 @@ export default function ConfirmationModal({
   };
 
   return (
-    <div data-testid="confirmation-modal" className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+    <div data-testid="confirmation-modal" className="fixed inset-0 z-50 flex items-center justify-center bg-surface-container-lowest/40">
       <div className="bg-surface border border-border shadow-none max-w-sm w-full mx-4">
         {/* Header */}
         <div className="flex items-center justify-between p-6 border-b border-border">
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-rose-500/10 text-rose-500">
+            <div className="p-2 bg-error/10 text-error">
               <AlertTriangle size={20} />
             </div>
             <h2 className="text-lg font-normal text-white">{title}</h2>
@@ -81,7 +81,7 @@ export default function ConfirmationModal({
 
           {/* Item Name (if provided) */}
           {itemName && (
-            <div className="bg-black/40 border border-border p-3">
+            <div className="bg-surface-container-lowest/40 border border-border p-3">
               <p className="text-xs text-muted font-normal">Item</p>
               <p className="text-sm font-mono text-white mt-1">{itemName}</p>
             </div>
@@ -89,9 +89,9 @@ export default function ConfirmationModal({
 
           {/* Consequence Warning */}
           {consequence && (
-            <div className="flex gap-2 p-3 bg-rose-500/5 border border-rose-500/20">
-              <span className="text-rose-500 flex-shrink-0">⚠</span>
-              <p className="text-sm text-rose-400">{consequence}</p>
+            <div className="flex gap-2 p-3 bg-error/5 border border-error/20">
+              <span className="text-error flex-shrink-0">⚠</span>
+              <p className="text-sm text-error">{consequence}</p>
             </div>
           )}
 
@@ -107,7 +107,7 @@ export default function ConfirmationModal({
           {/* High-Risk Warning & Confirmation Input */}
           {requiresTextConfirm && (
             <div className="space-y-3 pt-2 border-t border-border">
-              <p className="text-sm font-normal text-rose-400">
+              <p className="text-sm font-normal text-error">
                 Type "Delete" to confirm this high-risk action
               </p>
               <input
@@ -127,7 +127,7 @@ export default function ConfirmationModal({
                 }}
               />
               {error && (
-                <p className="text-xs text-rose-500">{error}</p>
+                <p className="text-xs text-error">{error}</p>
               )}
             </div>
           )}
@@ -146,7 +146,7 @@ export default function ConfirmationModal({
             onClick={handleConfirm}
             data-testid="confirm-action"
             disabled={loading || !canConfirm}
-            className="flex-1 px-4 py-2.5 bg-red-600 text-white font-normal hover:bg-red-700 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 focus:outline-none"
+            className="flex-1 px-4 py-2.5 bg-error text-white font-normal hover:hover:opacity-80 cursor-pointer transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 focus:outline-none"
           >
             {loading ? (
               <>