fix: improve color contrast for accessibility compliance (#222)

- Changed text-gray-400 to text-gray-500 in Dashboard, StoreComparison,
  Purchases, Settings, Alerts, and Coupons pages
- text-gray-500 (#6b7280) has 4.6:1 contrast ratio on white, meeting WCAG AA
- text-gray-400 (#99a1af) only had 2.6:1, failing axe-core accessibility checks

Co-authored-by: Test User <test@example.com>
Co-authored-by: Paperclip <noreply@paperclip.ing>

src/pages/Alerts.tsx

@@ -126,7 +126,7 @@ function AlertCard({
           </Link>
           <div className="mt-1 flex items-center gap-2">
             <span className="text-xs text-gray-500">Target: ${alert.targetPrice.toFixed(2)}</span>
-            <span className="text-xs text-gray-400">&middot;</span>
+            <span className="text-xs text-gray-500">&middot;</span>
             <span className={`text-xs font-medium ${isBelow ? 'text-green-700' : 'text-gray-500'}`}>
               Now: ${alert.currentPrice.toFixed(2)}
             </span>
@@ -145,7 +145,7 @@ function AlertCard({
           )}
           <button
             onClick={() => onDelete(alert.id)}
-            className="min-h-12 min-w-12 rounded-lg p-2 text-gray-400 active:bg-gray-100"
+            className="min-h-12 min-w-12 rounded-lg p-2 text-gray-500 active:bg-gray-100"
             aria-label="Delete alert"
           >
             <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>

src/pages/Coupons.tsx

@@ -62,7 +62,7 @@ export function Coupons() {
                   <p className="mt-0.5 text-xs text-gray-500">{coupon.storeName}</p>
                   <p
                     className={`mt-1 text-xs ${
-                      expiringSoon ? 'font-medium text-orange-600' : 'text-gray-400'
+                      expiringSoon ? 'font-medium text-orange-600' : 'text-gray-500'
                     }`}
                   >
                     Expires{' '}

src/pages/Purchases.tsx

@@ -97,7 +97,7 @@ export function Purchases() {
               </div>
 
               {/* Item preview */}
-              <p className="mt-2 truncate text-xs text-gray-400">
+              <p className="mt-2 truncate text-xs text-gray-500">
                 {purchase.items
                   .slice(0, 3)
                   .map((i) => i.name)

src/pages/Settings.tsx

@@ -153,7 +153,7 @@ export function Settings() {
               {copied ? 'Copied!' : 'Copy'}
             </button>
           </div>
-          <p className="mt-2 text-xs text-gray-400">
+          <p className="mt-2 text-xs text-gray-500">
             Supports Meijer, Kroger, and Target receipt emails.
           </p>
         </div>

src/pages/StoreComparison.tsx

@@ -89,7 +89,7 @@ export function StoreComparison() {
                 {pp.price === lowestPrice ? (
                   <span className="text-xs font-medium text-green-600">Best price</span>
                 ) : (
-                  <span className="text-xs text-gray-400">
+                  <span className="text-xs text-gray-500">
                     +${(pp.price - lowestPrice).toFixed(2)}
                   </span>
                 )}
@@ -99,7 +99,7 @@ export function StoreComparison() {
         ))}
       </div>
 
-      <p className="mt-6 text-center text-xs text-gray-400">
+      <p className="mt-6 text-center text-xs text-gray-500">
         Prices last verified from store loyalty card data. Map view coming soon.
       </p>
     </div>