docs: add mandatory rule - all color changes via frontend/colors.mjs only

Enforce single source of truth for all future color work:
- All DESIGN.md color changes → frontend/colors.mjs exclusively
- No direct edits to tailwind.config.ts or globals.css
- Build script auto-syncs all systems
- Added mandatory rule sections to:
  - CLAUDE.md (entry point for all AI agents)
  - DESIGN_COLOR_RULES.md (enforcement details)

Prevents:
- Color duplication across files
- Sync inconsistencies
- Manual CSS variable maintenance

References COLOR_SYSTEM_ARCHITECTURE.md for implementation.

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

CLAUDE.md

@@ -31,6 +31,41 @@ DO NOT, EVER, USE "uppercase" or "toUpper" in any UI/UX context, nowhere. This S
 
 See `DESIGN_COLOR_RULES.md` for complete color mapping and examples.
 
+## 🔒 MANDATORY: All Color Changes → `frontend/colors.mjs` ONLY
+
+**SINGLE SOURCE OF TRUTH RULE:**
+When implementing any color changes from DESIGN.md (new colors, updates, or variants):
+
+1. **Edit ONLY:** `frontend/colors.mjs` (the authoritative source)
+2. **DO NOT edit:** `tailwind.config.ts` (auto-imports from colors.mjs)
+3. **DO NOT edit:** `frontend/app/globals.css` (auto-generated from colors.mjs)
+4. **Run:** `npm run build` (auto-syncs all systems)
+
+**Why:**
+- Single source of truth eliminates duplication
+- Build script auto-generates CSS variables
+- No manual sync needed
+- Zero risk of color inconsistency
+
+**Violation Examples (DO NOT DO):**
+- ❌ Editing hex values in `tailwind.config.ts` directly
+- ❌ Adding CSS variables to `globals.css` manually
+- ❌ Updating colors in multiple files
+
+**Correct Workflow:**
+```javascript
+// ✅ CORRECT: Update colors.mjs ONLY
+// frontend/colors.mjs
+export const colors = {
+  primary: {
+    DEFAULT: "#ffb781",  // ← Update here
+  },
+};
+// Then: npm run build (everything auto-syncs)
+```
+
+**Reference:** See `COLOR_SYSTEM_ARCHITECTURE.md` for implementation details.
+
 ## Project-Specific Guidelines
 
 - Use TypeScript strict mode