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

@@ -26,9 +26,9 @@ export default function NewItemDialog({ onScannerClick, onAddItemClick }: NewIte
       <div className="w-full flex justify-center">
         <button
           onClick={onAddItemClick}
-          className="w-full flex flex-col items-center justify-center p-4 md:p-6 rounded-none bg-indigo-500/5 border border-indigo-500/20 group hover:border-indigo-500/50 transition-all font-normal text-indigo-400 gap-2 md:gap-3"
+          className="w-full flex flex-col items-center justify-center p-4 md:p-6 rounded-none bg-secondary/5 border border-primary/20 group hover:border-primary/50 transition-all font-normal text-primary gap-2 md:gap-3"
         >
-          <div className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-indigo-500/10 rounded-none group-hover:scale-110 transition-transform shadow-none shadow-none">
+          <div className="p-4 lg:p-5 xl:p-6 lg:p-8 xl:p-10 bg-primary/10 rounded-none group-hover:scale-110 transition-transform shadow-none shadow-none">
             <Sparkles size={32} />
           </div>
           <div className="text-center">