docs: comprehensive cleanup and restructuring of project documentation

CLAUDE.md

@@ -4,70 +4,26 @@ You are Claude, operating on the TFM aInventory project.
 
 **IMMEDIATE MANDATORY ACTION:**
 Before taking any action or writing code, you MUST read the following Single Source of Truth files:
-1. `AI_RULES.md` (Contains your operational constraints, Git rules, and UI fidelity laws).
-2. `PROJECT_ARCHITECTURE.md` (Contains the tech stack, data models, and system logic).
-3. `dev_docs/SESSION_STATE.md` (Contains the current handover status from the previous AI).
-4. `DESIGN_COLOR_RULES.md` (MANDATORY for ALL UI/UX work - No hardcoded Tailwind colors allowed).
+1. `AI_MANDATES.md` (Operational constraints, Git rules, Handover protocols).
+2. `DESIGN_SYSTEM.md` (UI/UX standards, Colors, Typography).
+3. `CODING_STANDARDS.md` (Engineering rules, Testing, Security).
+4. `ARCHITECTURE.md` (System logic, Data models, Offline sync).
+5. `dev_docs/SESSION_STATE.md` (Current handover status).
 
 **STRICT COMMUNICATION RULE:** 
-Be concise! Do not explain a thousand details unless they are absolutely necessary.
+Be concise! Focus on signal over noise.
 
-Do not proceed with any task until you have analyzed these three files.
+---
 
-DO NOT, EVER, USE "uppercase" or "toUpper" in any UI/UX context, nowhere. This SHOULD NOT be used in UI/UX anywhere, no text should be displayed in CAPITAL LETTERS! But do not replace "toUpper" with "toLower" or "uppercase" with "lowercase" either, leave text in UI/UX as is.
+## 🎨 CRITICAL DESIGN RULE
+**NO HARDCODED TAILWIND COLORS.**
+- All colors MUST come from `DESIGN_SYSTEM.md` (via `colors.mjs`).
+- **NO BOLD FONTS.** Hierarchy via size and color only.
+- **NO UPPERCASE.** Use Title/Sentence case.
 
-## 🎨 CRITICAL COLOR RULE FOR ALL UI/UX WORK
+## 🔒 COLOR SSOT
+All color changes MUST be made in `frontend/colors.mjs` ONLY.
+Run `npm run build` to sync CSS variables and Tailwind config.
 
-**NO HARDCODED TAILWIND COLORS ALLOWED** ❌
-- ❌ Never use `bg-green-500`, `text-red-600`, `border-blue-400`, etc.
-- ✅ Always use semantic colors from DESIGN.md: `bg-primary`, `text-tertiary`, `bg-error`
-- 📖 **MANDATORY READ:** `DESIGN_COLOR_RULES.md` before ANY frontend code
-
-**Semantic Color Mapping:**
-- ✅ Success/Healthy: `tertiary` (#00e639)
-- ❌ Error/Destructive: `error` (#ffb4ab)
-- ⚠️ Warning/Caution: `primary` (#ffb781)
-- ℹ️ Info/Secondary: `secondary` (#c8c6c5)
-
-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
-- All API endpoints must have tests
-- All UI colors MUST follow DESIGN.md (see DESIGN_COLOR_RULES.md)
+---
+**Status**: ACTIVE