Replace hex color codes with friendly color names for customers

- Add colorNames utility with 80+ standard color names
- Map hex codes to human-readable names (Black, Navy, Red, Teal, etc)
- Display color names in product page (with hex tooltip for reference)
- Show selected color name below color swatches
- Update shopping cart to display color names instead of hex codes
- Admin color picker shows both name and hex code for clarity

Improves UX for customers who don't understand hex color codes.
Keeps hex codes for internal data and system tooltips.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/components/StandardProductView.tsx

@@ -5,6 +5,7 @@ import { v4 as uuid } from 'uuid';
 import ProductMockup from './ProductMockup';
 import Price from './Price';
 import { useCart } from '@/lib/cartStore';
+import { getColorName } from '@/lib/colorNames';
 import type { ProductDTO } from '@/lib/types';
 
 export default function StandardProductView({ product }: { product: ProductDTO }) {
@@ -104,18 +105,26 @@ export default function StandardProductView({ product }: { product: ProductDTO }
 
         <div>
           <p className="tag-label mb-3">Color</p>
-          <div className="flex flex-wrap gap-3">
-            {product.colors.map((c) => (
-              <button
-                key={c}
-                onClick={() => setColor(c)}
-                aria-label={`Choose color ${c}`}
-                className={`h-9 w-9 rounded-full border transition-transform ${
-                  color === c ? 'scale-110 border-ink ring-2 ring-ink ring-offset-2 ring-offset-paper' : 'border-line'
-                }`}
-                style={{ backgroundColor: c }}
-              />
-            ))}
+          <div className="space-y-2">
+            <div className="flex flex-wrap gap-3">
+              {product.colors.map((c) => (
+                <button
+                  key={c}
+                  onClick={() => setColor(c)}
+                  aria-label={`Choose ${getColorName(c)} color`}
+                  className={`h-9 w-9 rounded-full border transition-transform ${
+                    color === c ? 'scale-110 border-ink ring-2 ring-ink ring-offset-2 ring-offset-paper' : 'border-line'
+                  }`}
+                  style={{ backgroundColor: c }}
+                  title={getColorName(c)}
+                />
+              ))}
+            </div>
+            {color && (
+              <p className="text-sm text-muted font-medium">
+                Selected: <span className="text-ink">{getColorName(color)}</span>
+              </p>
+            )}
           </div>
           {product.imageUrl && !product.photoRecolorable && Object.keys(product.colorPhotos).length === 0 && (
             <p className="mt-2 text-xs text-muted">