🎨 Apply warm cream/amber design system

src/components/Attachments.tsx

@@ -288,7 +288,7 @@ export function Attachments({ itemId, userDid, legacyDid, canEdit }: Attachments
           <button
             onClick={handleCameraCapture}
             disabled={isUploading}
-            className="flex items-center justify-center gap-2 flex-1 px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg text-sm transition-colors disabled:opacity-50"
+            className="flex items-center justify-center gap-2 flex-1 px-3 py-2 bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-400 hover:to-orange-400 text-white rounded-lg text-sm transition-all disabled:opacity-50"
           >
             {isUploading ? (
               <>

src/components/CalendarView.tsx

@@ -192,7 +192,7 @@ export function CalendarView({ listId, onItemClick }: CalendarViewProps) {
                         ? "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400"
                         : item.priority === "medium"
                         ? "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400"
-                        : "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400"
+                        : "bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-400"
                     }`}
                   >
                     {item.name}

src/components/ChangeCategoryDialog.tsx

@@ -73,7 +73,7 @@ export function ChangeCategoryDialog({
             type="button"
             onClick={handleSave}
             disabled={saving}
-            className="px-4 py-2 text-sm text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+            className="px-4 py-2 text-sm text-white bg-gradient-to-r from-amber-600 to-orange-500 rounded-lg hover:from-amber-500 hover:to-orange-400 disabled:opacity-50 transition-all"
           >
             {saving ? "Saving..." : "Save"}
           </button>

src/components/ConfirmDialog.tsx

@@ -47,7 +47,7 @@ export function ConfirmDialog({
   const confirmButtonClasses =
     confirmVariant === "danger"
       ? "bg-red-600 text-white hover:bg-red-700"
-      : "bg-blue-600 text-white hover:bg-blue-700";
+      : "bg-gradient-to-r from-amber-600 to-orange-500 text-white hover:from-amber-500 hover:to-orange-400 transition-all";
 
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">

src/components/ErrorBoundary.tsx

@@ -39,7 +39,7 @@ export class ErrorBoundary extends Component<Props, State> {
             <div className="flex gap-2 justify-center">
               <button
                 onClick={() => window.location.reload()}
-                className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+                className="bg-gradient-to-r from-amber-500 to-orange-500 text-white px-4 py-2 rounded hover:from-amber-400 hover:to-orange-400 transition-all"
               >
                 Reload Page
               </button>

src/components/ItemDetailsModal.tsx

@@ -30,7 +30,7 @@ type Priority = "high" | "medium" | "low" | "";
 const PRIORITY_COLORS = {
   high: "bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 border-red-300 dark:border-red-700",
   medium: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 border-yellow-300 dark:border-yellow-700",
-  low: "bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 border-blue-300 dark:border-blue-700",
+  low: "bg-amber-100 dark:bg-amber-900/30 text-amber-800 dark:text-amber-400 border-amber-300 dark:border-amber-700",
 };
 
 export function ItemDetailsModal({

src/components/ListItem.tsx

@@ -204,7 +204,7 @@ export const ListItem = memo(function ListItem({
           : ""
       } ${
         isFocused && !isSelected
-          ? "bg-blue-50 dark:bg-blue-900/20 ring-2 ring-blue-400 dark:ring-blue-600"
+          ? "bg-amber-50 dark:bg-amber-900/20 ring-2 ring-amber-300 dark:ring-amber-700"
           : ""
       } ${
         isSelectMode
@@ -330,7 +330,7 @@ export const ListItem = memo(function ListItem({
               className={`flex-shrink-0 w-2 h-2 rounded-full ${
                 item.priority === "high" ? "bg-red-500" :
                 item.priority === "medium" ? "bg-yellow-500" :
-                "bg-blue-500"
+                "bg-amber-500"
               }`}
               role="img"
               aria-label={`${item.priority} priority`}
@@ -347,7 +347,7 @@ export const ListItem = memo(function ListItem({
           </p>
           {/* Indicators for extras */}
           {item.url && (
-            <span className="text-blue-500 flex-shrink-0 inline-flex items-center text-xs leading-none" role="img" aria-label="Has link">
+            <span className="text-amber-600 flex-shrink-0 inline-flex items-center text-xs leading-none" role="img" aria-label="Has link">
               🔗
               <span className="sr-only">Link attached</span>
             </span>

src/components/ProvenanceInfo.tsx

@@ -229,8 +229,8 @@ function AnchorStatusBadge({ status }: { status: "pending" | "inscribed" | "conf
       label: "Pending",
     },
     inscribed: {
-      bg: "bg-blue-100 dark:bg-blue-900/30",
-      text: "text-blue-700 dark:text-blue-400",
+      bg: "bg-amber-100 dark:bg-amber-900/30",
+      text: "text-amber-800 dark:text-amber-400",
       icon: "📝",
       label: "Inscribed",
     },

src/components/TemplatePickerModal.tsx

@@ -241,7 +241,7 @@ export function TemplatePickerModal({ onClose, onCreateBlank }: TemplatePickerMo
                       <span className={`text-xs px-1.5 py-0.5 rounded ${
                         item.priority === 'high' ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' :
                         item.priority === 'medium' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' :
-                        'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+                        'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400'
                       }`}>
                         {item.priority}
                       </span>

src/index.css

@@ -9,6 +9,44 @@
   --safe-area-bottom: env(safe-area-inset-bottom, 0px);
   --safe-area-left: env(safe-area-inset-left, 0px);
   --safe-area-right: env(safe-area-inset-right, 0px);
+
+  /* Warm Cream/Amber Design System - 💩 Brand Colors */
+  /* Backgrounds - Cream tones */
+  --cream-50: #fffcf5;
+  --cream-100: #fef8ed;
+  --cream-200: #fcefd5;
+  --cream-300: #fae5bd;
+
+  /* Amber Accents - Primary interactive colors */
+  --amber-400: #fbbf24;
+  --amber-500: #f59e0b;
+  --amber-600: #d97706;
+  --amber-700: #b45309;
+  --amber-800: #92400e;
+  --amber-900: #78350f;
+
+  /* Warm Neutrals - Replacing grays */
+  --warm-50: #fafaf9;
+  --warm-100: #f5f5f4;
+  --warm-200: #e7e5e4;
+  --warm-300: #d6d3d1;
+  --warm-400: #a8a29e;
+  --warm-500: #78716c;
+  --warm-600: #57534e;
+  --warm-700: #44403c;
+  --warm-800: #292524;
+  --warm-900: #1c1917;
+
+  /* Semantic colors using warm palette */
+  --bg-primary: var(--cream-50);
+  --bg-secondary: var(--cream-100);
+  --bg-tertiary: var(--cream-200);
+  --text-primary: var(--warm-900);
+  --text-secondary: var(--warm-700);
+  --text-tertiary: var(--warm-600);
+  --border-color: var(--cream-300);
+  --accent-primary: var(--amber-600);
+  --accent-hover: var(--amber-500);
 }
 
 /* Apply to the main layout */

src/pages/JoinList.tsx

@@ -43,9 +43,9 @@ export function JoinList() {
   // Show login if not authenticated (but don't unmount during loading to preserve OTP state)
   if (!isAuthenticated) {
     return (
-      <div className="min-h-screen bg-gray-50">
+      <div className="min-h-screen bg-amber-50">
         <Login embedded />
-        <div className="text-center text-gray-500 -mt-4 pb-8">
+        <div className="text-center text-amber-700 -mt-4 pb-8">
           Sign in to join this list.
         </div>
       </div>
@@ -56,19 +56,19 @@ export function JoinList() {
   if (isUserLoading || validation === undefined) {
     return (
       <div className="text-center py-12">
-        <div className="text-gray-500">Validating invite...</div>
+        <div className="text-amber-700">Validating invite...</div>
       </div>
     );
   }
 
   // Invalid invite
   if (!validation.valid) {
     return (
-      <div className="max-w-md mx-auto text-center py-12 bg-white rounded-lg shadow p-6">
+      <div className="max-w-md mx-auto text-center py-12 bg-cream-50 rounded-lg shadow p-6">
         <div className="text-red-500 text-5xl mb-4">:(</div>
-        <h2 className="text-xl font-semibold text-gray-900 mb-2">Invalid Invite</h2>
-        <p className="text-gray-500 mb-4">{validation.error}</p>
-        <Link to="/" className="text-blue-600 hover:text-blue-700">
+        <h2 className="text-xl font-semibold text-amber-900 mb-2">Invalid Invite</h2>
+        <p className="text-amber-700 mb-4">{validation.error}</p>
+        <Link to="/" className="text-amber-600 hover:text-amber-700 font-medium">
           Go to your lists
         </Link>
       </div>
@@ -100,17 +100,17 @@ export function JoinList() {
   };
 
   return (
-    <div className="max-w-md mx-auto text-center py-12 bg-white rounded-lg shadow p-6">
+    <div className="max-w-md mx-auto text-center py-12 bg-cream-50 rounded-lg shadow-lg shadow-amber-200/50 p-6">
       {/* Debug: Show DID being used */}
-      <div className="mb-4 p-2 bg-gray-100 rounded text-xs font-mono text-left">
+      <div className="mb-4 p-2 bg-amber-50 rounded text-xs font-mono text-left">
         <div>Your DID: {did ?? "null"}</div>
       </div>
 
       <div className="text-5xl mb-4">+</div>
-      <h2 className="text-xl font-semibold text-gray-900 mb-2">
+      <h2 className="text-xl font-semibold text-amber-900 mb-2">
         You're invited to join "{validation.listName}"
       </h2>
-      <p className="text-gray-500 mb-6">
+      <p className="text-amber-700 mb-6">
         Accept this invite to start collaborating on the list.
       </p>
 
@@ -121,14 +121,14 @@ export function JoinList() {
       <div className="flex gap-3 justify-center">
         <Link
           to="/"
-          className="px-4 py-2 text-gray-700 bg-gray-100 rounded-md font-medium hover:bg-gray-200"
+          className="px-4 py-2 text-amber-800 bg-amber-100 rounded-md font-medium hover:bg-amber-200"
         >
           Cancel
         </Link>
         <button
           onClick={handleJoin}
           disabled={isJoining}
-          className="px-6 py-2 bg-blue-600 text-white rounded-md font-medium hover:bg-blue-700 disabled:opacity-50"
+          className="px-6 py-2 bg-gradient-to-r from-amber-600 to-orange-500 text-white rounded-md font-medium hover:from-amber-500 hover:to-orange-400 disabled:opacity-50 transition-all"
         >
           {isJoining ? "Joining..." : "Join List"}
         </button>

src/pages/ListView.tsx

@@ -857,7 +857,7 @@ export function ListView() {
                   {/* Aisle section header — highlights when dragging over */}
                   <div className={`flex items-center gap-2 px-3 py-2 rounded-t-xl border-b transition-colors duration-150 ${
                     dragOverAisleId === aisle.id && groceryTouchDrag.state.draggedId
-                      ? "bg-gradient-to-r from-blue-100 to-indigo-100 dark:from-blue-900/40 dark:to-indigo-900/40 border-blue-300 dark:border-blue-600 ring-2 ring-blue-300 dark:ring-blue-600"
+                      ? "bg-gradient-to-r from-amber-100 to-orange-100 dark:from-amber-900/40 dark:to-orange-900/40 border-amber-400 dark:border-amber-600 ring-2 ring-amber-400 dark:ring-amber-600"
                       : "bg-gradient-to-r from-amber-50 to-orange-50 dark:from-gray-700 dark:to-gray-750 border-amber-100 dark:border-gray-600"
                   }`}>
                     <span className="text-lg">{aisle.emoji}</span>
@@ -944,7 +944,7 @@ export function ListView() {
                             setShowAddAisle(false);
                           }
                         }}
-                        className="text-sm font-medium text-blue-600 dark:text-blue-400 px-2 py-1"
+                        className="text-sm font-medium text-amber-700 dark:text-amber-400 px-2 py-1 hover:text-amber-800 dark:hover:text-amber-300"
                       >
                         Add
                       </button>

src/pages/Profile.tsx

@@ -141,20 +141,20 @@ export function Profile() {
               </p>
             </div>
 
-            <div className="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-4 text-center">
-              <p className="text-3xl font-bold text-blue-600 dark:text-blue-400">
+            <div className="bg-orange-50 dark:bg-orange-900/20 rounded-xl p-4 text-center">
+              <p className="text-3xl font-bold text-orange-600 dark:text-orange-400">
                 {completedItems}
               </p>
-              <p className="text-sm text-blue-700 dark:text-blue-300 mt-1">
+              <p className="text-sm text-orange-700 dark:text-orange-300 mt-1">
                 Items Done
               </p>
             </div>
 
-            <div className="bg-purple-50 dark:bg-purple-900/20 rounded-xl p-4 text-center">
-              <p className="text-3xl font-bold text-purple-600 dark:text-purple-400">
+            <div className="bg-amber-50 dark:bg-amber-900/20 rounded-xl p-4 text-center border border-amber-200 dark:border-amber-800">
+              <p className="text-3xl font-bold text-amber-700 dark:text-amber-400">
                 {completionRate}%
               </p>
-              <p className="text-sm text-purple-700 dark:text-purple-300 mt-1">
+              <p className="text-sm text-amber-800 dark:text-amber-300 mt-1">
                 Completion Rate
               </p>
             </div>
@@ -224,9 +224,9 @@ export function Profile() {
 
         {completionRate < 80 && completionRate >= 50 && (
           <div className="px-6 pb-6">
-            <div className="bg-gradient-to-r from-blue-100 to-indigo-100 dark:from-blue-900/30 dark:to-indigo-900/30 rounded-xl p-4 text-center">
+            <div className="bg-gradient-to-r from-amber-100 to-orange-100 dark:from-amber-900/30 dark:to-orange-900/30 rounded-xl p-4 text-center">
               <p className="text-2xl mb-2">💪</p>
-              <p className="font-medium text-blue-800 dark:text-blue-200">
+              <p className="font-medium text-amber-800 dark:text-amber-200">
                 Great progress! Keep up the momentum!
               </p>
             </div>
@@ -235,9 +235,9 @@ export function Profile() {
 
         {completionRate < 50 && totalItems > 0 && (
           <div className="px-6 pb-6">
-            <div className="bg-gradient-to-r from-purple-100 to-pink-100 dark:from-purple-900/30 dark:to-pink-900/30 rounded-xl p-4 text-center">
+            <div className="bg-gradient-to-r from-orange-100 to-amber-100 dark:from-orange-900/30 dark:to-amber-900/30 rounded-xl p-4 text-center">
               <p className="text-2xl mb-2">🚀</p>
-              <p className="font-medium text-purple-800 dark:text-purple-200">
+              <p className="font-medium text-orange-800 dark:text-orange-200">
                 You've got this! Every item counts!
               </p>
             </div>