complete story 12.6

docs/prd.md

@@ -83,7 +83,7 @@ Libra Law Firm requires a professional, bilingual (Arabic/English) web platform
 - Highly professional aesthetic
 - Detail-oriented with polished elements
 - Clean lines and sophisticated typography
-- Color palette: Charcoal with Warm Gray accents (see docs/brand.md)
+- Color palette: Dark Forest Green with Warm Gold accents (see docs/brand.md)
 - Libra scales logo prominently displayed
 - Elegant, refined visual elements
 - Easy navigation despite sophistication
@@ -462,7 +462,7 @@ Central control panel for lawyer to manage all platform operations
 - Responsive design for tablet use
 - Arabic-first with English toggle
 - Clear visual hierarchy
-- Charcoal and Warm Gray color scheme (see docs/brand.md)
+- Dark Forest Green and Warm Gold color scheme (see docs/brand.md)
 
 ---
 
@@ -511,7 +511,7 @@ Central control panel for lawyer to manage all platform operations
 - Clear status indicators
 - Mobile-friendly
 - Consistent with main site design
-- Charcoal and Warm Gray color scheme (see docs/brand.md)
+- Dark Forest Green and Warm Gold color scheme (see docs/brand.md)
 
 ---
 
@@ -550,21 +550,30 @@ Central control panel for lawyer to manage all platform operations
 
 #### A. Color Palette
 
-> **Note:** The color palette was updated in Epic 10 (Brand Color Refresh).
+> **Note:** The color palette was updated in Epic 12 (Dark Charcoal & Warm Gold refresh).
 > See `docs/brand.md` for complete and current brand guidelines.
 
 **Primary Colors:**
-- **Charcoal:** #4A4A42
-  - Usage: Primary brand color, buttons, links, headings
+- **Dark Forest Green:** #2D3624
+  - Usage: Header/Footer backgrounds
   - Creates professional, grounded atmosphere
 
-- **Warm Gray:** #C9C4BA
-  - Usage: Accent elements, secondary buttons, borders, dividers
+- **Warm Gold:** #A68966
+  - Usage: CTA buttons, links, accents
   - Represents sophistication, balance, legal authority
 
+- **Forest Green:** #2D322A
+  - Usage: Headings, body text
+  - Creates refined, professional tone
+
 **Supporting Colors:**
-- **Off-White:** #E8E4DC (backgrounds, card backgrounds, hover states)
-- **Deep Black:** #1A1A1A (text, footer, high-contrast elements)
+- **Warm Cream:** #F4F1EA (main page background)
+- **Pure White:** #FFFFFF (card backgrounds)
+- **Olive Green:** #4A5D23 (active states)
+- **Primary Light:** #3D4634 (primary hover states)
+- **Gold Hover:** #8A7555 (button hover states)
+- **Gold Light:** #C4A882 (light accents)
+- **Deep Black:** #1A1A1A (logo artwork, headlines)
 - **Success Green:** #27AE60 (approved status, success messages)
 - **Warning Red:** #E74C3C (rejected status, error messages)
 - **Pending Yellow:** #F39C12 (pending status indicators)
@@ -589,8 +598,8 @@ Central control panel for lawyer to manage all platform operations
 - Clear space: Minimum 20px padding on all sides
 - Acceptable formats: SVG (primary), PNG (fallback)
 - Color variations:
-  - Charcoal on Off-White - primary use
-  - Off-White on Charcoal - for dark sections
+  - Forest Green on Warm Cream - primary use
+  - Warm Cream on Dark Forest Green - for dark sections
   - Monochrome Deep Black - for special applications
 
 #### C. Typography
@@ -616,38 +625,38 @@ Central control panel for lawyer to manage all platform operations
 #### D. Visual Elements
 
 **Accent Usage:**
-- Primary action buttons (solid Charcoal background)
-- Secondary buttons (Warm Gray outline)
-- Links and hover states
+- Primary action buttons (solid Warm Gold background)
+- Secondary buttons (Dark Forest Green outline)
+- Links and hover states (Warm Gold)
 - Decorative dividers between sections
 - Icon highlights
-- Active state indicators
+- Active state indicators (Olive Green)
 - Border highlights on cards
 
 **Cards & Containers:**
 - Subtle box-shadow: 0 2px 8px rgba(0,0,0,0.1)
 - Border-radius: 8px for consistency
-- Card backgrounds: Off-White (#E8E4DC) on page background
+- Card backgrounds: Pure White (#FFFFFF) on Warm Cream page background
 - Padding: 24px standard internal padding
 
 **Icons:**
 - Style: Line-based, minimalist (e.g., Feather Icons or Bootstrap Icons)
-- Color: Charcoal for primary actions, Warm Gray for secondary
+- Color: Forest Green for primary actions, Warm Gold for accents
 - Size: 24px standard, 32px for featured icons
 
 **Buttons:**
 - **Primary Button:**
-  - Background: Charcoal (#4A4A42)
-  - Text: Off-White (#E8E4DC)
-  - Hover: Deep Black (#1A1A1A)
+  - Background: Warm Gold (#A68966)
+  - Text: Pure White (#FFFFFF)
+  - Hover: Gold Hover (#8A7555)
   - Border-radius: 6px
   - Padding: 12px 24px
 
 - **Secondary Button:**
   - Background: Transparent
-  - Border: 2px solid Warm Gray (#C9C4BA)
-  - Text: Charcoal (#4A4A42)
-  - Hover: Warm Gray background with Charcoal text
+  - Border: 2px solid Dark Forest Green (#2D3624)
+  - Text: Forest Green (#2D322A)
+  - Hover: Primary Light (#3D4634) background with white text
 
 - **Disabled State:**
   - Background: #CCCCCC
@@ -655,7 +664,7 @@ Central control panel for lawyer to manage all platform operations
   - No hover effect
 
 **Background Patterns (Optional):**
-- Subtle texture or geometric pattern on Off-White backgrounds
+- Subtle texture or geometric pattern on Warm Cream backgrounds
 - Very low opacity (5-10%) to add depth without distraction
 - Botanical/wheat motif integrated subtly if desired
 
@@ -737,13 +746,13 @@ All emails in both Arabic and English based on user preference:
 3. **Guest Booking Rejected** - With reason (if provided)
 
 ### 8.3 Email Requirements
-- Professional email templates matching brand design (Charcoal & Warm Gray)
+- Professional email templates matching brand design (Dark Forest Green & Warm Gold)
 - Mobile-responsive email layout
 - Plain text fallback
 - Clear subject lines (bilingual based on user preference)
 - Logo and branding elements in header
 - Consistent typography and spacing
-- Call-to-action buttons (Charcoal) where applicable
+- Call-to-action buttons (Warm Gold) where applicable
 - Footer with firm contact information
 
 ---
@@ -908,7 +917,7 @@ All emails in both Arabic and English based on user preference:
 
 ### Phase 7: Design & Branding (Week 5-6)
 - Logo integration and brand identity implementation
-- Professional design implementation (Charcoal & Warm Gray palette)
+- Professional design implementation (Dark Forest Green & Warm Gold palette)
 - UI/UX refinement
 - Responsive design testing
 - RTL/LTR layout perfection
@@ -945,7 +954,7 @@ All emails in both Arabic and English based on user preference:
 - Exports generate correctly (CSV, PDF)
 
 ### 13.2 Design Success
-- Professional, polished appearance with Charcoal and Warm Gray branding
+- Professional, polished appearance with Dark Forest Green and Warm Gold branding
 - Logo properly integrated throughout
 - Easy to use for non-technical users
 - Positive feedback from lawyer/admin