diff --git a/docs/stories/epic-12-branding-refresh.md b/docs/stories/epic-12-branding-refresh.md
index 0ad6660..69c6330 100644
--- a/docs/stories/epic-12-branding-refresh.md
+++ b/docs/stories/epic-12-branding-refresh.md
@@ -2,13 +2,13 @@
 
 ## Epic Goal
 
-Update the LIBRA for Rights brand identity by implementing the new square logo with Palestinian tatreez patterns and transitioning the color scheme from charcoal/warm gray to an olive green palette that aligns with the new botanical logo design.
+Update the LIBRA for Rights brand identity by implementing the new square logo with Palestinian tatreez patterns and transitioning the color scheme to a refined dark charcoal and warm gold palette that creates an elegant, professional aesthetic.
 
 ## Epic Description
 
 ### Existing System Context
 
-- **Current relevant functionality:** The application uses a horizontal SVG logo (240×60px) in navbar and footer, with a color scheme based on Charcoal (#4A4A42) and Warm Gray (#C9C4BA)
+- **Current relevant functionality:** The application uses a square PNG logo in navbar and footer, with a color scheme that needs updating
 - **Technology stack:** Laravel 12, Livewire 3, Tailwind CSS 4, Flux UI components
 - **Integration points:** Logo appears in navbar, footer, emails, and favicon. Colors are defined in Tailwind config and used throughout Blade components.
 
@@ -16,64 +16,78 @@ Update the LIBRA for Rights brand identity by implementing the new square logo w
 
 **What's being added/changed:**
 
-1. Replace horizontal SVG logo with new square logo featuring Palestinian tatreez (embroidery) patterns
-2. Update color palette from charcoal/warm gray to olive green theme
-3. Adjust CSS/layouts to accommodate square logo dimensions
-4. Update all brand assets (favicon, mobile icons, email logo)
+1. Update color palette to dark charcoal and warm gold theme
+2. Adjust CSS for new color scheme
+3. Update all brand assets colors (emails, PDFs)
 
 **New Color Palette:**
 
-| Color | Old Hex | New Hex | Usage |
-|-------|---------|---------|-------|
-| Primary | #4A4A42 (Charcoal) | #8AB357 (Olive Green) | Primary backgrounds, accents |
-| Secondary | #C9C4BA (Warm Gray) | #A5C87A (Light Olive) | Secondary backgrounds, borders |
-| Background | #E8E4DC (Off-White) | #E8E4DC (Off-White) | Light backgrounds (unchanged) |
-| Text | #1A1A1A (Deep Black) | #1A1A1A (Deep Black) | Text, headings (unchanged) |
+| Color Name | Hex | Usage |
+|------------|-----|-------|
+| Primary (Dark Charcoal) | `#1B1D1A` | Header/Footer backgrounds |
+| CTA (Warm Gold) | `#A68966` | Buttons, links, accents |
+| Background (Warm Cream) | `#F4F1EA` | Main page background |
+| Text (Forest Green) | `#2D322A` | Headings, body text |
+| Card (Pure White) | `#FFFFFF` | Card backgrounds |
+| Active (Olive Green) | `#4A5D23` | Active states, language toggle |
+
+**Color Variants (for hover/active states):**
+
+| Variant | Hex | Usage |
+|---------|-----|-------|
+| Primary Light | `#2D322A` | Primary hover state |
+| CTA Hover | `#8A7555` | Button hover state |
+| CTA Light | `#C4A882` | Light accent |
+| Active Hover | `#5A7030` | Active state hover |
 
 **How it integrates:**
 
-- Logo files will be placed in `public/images/` replacing existing SVG files
 - Tailwind CSS color configuration will be updated
 - Existing Blade components will automatically use new colors via CSS variables
 
 **Success criteria:**
 
-- New square logo displays correctly in navbar and footer
-- Color scheme consistently uses olive green palette across all pages
-- All favicon and mobile app icons updated
+- Color scheme consistently uses new palette across all pages
+- Professional, elegant appearance maintained
 - No visual regressions in existing UI components
 
 ## Stories
 
 ### Story 12.1: Logo Asset Deployment and CSS Layout Updates
 **File:** `story-12.1-logo-asset-deployment.md`
+**Status:** ✅ Completed (no changes needed - logo already deployed)
 
 Deploy the new square logo files and update CSS to accommodate square dimensions in navbar, footer, and auth pages. Includes favicon and mobile app icon deployment.
 
-### Story 12.2: Core CSS Theme Update - Olive Green Palette
+### Story 12.2: Core CSS Theme Update - Dark Charcoal & Warm Gold Palette
 **File:** `story-12.2-core-css-theme-update.md`
+**Status:** 🔄 Needs Reimplementation
 
-Update Tailwind CSS theme variables from charcoal/warm gray to olive green palette. Add color variants for hover, active, and light states. Maintain backward compatibility aliases.
+Update Tailwind CSS theme variables to new dark charcoal and warm gold palette. Add color variants for hover, active, and light states.
 
 ### Story 12.3: Blade Component Color Migration
 **File:** `story-12.3-blade-component-color-migration.md`
+**Status:** 🔄 Needs Reimplementation
 
-Update all Blade components and pages to use the new olive green palette. Includes navigation, footer, cards, public pages, admin dashboard, and client dashboard components.
+Update all Blade components and pages to use the new color palette. Includes navigation, footer, cards, public pages, admin dashboard, and client dashboard components.
 
-### Story 12.4: Email Template Color and Logo Update
+### Story 12.4: Email Template Color Update
 **File:** `story-12.4-email-template-color-update.md`
+**Status:** 🔄 Needs Reimplementation
 
-Update email templates to use new olive green colors and square logo. Includes theme CSS, header/footer components, button styles, and all notification emails.
+Update email templates to use new colors. Includes theme CSS, header/footer components, button styles, and all notification emails.
 
-### Story 12.5: PDF Template Color and Logo Update
+### Story 12.5: PDF Template Color Update
 **File:** `story-12.5-pdf-template-color-update.md`
+**Status:** 🔄 Needs Reimplementation
 
-Update PDF export templates to use new olive green colors and square logo. Includes users export, consultations export, timelines export, and monthly report. Update chart colors in MonthlyReportService.
+Update PDF export templates to use new colors. Includes users export, consultations export, timelines export, and monthly report. Update chart colors in MonthlyReportService.
 
-### Story 12.6: Brand Documentation and Cleanup
+### Story 12.6: Brand Documentation Update
 **File:** `story-12.6-documentation-update.md`
+**Status:** ⏳ Blocked (after 12.2-12.5)
 
-Update brand documentation (`docs/brand.md`, `docs/logo-generation-instructions.md`, `CLAUDE.md`) to reflect new branding. Update test color assertions. Remove old logo files and cleanup.
+Update brand documentation (`docs/brand.md`, `CLAUDE.md`, etc.) to reflect new color palette. Update test color assertions. Final cleanup and verification.
 
 ## Compatibility Requirements
 
@@ -99,37 +113,39 @@ Update brand documentation (`docs/brand.md`, `docs/logo-generation-instructions.
 
 ## Technical Notes
 
-### Logo Files Generated
-
-Located in `logo/` folder, ready for deployment:
-
-| File | Dimensions | Target Location |
-|------|------------|-----------------|
-| `favicon.ico` | 16/32/48px | `public/favicon.ico` |
-| `favicon-16x16.png` | 16×16 | `public/favicon-16x16.png` |
-| `favicon-32x32.png` | 32×32 | `public/favicon-32x32.png` |
-| `apple-touch-icon.png` | 180×180 | `public/apple-touch-icon.png` |
-| `android-chrome-192x192.png` | 192×192 | `public/android-chrome-192x192.png` |
-| `android-chrome-512x512.png` | 512×512 | `public/android-chrome-512x512.png` |
-| `logo-square.png` | 623×628 | `public/images/logo.png` |
-| `logo-email.png` | 200×200 | `public/images/logo-email.png` |
-
 ### Color Values for Implementation
 
 ```css
-/* New Olive Green Palette */
---color-primary: #8AB357;      /* Olive Green - replaces Charcoal */
---color-secondary: #A5C87A;    /* Light Olive - replaces Warm Gray */
---color-background: #E8E4DC;   /* Off-White - unchanged */
---color-text: #1A1A1A;         /* Deep Black - unchanged */
+/* New Dark Charcoal & Warm Gold Palette */
+--color-primary: #1B1D1A;      /* Dark Charcoal - Header/Footer backgrounds */
+--color-cta: #A68966;          /* Warm Gold - Buttons, links, accents */
+--color-background: #F4F1EA;   /* Warm Cream - Main page background */
+--color-text: #2D322A;         /* Forest Green - Headings, body text */
+--color-card: #FFFFFF;         /* Pure White - Card backgrounds */
+--color-active: #4A5D23;       /* Olive Green - Active states */
 
-/* Additional olive variants for UI states */
---color-primary-hover: #7AA347;   /* Darker olive for hover states */
---color-primary-dark: #6A9337;    /* Dark olive for active/pressed */
---color-primary-light: #B5D88A;   /* Light olive for highlights */
+/* Color variants for UI states */
+--color-primary-light: #2D322A;   /* Primary hover state */
+--color-cta-hover: #8A7555;       /* Button hover state */
+--color-cta-light: #C4A882;       /* Light accent */
+--color-active-hover: #5A7030;    /* Active state hover */
 ```
 
+### Color Usage Guidelines
+
+| Element | Color | Hex |
+|---------|-------|-----|
+| Header/Footer Background | Primary | `#1B1D1A` |
+| Main Page Background | Background | `#F4F1EA` |
+| Card Backgrounds | Card | `#FFFFFF` |
+| CTA Buttons | CTA | `#A68966` |
+| Button Hover | CTA Hover | `#8A7555` |
+| Headings & Text | Text | `#2D322A` |
+| Active Language Toggle | Active | `#4A5D23` |
+| Links | CTA | `#A68966` |
+| Link Hover | CTA Hover | `#8A7555` |
+
 ## Dependencies
 
-- Logo files already generated in `logo/` folder
+- Logo files already deployed
 - No external dependencies required
diff --git a/docs/stories/story-12.2-core-css-theme-update.md b/docs/stories/story-12.2-core-css-theme-update.md
index 48b9238..0bf0c63 100644
--- a/docs/stories/story-12.2-core-css-theme-update.md
+++ b/docs/stories/story-12.2-core-css-theme-update.md
@@ -1,28 +1,29 @@
-# Story 12.2: Core CSS Theme Update - Olive Green Palette
+# Story 12.2: Core CSS Theme Update - Dark Charcoal & Warm Gold Palette
 
 ## Story
 
 **As a** developer
-**I want to** update the Tailwind CSS theme to use the new olive green color palette
-**So that** the application reflects the new LIBRA for Rights brand colors matching the botanical logo
+**I want to** update the Tailwind CSS theme to use the new dark charcoal and warm gold color palette
+**So that** the application reflects the refined LIBRA for Rights brand colors
 
 ## Acceptance Criteria
 
 ### AC1: Update Color Variables in `resources/css/app.css`
 
-**Given** the current theme uses Charcoal/Warm Gray palette
+**Given** the current theme uses Olive Green palette
 **When** I update the `@theme` block
 **Then** the following color mappings are applied:
 
-| Old Variable | Old Hex | New Variable | New Hex |
-|--------------|---------|--------------|---------|
-| `--color-primary` | `#4A4A42` (Charcoal) | `--color-primary` | `#8AB357` (Olive Green) |
-| `--color-accent` | `#C9C4BA` (Warm Gray) | `--color-accent` | `#A5C87A` (Light Olive) |
-| `--color-accent-light` | `#E8E4DC` (Off-White) | `--color-accent-light` | `#C5D9A5` (Pale Olive) |
-| `--color-background` | `#E8E4DC` (Off-White) | `--color-background` | `#E8E4DC` (Off-White) - unchanged |
-| `--color-text` | `#1A1A1A` (Deep Black) | `--color-text` | `#1A1A1A` (Deep Black) - unchanged |
+| Variable | New Hex | Usage |
+|----------|---------|-------|
+| `--color-primary` | `#1B1D1A` | Header/Footer backgrounds |
+| `--color-cta` | `#A68966` | CTA buttons, links, accents |
+| `--color-background` | `#F4F1EA` | Main page background |
+| `--color-text` | `#2D322A` | Headings, body text |
+| `--color-card` | `#FFFFFF` | Card backgrounds |
+| `--color-active` | `#4A5D23` | Active states, language toggle |
 
-### AC2: Add Olive Green Color Variants
+### AC2: Add Color Variants for UI States
 
 **Given** the new palette needs hover and active states
 **When** I update the theme
@@ -30,63 +31,38 @@
 
 | Variable | Hex | Usage |
 |----------|-----|-------|
-| `--color-primary` | `#8AB357` | Primary olive green |
-| `--color-primary-hover` | `#7AA347` | Darker olive for hover |
-| `--color-primary-dark` | `#6A9337` | Dark olive for active/pressed |
-| `--color-primary-light` | `#B5D88A` | Light olive for highlights |
-| `--color-accent` | `#A5C87A` | Secondary light olive |
-| `--color-accent-light` | `#C5D9A5` | Pale olive for subtle backgrounds |
+| `--color-primary-light` | `#2D322A` | Primary hover state |
+| `--color-cta-hover` | `#8A7555` | Button hover state |
+| `--color-cta-light` | `#C4A882` | Light CTA accent |
+| `--color-active-hover` | `#5A7030` | Active state hover |
 
-### AC2.1: Logo Badge Styling
+### AC3: Update Button Styles
 
-**Given** the logo has a beige background that contrasts with olive green headers/footers
-**When** I add the logo badge styling
-**Then** the following CSS class is defined:
-
-| Class | Properties |
-|-------|------------|
-| `.logo-badge` | `border: 2px solid #1A1A1A; box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);` |
-
-This creates a "seal/stamp" effect for the logo on olive green backgrounds, making the beige background look intentional rather than mismatched.
-
-### AC3: Maintain Backward Compatibility Aliases
-
-**Given** existing components may use old color names
-**When** the theme is updated
-**Then** aliases are updated so existing classes continue to work:
-- `--color-charcoal` → points to `--color-primary` (Olive Green)
-- `--color-warm-gray` → points to `--color-accent` (Light Olive)
-- Legacy navy/gold aliases remain for any residual references
-
-### AC4: Update Button Styles
-
-**Given** button classes use the primary color
+**Given** button classes use the primary/accent colors
 **When** theme is updated
-**Then** `.btn-primary` and `.btn-secondary` use new olive palette:
-- Primary: Olive Green background (`#8AB357`), Off-White text
-- Primary Hover: Darker Olive (`#7AA347`)
-- Secondary: Light Olive border, Deep Black text
+**Then** `.btn-primary` and `.btn-secondary` use new palette:
+- Primary: Warm Gold background (`#A68966`), White text
+- Primary Hover: Darker Gold (`#8A7555`)
+- Secondary: Dark Charcoal border, Dark text
 - Hover states updated accordingly
 
-### AC5: Update Form Focus States
+### AC4: Update Form Focus States
 
 **Given** form inputs have focus rings
 **When** theme is updated
-**Then** focus states use Olive Green:
-- `focus:border-accent` → Light Olive border
-- `focus:ring-accent` → Light Olive ring
-- `focus:ring-primary` → Olive Green ring
+**Then** focus states use Warm Gold:
+- `focus:border-cta` → Warm Gold border
+- `focus:ring-cta` → Warm Gold ring
 
-### AC6: Update Link Colors
+### AC5: Update Link Colors
 
 **Given** links use accent colors
 **When** theme is updated
-**Then** link colors use olive palette:
-- Default: Olive Green (`#8AB357`)
-- Hover: Darker Olive (`#7AA347`)
-- Visited: Primary Olive (unchanged)
+**Then** link colors use warm gold:
+- Default: Warm Gold (`#A68966`)
+- Hover: Darker Gold (`#8A7555`)
 
-### AC7: Status Colors Unchanged
+### AC6: Status Colors Unchanged
 
 **Given** status colors serve functional purposes
 **When** theme is updated
@@ -95,25 +71,25 @@ This creates a "seal/stamp" effect for the logo on olive green backgrounds, maki
 - `--color-danger: #E74C3C`
 - `--color-warning: #F39C12`
 
-### AC8: WCAG AA Contrast Compliance
+### AC7: WCAG AA Contrast Compliance
 
 **Given** accessibility requirements
 **When** new colors are applied
 **Then** all text/background combinations meet WCAG AA:
-- Deep Black (`#1A1A1A`) on Off-White (`#E8E4DC`): ≥4.5:1 for body text
-- Off-White on Olive Green (`#8AB357`): ≥4.5:1 for body text
-- Deep Black on Light Olive (`#A5C87A`): Verify contrast ratio
+- Text (`#2D322A`) on Warm Cream (`#F4F1EA`): ≥4.5:1 for body text
+- White text on Dark Charcoal (`#1B1D1A`): ≥4.5:1 for body text
+- White text on Warm Gold (`#A68966`): Verify contrast ratio
 
-### AC9: Update Prose Class
+### AC8: Update Prose Class
 
 **Given** `.prose-brand` class exists for blog content
 **When** theme is updated
-**Then** prose colors use olive palette:
-- Headings: Deep Black
-- Links: Olive Green
-- Body: Deep Black
+**Then** prose colors use new palette:
+- Headings: Forest Green (`#2D322A`)
+- Links: Warm Gold (`#A68966`)
+- Body: Forest Green (`#2D322A`)
 
-### AC10: Build Succeeds
+### AC9: Build Succeeds
 
 **Given** CSS changes are made
 **When** I run `npm run build`
@@ -126,60 +102,51 @@ This creates a "seal/stamp" effect for the logo on olive green backgrounds, maki
 
 ### New Color Palette Reference
 
-| Color | Hex | RGB | Usage |
-|-------|-----|-----|-------|
-| Olive Green | `#8AB357` | rgb(138, 179, 87) | Primary brand color |
-| Darker Olive | `#7AA347` | rgb(122, 163, 71) | Hover states |
-| Dark Olive | `#6A9337` | rgb(106, 147, 55) | Active/pressed states |
-| Light Olive | `#A5C87A` | rgb(165, 200, 122) | Secondary/accent |
-| Pale Olive | `#C5D9A5` | rgb(197, 217, 165) | Subtle backgrounds |
-| Bright Olive | `#B5D88A` | rgb(181, 216, 138) | Highlights |
-| Off-White | `#E8E4DC` | rgb(232, 228, 220) | Backgrounds (unchanged) |
-| Deep Black | `#1A1A1A` | rgb(26, 26, 26) | Text (unchanged) |
+| Color Name | Hex | RGB | Usage |
+|------------|-----|-----|-------|
+| Dark Charcoal | `#1B1D1A` | rgb(27, 29, 26) | Header/Footer backgrounds |
+| Warm Gold | `#A68966` | rgb(166, 137, 102) | CTA buttons, links |
+| Warm Cream | `#F4F1EA` | rgb(244, 241, 234) | Main page background |
+| Forest Green | `#2D322A` | rgb(45, 50, 42) | Text color |
+| Pure White | `#FFFFFF` | rgb(255, 255, 255) | Card backgrounds |
+| Olive Green | `#4A5D23` | rgb(74, 93, 35) | Active states |
+| Gold Hover | `#8A7555` | rgb(138, 117, 85) | Button hover |
+| Gold Light | `#C4A882` | rgb(196, 168, 130) | Light accents |
+| Olive Hover | `#5A7030` | rgb(90, 112, 48) | Active hover |
 
 ### Contrast Verification
 
 Use WebAIM Contrast Checker to verify:
-- Deep Black (#1A1A1A) on Off-White (#E8E4DC): ~12.5:1 (passes AAA)
-- Off-White (#E8E4DC) on Olive Green (#8AB357): ~3.2:1 (check if passes)
-- Deep Black (#1A1A1A) on Light Olive (#A5C87A): ~8.5:1 (passes AAA)
+- Forest Green (#2D322A) on Warm Cream (#F4F1EA): ~10:1 (passes AAA)
+- White (#FFFFFF) on Dark Charcoal (#1B1D1A): ~17:1 (passes AAA)
+- White (#FFFFFF) on Warm Gold (#A68966): ~3.5:1 (passes AA for large text)
 
-**Note:** If Off-White on Olive Green doesn't meet 4.5:1, use Deep Black text on olive backgrounds instead.
-
-### Logo Badge Styling
-
-```css
-/* Badge styling for logo on olive backgrounds */
-.logo-badge {
-  border: 2px solid var(--color-text);
-  box-shadow: 4px 4px 6px rgba(26, 26, 26, 0.5);
-}
-```
+**Note:** For small text on Warm Gold buttons, use white text as it provides sufficient contrast for button contexts.
 
 ### CSS Theme Block Example
 
 ```css
 @theme {
-    /* Primary Olive Green Palette */
-    --color-primary: #8AB357;
-    --color-primary-hover: #7AA347;
-    --color-primary-dark: #6A9337;
-    --color-primary-light: #B5D88A;
+    /* Primary Dark Charcoal Palette */
+    --color-primary: #1B1D1A;
+    --color-primary-light: #2D322A;
 
-    /* Secondary/Accent */
-    --color-accent: #A5C87A;
-    --color-accent-light: #C5D9A5;
-    --color-accent-content: #A5C87A;
-    --color-accent-foreground: #1A1A1A;
+    /* CTA Warm Gold */
+    --color-cta: #A68966;
+    --color-cta-hover: #8A7555;
+    --color-cta-light: #C4A882;
 
-    /* Neutrals (unchanged) */
-    --color-background: #E8E4DC;
-    --color-text: #1A1A1A;
+    /* Active Olive Green */
+    --color-active: #4A5D23;
+    --color-active-hover: #5A7030;
 
-    /* Backward compatibility */
-    --color-charcoal: var(--color-primary);
-    --color-warm-gray: var(--color-accent);
-    --color-off-white: var(--color-background);
+    /* Neutrals */
+    --color-background: #F4F1EA;
+    --color-text: #2D322A;
+    --color-card: #FFFFFF;
+
+    /* For text on dark backgrounds */
+    --color-off-white: #F4F1EA;
 
     /* Status colors (unchanged) */
     --color-success: #27AE60;
@@ -190,66 +157,47 @@ Use WebAIM Contrast Checker to verify:
 
 ## Dev Checklist
 
-- [x] Update `@theme` block with new olive green values
-- [x] Add olive green variants (hover, dark, light)
-- [x] Add `.logo-badge` class with border and shadow
-- [x] Update backward-compatible aliases
-- [x] Update `.btn-primary` styles
-- [x] Update `.btn-secondary` styles
-- [x] Update form focus states
-- [x] Update link colors
-- [x] Update `.prose-brand` class
-- [x] Update skip-link focus styles
-- [x] Update timeline-dot color
-- [x] Update skeleton loader color
-- [x] Verify status colors unchanged
+- [ ] Update `@theme` block with new color values
+- [ ] Add color variants (hover, light)
+- [ ] Update `.btn-primary` styles to use CTA colors
+- [ ] Update `.btn-secondary` styles
+- [ ] Update form focus states
+- [ ] Update link colors
+- [ ] Update `.prose-brand` class
+- [ ] Update skip-link focus styles
+- [ ] Verify status colors unchanged
 - [ ] Run contrast checker on all combinations
-- [x] Run `npm run build` successfully
+- [ ] Run `npm run build` successfully
 - [ ] Visual test in browser
 
 ## Estimation
 
 **Complexity:** Low-Medium
-**Risk:** Low - CSS-only changes with aliases for backward compatibility
+**Risk:** Low - CSS-only changes
 
 ## Dependencies
 
-- Can run in parallel with Story 12.1 (Logo Deployment)
+- Story 12.1 (Logo Deployment) - Completed
 
 ---
 
 ## Dev Agent Record
 
 ### Agent Model Used
-Claude Opus 4.5
+(To be filled during implementation)
 
 ### Status
-In Progress - Pending Visual Test & Contrast Check
+Not Started - Ready for Implementation
 
 ### File List
 | File | Action |
 |------|--------|
-| `resources/css/app.css` | Modified |
+| `resources/css/app.css` | To be modified |
 
 ### Change Log
 | Date | Change |
 |------|--------|
-| 2026-01-04 | Updated @theme block with olive green palette (AC1, AC2) |
-| 2026-01-04 | Added .logo-badge class for seal/stamp effect (AC2.1) |
-| 2026-01-04 | Updated backward compatibility aliases (AC3) |
-| 2026-01-04 | Updated .btn-primary and .btn-secondary styles (AC4) |
-| 2026-01-04 | Form focus states auto-updated via CSS variables (AC5) |
-| 2026-01-04 | Updated .prose-brand link colors (AC6, AC9) |
-| 2026-01-04 | Verified status colors unchanged (AC7) |
-| 2026-01-04 | Updated skip-link focus styles for olive palette |
-| 2026-01-04 | Timeline-dot and skeleton loader auto-updated via CSS variables |
+| 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
 
 ### Completion Notes
-- All CSS changes implemented in `resources/css/app.css`
-- Colors use CSS variables for consistency across components
-- Backward compatibility maintained via aliases (--color-charcoal, --color-warm-gray, --color-navy, --color-gold)
-- Skip-link updated to use `bg-primary text-off-white` for better visibility
-- Build successful: `npm run build` completed without errors (258.29 kB CSS output)
-
-### Debug Log References
-None
+(To be filled during implementation)
diff --git a/docs/stories/story-12.3-blade-component-color-migration.md b/docs/stories/story-12.3-blade-component-color-migration.md
index 6f659b0..d4a2e40 100644
--- a/docs/stories/story-12.3-blade-component-color-migration.md
+++ b/docs/stories/story-12.3-blade-component-color-migration.md
@@ -1,89 +1,96 @@
-# Story 12.3: Blade Component Color Migration - Olive Green
+# Story 12.3: Blade Component Color Migration - Dark Charcoal & Warm Gold
 
 ## Story
 
 **As a** developer
-**I want to** update all Blade components and pages to use the new olive green palette
-**So that** the entire application has consistent branding with the new botanical logo
+**I want to** update all Blade components and pages to use the new dark charcoal and warm gold palette
+**So that** the entire application has consistent branding
 
 ## Acceptance Criteria
 
 ### AC1: Navigation Component Updated
 
-**Given** `resources/views/components/navigation.blade.php` uses charcoal colors
+**Given** `resources/views/components/navigation.blade.php` uses current colors
 **When** I update the component
 **Then** the following changes are applied:
-- Background: Charcoal → Olive Green (`bg-charcoal` → `bg-primary`)
-- Text/Links: Off-White for contrast on olive background
-- Hover states: Use darker olive (`hover:bg-primary-hover`)
-- Mobile menu uses new olive colors
-- Active states updated accordingly
-- Logo: Apply `.logo-badge` class for badge/seal effect on olive background
+- Background: Dark Charcoal (`#1B1D1A` / `bg-primary`)
+- Text/Links: Warm Cream (`#F4F1EA` / `text-off-white`) for contrast
+- Hover states: Use `hover:bg-primary-light`
+- Mobile menu uses new colors
+- Active states use Olive Green (`#4A5D23`)
 
 ### AC2: Footer Component Updated
 
-**Given** `resources/views/components/footer.blade.php` uses charcoal colors
+**Given** `resources/views/components/footer.blade.php` uses current colors
 **When** I update the component
 **Then** the following changes are applied:
-- Background: Charcoal → Olive Green
-- Text: Off-White for contrast
-- Links: Light Olive with hover states
+- Background: Dark Charcoal (`#1B1D1A`)
+- Text: Warm Cream for contrast
+- Links: Warm Gold (`#A68966`) with hover states
 - Social icons: Appropriate contrast colors
-- Logo: Apply `.logo-badge` class for badge/seal effect on olive background
 
 ### AC3: Card Components Updated
 
-**Given** card components use old accent colors
+**Given** card components use accent colors
 **When** I update `resources/views/components/ui/card.blade.php`
 **Then** the following changes are applied:
-- Background: Off-White (unchanged)
-- Borders/accents: Light Olive (`border-accent`)
-- Text: Deep Black (unchanged)
-- Hover states: Subtle olive highlight
+- Background: Pure White (`#FFFFFF` / `bg-card`)
+- Borders/accents: Gold Light (`#C4A882`)
+- Text: Forest Green (`#2D322A`)
+- Hover states: Subtle highlight
 
 ### AC4: Stat Card Component Updated
 
-**Given** `resources/views/components/ui/stat-card.blade.php` uses old colors
+**Given** `resources/views/components/ui/stat-card.blade.php` uses colors
 **When** I update the component
-**Then** accent colors use olive palette:
-- Icon backgrounds: Light Olive
-- Value highlights: Olive Green
-- Borders: Light Olive
+**Then** accent colors use new palette:
+- Icon backgrounds: Gold Light (`#C4A882`)
+- Value highlights: Warm Gold (`#A68966`)
+- Borders: Gold Light
 
 ### AC5: Spinner Component Updated
 
-**Given** `resources/views/components/spinner.blade.php` uses old colors
+**Given** `resources/views/components/spinner.blade.php` uses colors
 **When** I update the component
-**Then** spinner uses Olive Green
+**Then** spinner uses Warm Gold (`#A68966`)
 
 ### AC6: Toast Component Updated
 
-**Given** `resources/views/components/toast.blade.php` uses old colors
+**Given** `resources/views/components/toast.blade.php` uses colors
 **When** I update the component
-**Then** default toast uses olive palette (status colors remain unchanged)
+**Then** default/info toast uses Warm Gold (status colors remain unchanged)
 
 ### AC7: Language Toggle Updated
 
-**Given** `resources/views/components/language-toggle.blade.php` uses old colors
+**Given** `resources/views/components/language-toggle.blade.php` uses colors
 **When** I update the component
-**Then** active/inactive states use olive colors
+**Then**:
+- Active state: Olive Green background (`#4A5D23`)
+- Inactive state: Transparent or subtle
+- Hover: Olive Hover (`#5A7030`)
 
 ### AC8: Public Pages Updated
 
-**Given** public pages use old accent colors
+**Given** public pages use accent colors
 **When** I update the following pages
-**Then** they use the new olive palette:
+**Then** they use the new palette:
 - `resources/views/pages/home.blade.php`
 - `resources/views/pages/booking.blade.php`
 - `resources/views/pages/terms.blade.php`
 - `resources/views/pages/privacy.blade.php`
 - `resources/views/pages/legal.blade.php`
 
+Key updates:
+- Headings: Forest Green (`#2D322A`)
+- CTA buttons: Warm Gold (`#A68966`)
+- Links: Warm Gold with hover
+- Backgrounds: Warm Cream (`#F4F1EA`)
+
 ### AC9: Post Pages Updated
 
-**Given** post display pages use old colors
+**Given** post display pages use colors
 **When** I update the following pages
-**Then** they use the new olive palette:
+**Then** they use the new palette:
 - `resources/views/livewire/pages/posts/index.blade.php`
 - `resources/views/livewire/pages/posts/show.blade.php`
 
@@ -91,29 +98,30 @@
 
 **Given** admin dashboard uses accent colors
 **When** I update admin components
-**Then** they use olive palette:
-- Sidebar/navigation accents
-- Card highlights
-- Button accents
-- Table header accents
+**Then** they use new palette:
+- Sidebar/navigation accents: Warm Gold
+- Card highlights: Gold Light
+- Button accents: Warm Gold
+- Table header accents: Dark Charcoal background
 
 ### AC11: Client Dashboard Components Updated
 
 **Given** client dashboard uses accent colors
 **When** I update client components
-**Then** they use olive palette consistently
+**Then** they use new palette consistently
 
 ### AC12: Public Layout Updated
 
-**Given** `resources/views/components/layouts/public.blade.php` uses old colors
+**Given** `resources/views/components/layouts/public.blade.php` uses colors
 **When** I update the layout
-**Then** it uses the new olive palette
+**Then** it uses the new palette:
+- Body background: Warm Cream (`#F4F1EA`)
 
 ### AC13: RTL Layout Integrity
 
 **Given** the application supports RTL (Arabic)
 **When** colors are updated
-**Then** RTL layout displays correctly with new olive colors
+**Then** RTL layout displays correctly with new colors
 
 ### AC14: Responsive Appearance
 
@@ -128,7 +136,6 @@
 **Components:**
 - `resources/views/components/navigation.blade.php`
 - `resources/views/components/footer.blade.php`
-- `resources/views/components/logo.blade.php` - Add `logo-badge` class for badge/seal effect
 - `resources/views/components/language-toggle.blade.php`
 - `resources/views/components/spinner.blade.php`
 - `resources/views/components/toast.blade.php`
@@ -155,60 +162,72 @@
 
 ### Color Class Mapping
 
-| Old Class | New Class |
-|-----------|-----------|
-| `bg-charcoal` | `bg-primary` (Olive Green) |
-| `text-charcoal` | `text-primary` |
-| `border-charcoal` | `border-primary` |
-| `bg-warm-gray` | `bg-accent` (Light Olive) |
-| `text-warm-gray` | `text-accent` |
-| `border-warm-gray` | `border-accent` |
-| `hover:bg-charcoal` | `hover:bg-primary-hover` |
-| `hover:text-charcoal` | `hover:text-primary-hover` |
+| Old Class | New Class | Color |
+|-----------|-----------|-------|
+| `bg-primary` (olive) | `bg-primary` | Dark Charcoal `#1B1D1A` |
+| `bg-accent` | `bg-cta` or `bg-cta-light` | Warm Gold / Gold Light |
+| `text-primary` | `text-cta` | Warm Gold for links |
+| `text-text` | `text-text` | Forest Green `#2D322A` |
+| `bg-background` | `bg-background` | Warm Cream `#F4F1EA` |
+| `bg-white` | `bg-card` | Pure White `#FFFFFF` |
+| `hover:bg-primary-hover` | `hover:bg-primary-light` | `#2D322A` |
 
-### Visual Hierarchy with Olive Green
+### Visual Hierarchy with New Palette
 
-**Primary Actions:**
-- Background: Olive Green (`#8AB357`)
-- Text: Off-White (`#E8E4DC`) or Deep Black depending on contrast
+**Header/Footer:**
+- Background: Dark Charcoal (`#1B1D1A`)
+- Text: Warm Cream (`#F4F1EA`)
+- Links: Warm Cream, hover to Warm Gold
+
+**Primary Actions (CTA Buttons):**
+- Background: Warm Gold (`#A68966`)
+- Text: White (`#FFFFFF`)
+- Hover: Gold Hover (`#8A7555`)
 
 **Secondary Actions:**
-- Border: Light Olive (`#A5C87A`)
-- Text: Olive Green or Deep Black
+- Border: Dark Charcoal or Warm Gold
+- Text: Forest Green or Warm Gold
 
-**Highlights/Accents:**
-- Background: Light Olive (`#A5C87A`) or Pale Olive (`#C5D9A5`)
-- Text: Deep Black for contrast
+**Active States (Language Toggle):**
+- Background: Olive Green (`#4A5D23`)
+- Text: White
+- Hover: Olive Hover (`#5A7030`)
+
+**Cards:**
+- Background: Pure White (`#FFFFFF`)
+- Border: Gold Light (`#C4A882`) or subtle gray
+- Text: Forest Green (`#2D322A`)
+
+**Page Background:**
+- Main: Warm Cream (`#F4F1EA`)
 
 ## Dev Checklist
 
-- [x] Update `navigation.blade.php`
-- [x] Update `footer.blade.php`
-- [x] Apply `.logo-badge` class to logo in navigation
-- [x] Apply `.logo-badge` class to logo in footer
-- [x] Update `language-toggle.blade.php`
-- [x] Update `spinner.blade.php`
-- [x] Update `toast.blade.php`
-- [x] Update `card.blade.php`
-- [x] Update `stat-card.blade.php`
-- [x] Update `public.blade.php` layout
-- [x] Update `home.blade.php`
-- [x] Update `booking.blade.php`
-- [x] Update `terms.blade.php`
-- [x] Update `privacy.blade.php`
-- [x] Update `legal.blade.php`
-- [x] Update `posts/index.blade.php`
-- [x] Update `posts/show.blade.php`
-- [x] Review and update admin dashboard components
-- [x] Review and update client dashboard components
-- [x] Test RTL layout (Arabic)
-- [x] Test responsive breakpoints
-- [x] Visual review all updated pages
+- [ ] Update `navigation.blade.php` - Dark Charcoal bg, Warm Cream text
+- [ ] Update `footer.blade.php` - Dark Charcoal bg, Warm Cream text
+- [ ] Update `language-toggle.blade.php` - Olive Green active state
+- [ ] Update `spinner.blade.php` - Warm Gold color
+- [ ] Update `toast.blade.php` - Warm Gold for info
+- [ ] Update `card.blade.php` - White bg, Gold Light accents
+- [ ] Update `stat-card.blade.php` - Gold accents
+- [ ] Update `public.blade.php` layout - Warm Cream body bg
+- [ ] Update `home.blade.php` - New palette
+- [ ] Update `booking.blade.php` - New palette
+- [ ] Update `terms.blade.php` - New palette
+- [ ] Update `privacy.blade.php` - New palette
+- [ ] Update `legal.blade.php` - New palette
+- [ ] Update `posts/index.blade.php` - New palette
+- [ ] Update `posts/show.blade.php` - New palette
+- [ ] Review and update admin dashboard components
+- [ ] Review and update client dashboard components
+- [ ] Test RTL layout (Arabic)
+- [ ] Test responsive breakpoints
+- [ ] Visual review all updated pages
 
 ## Estimation
 
 **Complexity:** Medium
-**Risk:** Low - Mostly class name updates with CSS variables doing the heavy lifting
+**Risk:** Low - Mostly class name updates with CSS variables
 
 ## Dependencies
 
@@ -218,46 +237,19 @@
 
 ## Dev Agent Record
 
-### Status: Ready for Review
+### Status
+Not Started - Ready for Implementation
 
 ### Agent Model Used
-Claude Opus 4.5
+(To be filled during implementation)
 
 ### File List
-
-**Modified Files:**
-- `resources/views/components/navigation.blade.php` - Updated colors to olive palette, added logo-badge class
-- `resources/views/components/footer.blade.php` - Updated colors to olive palette, added logo-badge class
-- `resources/views/components/language-toggle.blade.php` - Updated active/inactive states to olive colors
-- `resources/views/components/spinner.blade.php` - Changed spinner color to primary (olive green)
-- `resources/views/components/toast.blade.php` - Updated info toast to primary color
-- `resources/views/components/ui/card.blade.php` - Updated highlight border to accent
-- `resources/views/components/ui/stat-card.blade.php` - Updated icon colors to primary/accent
-- `resources/views/pages/home.blade.php` - Updated text colors to text (Deep Black)
-- `resources/views/pages/booking.blade.php` - Updated text colors to text
-- `resources/views/pages/terms.blade.php` - Updated text colors to text
-- `resources/views/pages/privacy.blade.php` - Updated text colors to text
-- `resources/views/pages/legal.blade.php` - Updated text colors to text
-- `resources/views/livewire/pages/posts/index.blade.php` - Updated colors to olive palette
-- `resources/views/livewire/pages/posts/show.blade.php` - Updated colors to olive palette, changed prose-navy to prose-brand
-- `resources/css/app.css` - Updated form component styling to use text/accent colors
-
-### Completion Notes
-
-1. **Color Migration Complete**: All Blade components and pages have been updated from charcoal/warm-gray to the new olive green palette (primary/accent/text).
-
-2. **Logo Badge Applied**: The `.logo-badge` class has been applied to the logo component in both navigation and footer for the seal/stamp effect on olive backgrounds.
-
-3. **Admin/Client Dashboard**: No old color classes found in admin or client dashboard directories - they were either already using semantic colors or don't exist yet.
-
-4. **CSS Updates**: Form styling classes in app.css were also updated to use semantic color tokens (text/30 borders, text labels) for consistency.
-
-5. **All Tests Passing**: PHP tests completed successfully (memory exhaustion at end of test suite is unrelated to changes).
+(To be filled during implementation)
 
 ### Change Log
+| Date | Change |
+|------|--------|
+| 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
 
-| Date | Change | Author |
-|------|--------|--------|
-| 2026-01-04 | Migrated all Blade components to olive green palette | Dev Agent |
-| 2026-01-04 | Applied logo-badge class to navigation and footer logos | Dev Agent |
-| 2026-01-04 | Updated CSS form styling to use semantic color tokens | Dev Agent |
+### Completion Notes
+(To be filled during implementation)
diff --git a/docs/stories/story-12.4-email-template-color-update.md b/docs/stories/story-12.4-email-template-color-update.md
index 2cd18d9..d8c61e6 100644
--- a/docs/stories/story-12.4-email-template-color-update.md
+++ b/docs/stories/story-12.4-email-template-color-update.md
@@ -1,73 +1,68 @@
-# Story 12.4: Email Template Color and Logo Update
+# Story 12.4: Email Template Color Update - Dark Charcoal & Warm Gold
 
 ## Story
 
 **As a** developer
-**I want to** update email templates to use the new olive green colors and square logo
-**So that** all email communications reflect the new LIBRA for Rights branding
+**I want to** update email templates to use the new dark charcoal and warm gold colors
+**So that** all email communications reflect the refined LIBRA for Rights branding
 
 ## Acceptance Criteria
 
 ### AC1: Email Theme CSS Updated
 
-**Given** `resources/views/vendor/mail/html/themes/default.css` uses charcoal/warm gray colors
+**Given** `resources/views/vendor/mail/html/themes/default.css` uses current colors
 **When** I update the stylesheet
 **Then** the following changes are applied:
 
-| Element | Old Color | New Color |
-|---------|-----------|-----------|
-| Links (`a`) | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) |
-| Headings (h1, h2, h3) | `#4A4A42` (Charcoal) | `#6A9337` (Dark Olive) |
-| Header background | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) |
-| Footer links | `#C9C4BA` (Warm Gray) | `#A5C87A` (Light Olive) |
-| Primary button | `#4A4A42` bg, `#E8E4DC` text | `#8AB357` bg, `#E8E4DC` text |
-| Table headers | `#4A4A42` (Charcoal) | `#8AB357` (Olive Green) |
-| Panel border | `#C9C4BA` (Warm Gray) | `#A5C87A` (Light Olive) |
+| Element | New Color | Hex |
+|---------|-----------|-----|
+| Links (`a`) | Warm Gold | `#A68966` |
+| Headings (h1, h2, h3) | Forest Green | `#2D322A` |
+| Header background | Dark Charcoal | `#1B1D1A` |
+| Footer links | Warm Gold | `#A68966` |
+| Primary button | Warm Gold bg, White text | `#A68966` / `#FFFFFF` |
+| Table headers | Dark Charcoal bg, White text | `#1B1D1A` |
+| Panel border | Gold Light | `#C4A882` |
+| Body text | Forest Green | `#2D322A` |
+| Body background | Warm Cream | `#F4F1EA` |
 
 ### AC2: Email Header Component Updated
 
 **Given** `resources/views/vendor/mail/html/header.blade.php` has inline styles
 **When** I update the component
 **Then**:
-- Background color updated to Olive Green (`#8AB357`)
-- Logo reference updated to new square logo (`logo-email.png`)
-- Logo sizing adjusted for square format
+- Background color updated to Dark Charcoal (`#1B1D1A`)
+- Text color: White or Warm Cream
+- Logo sizing maintained for square format
 
 ### AC3: Email Footer Component Updated
 
 **Given** `resources/views/vendor/mail/html/footer.blade.php` has inline styles
 **When** I update the component
-**Then** any inline color references use olive palette
+**Then** any inline color references use new palette:
+- Text: Forest Green (`#2D322A`)
+- Links: Warm Gold (`#A68966`)
 
 ### AC4: Button Component Updated
 
 **Given** `resources/views/vendor/mail/html/button.blade.php` may have inline styles
 **When** I update the component
 **Then** primary buttons use:
-- Background: Olive Green (`#8AB357`)
-- Text: Off-White (`#E8E4DC`)
-- Hover hint: Darker Olive (`#7AA347`)
+- Background: Warm Gold (`#A68966`)
+- Text: White (`#FFFFFF`)
+- Hover hint: Gold Hover (`#8A7555`)
 
 ### AC5: Panel Component Updated
 
 **Given** `resources/views/vendor/mail/html/panel.blade.php` may have inline styles
 **When** I update the component
-**Then** panel border uses Light Olive (`#A5C87A`)
+**Then** panel border uses Gold Light (`#C4A882`)
 
-### AC6: Email Logo Updated to Square Format
-
-**Given** email header displays the logo
-**When** emails are sent
-**Then**:
-- Logo uses `logo-email.png` (square format, 60px height)
-- Logo is centered or left-aligned appropriately
-- Alt text reads "LIBRA for Rights"
-
-### AC7: All Email Templates Tested
+### AC6: All Email Templates Tested
 
 **Given** the application sends various email types
 **When** I test each email template
-**Then** colors and logo display correctly:
+**Then** colors display correctly:
 - Welcome email
 - Booking submitted confirmation
 - Booking approved/rejected
@@ -77,13 +72,13 @@
 - Guest booking notifications
 - Admin notifications
 
-### AC8: Plain Text Fallback Unaffected
+### AC7: Plain Text Fallback Unaffected
 
 **Given** plain text email templates exist
 **When** colors are updated
 **Then** plain text templates continue to work (no color changes needed)
 
-### AC9: Email Client Compatibility
+### AC8: Email Client Compatibility
 
 **Given** emails are viewed in various clients
 **When** I test the templates
@@ -110,21 +105,14 @@
 ### Color Mapping for Email CSS
 
 ```css
-/* Old → New */
-#4A4A42 → #8AB357  /* Charcoal → Olive Green */
-#C9C4BA → #A5C87A  /* Warm Gray → Light Olive */
-#6A9337            /* Dark Olive - for headings */
-#7AA347            /* Darker Olive - for hover hints */
-```
-
-### Email Logo Implementation
-
-```html
-<!-- Old (horizontal) -->
-<img src="{{ asset('images/logo.png') }}" alt="LIBRA for Rights" style="height: 40px; width: auto;">
-
-<!-- New (square) -->
-<img src="{{ asset('images/logo-email.png') }}" alt="LIBRA for Rights" style="height: 60px; width: 60px;">
+/* New Color Values */
+#1B1D1A  /* Dark Charcoal - Header background, table headers */
+#A68966  /* Warm Gold - Links, buttons, accents */
+#8A7555  /* Gold Hover - Button hover state */
+#C4A882  /* Gold Light - Panel borders, subtle accents */
+#2D322A  /* Forest Green - Text, headings */
+#F4F1EA  /* Warm Cream - Body background */
+#FFFFFF  /* White - Button text, header text */
 ```
 
 ### Email-Safe Colors
@@ -135,28 +123,62 @@ Email clients have limited CSS support. Ensure:
 - Maintain fallback background colors
 - Use web-safe colors where possible
 
-### Testing Emails
+### CSS Updates Example
 
-Use Laravel's mail preview or Mailtrap to test:
-```bash
-# Preview emails in browser (if configured)
-php artisan serve
-# Visit mail preview routes
+```css
+/* Header */
+.header {
+    background-color: #1B1D1A;
+}
+
+/* Links */
+a {
+    color: #A68966;
+}
+
+/* Headings */
+h1, h2, h3 {
+    color: #2D322A;
+}
+
+/* Primary Button */
+.button-primary {
+    background-color: #A68966;
+    color: #FFFFFF;
+}
+
+/* Panel */
+.panel {
+    border-left-color: #C4A882;
+}
+
+/* Table Header */
+.table th {
+    background-color: #1B1D1A;
+    color: #FFFFFF;
+}
+
+/* Body */
+body {
+    background-color: #F4F1EA;
+    color: #2D322A;
+}
 ```
 
 ## Dev Checklist
 
-- [x] Update `default.css` header background color
-- [x] Update `default.css` link colors
-- [x] Update `default.css` heading colors
-- [x] Update `default.css` button colors (`.button-primary`)
-- [x] Update `default.css` table header colors
-- [x] Update `default.css` panel border color
-- [x] Update `default.css` footer link colors
-- [x] Update `header.blade.php` - inline styles and logo reference
-- [x] Update `footer.blade.php` - inline styles
-- [x] Review `button.blade.php` for inline styles
-- [x] Review `panel.blade.php` for inline styles
+- [ ] Update `default.css` header background color to `#1B1D1A`
+- [ ] Update `default.css` link colors to `#A68966`
+- [ ] Update `default.css` heading colors to `#2D322A`
+- [ ] Update `default.css` button colors (`.button-primary`) to `#A68966`
+- [ ] Update `default.css` table header colors to `#1B1D1A`
+- [ ] Update `default.css` panel border color to `#C4A882`
+- [ ] Update `default.css` footer link colors to `#A68966`
+- [ ] Update `default.css` body background to `#F4F1EA`
+- [ ] Update `header.blade.php` - inline styles
+- [ ] Update `footer.blade.php` - inline styles
+- [ ] Review `button.blade.php` for inline styles
+- [ ] Review `panel.blade.php` for inline styles
 - [ ] Test Welcome email appearance (manual)
 - [ ] Test Booking emails appearance (manual)
 - [ ] Test Reminder emails appearance (manual)
@@ -175,7 +197,7 @@ php artisan serve
 
 ## Dependencies
 
-- Story 12.1 (Logo Deployment) must be completed for `logo-email.png`
+- Story 12.1 (Logo Deployment) - Completed
 - Story 12.2 (Core CSS) should be completed for color reference consistency
 
 ---
@@ -183,57 +205,24 @@ php artisan serve
 ## Dev Agent Record
 
 ### Status
-Ready for Review
+Not Started - Ready for Implementation
 
 ### Agent Model Used
-Claude Opus 4.5
+(To be filled during implementation)
 
 ### File List
 
 | File | Action |
 |------|--------|
-| `resources/views/vendor/mail/html/themes/default.css` | Modified |
-| `resources/views/vendor/mail/html/header.blade.php` | Modified |
-| `resources/views/vendor/mail/html/footer.blade.php` | Modified |
+| `resources/views/vendor/mail/html/themes/default.css` | To be modified |
+| `resources/views/vendor/mail/html/header.blade.php` | To be modified |
+| `resources/views/vendor/mail/html/footer.blade.php` | To be modified |
 
 ### Change Log
 
-1. **default.css** - Updated all color values per AC1:
-   - Links: `#4A4A42` → `#8AB357` (Olive Green)
-   - Headings (h1, h2, h3): `#4A4A42` → `#6A9337` (Dark Olive)
-   - Header background: `#4A4A42` → `#8AB357`
-   - Footer links: `#C9C4BA` → `#A5C87A` (Light Olive)
-   - Primary button: `#4A4A42` → `#8AB357`
-   - Table headers: `#4A4A42` → `#8AB357`
-   - Panel border: `#C9C4BA` → `#A5C87A`
-   - Logo class: Updated from 45px to 60px square format
-
-2. **header.blade.php** - Updated per AC2:
-   - Background color: `#4A4A42` → `#8AB357`
-   - Logo sizing: `height: 45px` → `height: 60px; width: 60px`
-   - Alt text: Changed to "LIBRA for Rights"
-
-3. **footer.blade.php** - Updated per AC3:
-   - Email link color: `#C9C4BA` → `#A5C87A`
-   - Website link color: `#C9C4BA` → `#A5C87A`
-
-4. **button.blade.php** - Reviewed per AC4:
-   - No inline styles present; uses CSS classes
-   - Colors handled via default.css `.button-primary` class
-
-5. **panel.blade.php** - Reviewed per AC5:
-   - No inline styles present; uses CSS classes
-   - Border handled via default.css `.panel` class
+| Date | Change |
+|------|--------|
+| 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
 
 ### Completion Notes
-
-- All CSS color updates completed per acceptance criteria
-- All inline styles in Blade components updated
-- `logo-email.png` verified to exist at `public/images/logo-email.png`
-- Plain text templates unaffected (no color changes needed)
-- Automated tests pass (unrelated memory error in PDF export feature)
-- Manual email client testing (AC7-AC9) required for full verification
-
-### Debug Log References
-
-N/A - No debugging issues encountered
+(To be filled during implementation)
diff --git a/docs/stories/story-12.5-pdf-template-color-update.md b/docs/stories/story-12.5-pdf-template-color-update.md
index eb12874..1d3bc62 100644
--- a/docs/stories/story-12.5-pdf-template-color-update.md
+++ b/docs/stories/story-12.5-pdf-template-color-update.md
@@ -1,83 +1,75 @@
-# Story 12.5: PDF Template Color and Logo Update
+# Story 12.5: PDF Template Color Update - Dark Charcoal & Warm Gold
 
 ## Story
 
 **As a** developer
-**I want to** update PDF export templates to use the new olive green colors and square logo
-**So that** all exported documents reflect the new LIBRA for Rights branding
+**I want to** update PDF export templates to use the new dark charcoal and warm gold colors
+**So that** all exported documents reflect the refined LIBRA for Rights branding
 
 ## Acceptance Criteria
 
 ### AC1: Users Export PDF Updated
 
-**Given** `resources/views/pdf/users-export.blade.php` uses charcoal colors
+**Given** `resources/views/pdf/users-export.blade.php` uses current colors
 **When** I update the template
 **Then** the following changes are applied:
-- Header background: Charcoal → Olive Green (`#8AB357`)
-- Header text: Off-White (`#E8E4DC`)
-- Accent elements: Warm Gray → Light Olive (`#A5C87A`)
-- Table headers: Charcoal → Olive Green
-- Borders: Updated to olive palette
-- Logo: Square format
+- Header background: Dark Charcoal (`#1B1D1A`)
+- Header text: White (`#FFFFFF`)
+- Accent elements: Warm Gold (`#A68966`) or Gold Light (`#C4A882`)
+- Table headers: Dark Charcoal background, white text
+- Borders: Gold Light (`#C4A882`)
+- Body text: Forest Green (`#2D322A`)
 
 ### AC2: Consultations Export PDF Updated
 
-**Given** `resources/views/pdf/consultations-export.blade.php` uses charcoal colors
+**Given** `resources/views/pdf/consultations-export.blade.php` uses current colors
 **When** I update the template
-**Then** colors match the new olive green palette:
-- Headers: Olive Green background
+**Then** colors match the new palette:
+- Headers: Dark Charcoal background
 - Status badges: Appropriate contrast colors
-- Table styling: Olive accents
+- Table styling: Gold accents
 
 ### AC3: Timelines Export PDF Updated
 
-**Given** `resources/views/pdf/timelines-export.blade.php` uses charcoal colors
+**Given** `resources/views/pdf/timelines-export.blade.php` uses current colors
 **When** I update the template
-**Then** colors match the new olive green palette:
-- Timeline markers: Olive Green
-- Section headers: Olive Green
-- Borders and accents: Light Olive
+**Then** colors match the new palette:
+- Timeline markers: Warm Gold (`#A68966`)
+- Section headers: Dark Charcoal background
+- Borders and accents: Gold Light (`#C4A882`)
 
 ### AC4: Monthly Report PDF Updated
 
-**Given** `resources/views/pdf/monthly-report.blade.php` uses charcoal colors
+**Given** `resources/views/pdf/monthly-report.blade.php` uses current colors
 **When** I update the template
 **Then** the following changes are applied:
-- Header/footer: Olive Green background
-- Accent colors: Light Olive
-- Charts/graphs: Updated olive color scheme
-- Text: Deep Black for readability
-- Logo: Square format
+- Header/footer: Dark Charcoal background (`#1B1D1A`)
+- Header/footer text: White
+- Accent colors: Warm Gold (`#A68966`)
+- Charts/graphs: Updated color scheme
+- Text: Forest Green (`#2D322A`)
 
 ### AC5: Monthly Report Service Updated
 
 **Given** `app/Services/MonthlyReportService.php` contains color references for charts
 **When** I update the service
-**Then** chart colors use olive palette:
-- Pie chart colors: Olive Green, Light Olive, Pale Olive
-- Line chart border: Olive Green
-- Bar chart fills: Olive variations
+**Then** chart colors use new palette:
+- Primary chart color: Warm Gold (`#A68966`)
+- Secondary: Gold Light (`#C4A882`)
+- Tertiary: Dark Charcoal (`#1B1D1A`)
+- Quaternary: Olive Green (`#4A5D23`)
 
-### AC6: PDF Logo Updated to Square Format
-
-**Given** PDF templates include the logo
-**When** PDFs are generated
-**Then**:
-- Logo uses square format
-- Logo sized appropriately for PDF context
-- Alt text/title reads "LIBRA for Rights"
-
-### AC7: Print-Friendly Colors
+### AC6: Print-Friendly Colors
 
 **Given** PDFs are often printed
 **When** colors are updated
 **Then** they remain legible when printed:
-- Olive Green (`#8AB357`) prints well
-- Light Olive (`#A5C87A`) used for accents only (may appear light in grayscale)
+- Dark Charcoal (`#1B1D1A`) prints as near-black - excellent contrast
+- Warm Gold (`#A68966`) prints as medium tone - good visibility
 - Sufficient contrast for all text
 - Consider adding subtle borders for light-colored sections
 
-### AC8: All PDF Exports Tested
+### AC7: All PDF Exports Tested
 
 **Given** the admin can export various data types
 **When** I test each PDF export
@@ -103,27 +95,38 @@
 **Livewire Components (review for inline PDF styles):**
 - `resources/views/livewire/admin/reports/monthly-report.blade.php`
 
+**Tests:**
+- `tests/Feature/Admin/PdfBrandColorsTest.php` (update color assertions)
+
 ### Color Mapping for PDFs
 
-| Element | Old Color | New Color |
-|---------|-----------|-----------|
-| Primary Background | `#4A4A42` | `#8AB357` |
-| Accent/Highlight | `#C9C4BA` | `#A5C87A` |
-| Light Background | `#E8E4DC` | `#E8E4DC` (unchanged) |
-| Text | `#1A1A1A` | `#1A1A1A` (unchanged) |
-| Table Header BG | `#4A4A42` | `#8AB357` |
-| Table Header Text | `#E8E4DC` | `#E8E4DC` |
-| Borders | `#C9C4BA` | `#A5C87A` |
+| Element | New Color | Hex |
+|---------|-----------|-----|
+| Primary Background | Dark Charcoal | `#1B1D1A` |
+| Accent/Highlight | Warm Gold | `#A68966` |
+| Light Accent | Gold Light | `#C4A882` |
+| Page Background | Warm Cream | `#F4F1EA` |
+| Text | Forest Green | `#2D322A` |
+| Table Header BG | Dark Charcoal | `#1B1D1A` |
+| Table Header Text | White | `#FFFFFF` |
+| Borders | Gold Light | `#C4A882` |
 
 ### PDF Styling Notes
 
 PDF templates use inline CSS. Common patterns to update:
-```html
-<!-- Old -->
-<div style="background-color: #4A4A42; color: #E8E4DC;">
 
-<!-- New -->
-<div style="background-color: #8AB357; color: #E8E4DC;">
+```html
+<!-- Header -->
+<div style="background-color: #1B1D1A; color: #FFFFFF;">
+
+<!-- Table Header -->
+<th style="background-color: #1B1D1A; color: #FFFFFF;">
+
+<!-- Accent Border -->
+<div style="border-left: 4px solid #A68966;">
+
+<!-- Text -->
+<p style="color: #2D322A;">
 ```
 
 ### Chart Color Palette for Reports
@@ -131,45 +134,36 @@ PDF templates use inline CSS. Common patterns to update:
 ```php
 // Monthly Report Service chart colors
 $chartColors = [
-    'primary' => '#8AB357',    // Olive Green
-    'secondary' => '#A5C87A',  // Light Olive
-    'tertiary' => '#C5D9A5',   // Pale Olive
-    'quaternary' => '#6A9337', // Dark Olive
-    'background' => '#E8E4DC', // Off-White
+    'primary' => '#A68966',    // Warm Gold
+    'secondary' => '#C4A882',  // Gold Light
+    'tertiary' => '#1B1D1A',   // Dark Charcoal
+    'quaternary' => '#4A5D23', // Olive Green
+    'background' => '#F4F1EA', // Warm Cream
 ];
 ```
 
 ### Print Considerations
 
-- Olive Green (`#8AB357`) prints as medium gray - good contrast
-- Light Olive (`#A5C87A`) prints as light gray - use for accents only
+- Dark Charcoal (`#1B1D1A`) prints as near-black - excellent readability
+- Warm Gold (`#A68966`) prints as medium brown/tan - good visibility
+- Gold Light (`#C4A882`) prints as light tan - use for borders/accents only
 - Ensure table borders are visible in grayscale
 - Test print preview in browser
 
-### PDF Logo Implementation
-
-```html
-<!-- Square logo for PDF -->
-<img src="{{ public_path('images/logo.png') }}" style="height: 50px; width: 50px;" alt="LIBRA for Rights">
-```
-
 ## Dev Checklist
 
-- [x] Update `users-export.blade.php` colors
-- [x] Update `users-export.blade.php` logo
-- [x] Update `consultations-export.blade.php` colors
-- [x] Update `consultations-export.blade.php` logo
-- [x] Update `timelines-export.blade.php` colors
-- [x] Update `timelines-export.blade.php` logo
-- [x] Update `monthly-report.blade.php` colors
-- [x] Update `monthly-report.blade.php` logo
-- [x] Update `MonthlyReportService.php` chart colors
-- [x] Review `monthly-report.blade.php` Livewire component
-- [x] Test Users PDF export
-- [x] Test Consultations PDF export
-- [x] Test Timelines PDF export
-- [x] Test Monthly Report PDF generation
-- [x] Verify logo displays correctly in all PDFs
+- [ ] Update `users-export.blade.php` colors
+- [ ] Update `consultations-export.blade.php` colors
+- [ ] Update `timelines-export.blade.php` colors
+- [ ] Update `monthly-report.blade.php` colors
+- [ ] Update `MonthlyReportService.php` chart colors
+- [ ] Review `monthly-report.blade.php` Livewire component
+- [ ] Update `PdfBrandColorsTest.php` color assertions
+- [ ] Test Users PDF export
+- [ ] Test Consultations PDF export
+- [ ] Test Timelines PDF export
+- [ ] Test Monthly Report PDF generation
+- [ ] Verify logo displays correctly in all PDFs
 - [ ] Test print preview for readability
 - [ ] Test grayscale printing
 
@@ -180,7 +174,7 @@ $chartColors = [
 
 ## Dependencies
 
-- Story 12.1 (Logo Deployment) must be completed for logo files
+- Story 12.1 (Logo Deployment) - Completed
 - Story 12.2 (Core CSS) should be completed for color reference consistency
 
 ---
@@ -188,39 +182,27 @@ $chartColors = [
 ## Dev Agent Record
 
 ### Status
-Ready for Review
+Not Started - Ready for Implementation
 
 ### Agent Model Used
-Claude Opus 4.5
+(To be filled during implementation)
 
 ### File List
 
-**Modified:**
-- `resources/views/pdf/users-export.blade.php` - Updated colors from charcoal to olive green, added square logo
-- `resources/views/pdf/consultations-export.blade.php` - Updated colors from charcoal to olive green, added square logo
-- `resources/views/pdf/timelines-export.blade.php` - Updated colors from charcoal to olive green, added square logo
-- `resources/views/pdf/monthly-report.blade.php` - Updated colors from charcoal to olive green, added square logo (header + cover page)
-- `app/Services/MonthlyReportService.php` - Updated chart colors for pie and line charts
-- `resources/views/livewire/admin/reports/monthly-report.blade.php` - Updated inline color styles for TOC badges
-- `tests/Feature/Admin/PdfBrandColorsTest.php` - Updated tests to check for new olive green colors instead of old charcoal
+**To be modified:**
+- `resources/views/pdf/users-export.blade.php`
+- `resources/views/pdf/consultations-export.blade.php`
+- `resources/views/pdf/timelines-export.blade.php`
+- `resources/views/pdf/monthly-report.blade.php`
+- `app/Services/MonthlyReportService.php`
+- `resources/views/livewire/admin/reports/monthly-report.blade.php`
+- `tests/Feature/Admin/PdfBrandColorsTest.php`
 
 ### Change Log
 
-| Date | Change | Reason |
-|------|--------|--------|
-| 2026-01-04 | Updated all PDF templates with olive green colors | Story 12.5 requirement |
-| 2026-01-04 | Added square logo to all PDF headers | Story 12.5 requirement |
-| 2026-01-04 | Updated chart colors in MonthlyReportService | Story 12.5 AC5 |
-| 2026-01-04 | Updated Livewire component inline colors | Consistency with PDF changes |
-| 2026-01-04 | Updated PdfBrandColorsTest to verify new colors | Tests should validate current state |
-
-### Debug Log References
-None - Implementation completed without issues
+| Date | Change |
+|------|--------|
+| 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
 
 ### Completion Notes
-- All PDF templates updated with olive green palette (`#8AB357` primary, `#A5C87A` accent)
-- Square logo (50x50px) added to all PDF headers using `public_path('images/logo.png')`
-- Monthly report cover page uses larger logo (100x100px)
-- Chart colors in MonthlyReportService updated for pie and line charts
-- All 76 related tests pass (6 PDF color tests + 70 export tests)
-- Print preview and grayscale testing should be done manually by QA
+(To be filled during implementation)
diff --git a/docs/stories/story-12.6-documentation-update.md b/docs/stories/story-12.6-documentation-update.md
index 0099a6e..707c43f 100644
--- a/docs/stories/story-12.6-documentation-update.md
+++ b/docs/stories/story-12.6-documentation-update.md
@@ -1,193 +1,168 @@
-# Story 12.6: Brand Documentation and Cleanup
+# Story 12.6: Brand Documentation Update - Dark Charcoal & Warm Gold
 
 ## Story
 
-**As a** developer/designer
-**I want to** update brand documentation to reflect the new logo and olive green color scheme
-**So that** future development maintains consistent branding
+**As a** developer
+**I want to** update all brand documentation to reflect the new dark charcoal and warm gold color palette
+**So that** documentation accurately represents the current brand identity
 
 ## Acceptance Criteria
 
-### AC1: Brand Guide Updated
+### AC1: Update `docs/brand.md`
 
-**Given** `docs/brand.md` contains old color palette and logo description
-**When** I update the document
-**Then** it reflects the new branding:
+**Given** the brand documentation references old colors
+**When** I update the file
+**Then** the following sections are updated:
+- Color palette section with new hex values
+- Color usage guidelines
+- Any color swatches or examples
 
-**Updated Color Palette:**
+**New Color Palette:**
 
-| Color | Hex Code | Usage |
-|-------|----------|-------|
-| Olive Green | `#8AB357` | Primary brand color, backgrounds, accents |
-| Darker Olive | `#7AA347` | Hover states |
-| Dark Olive | `#6A9337` | Active states, headings |
-| Light Olive | `#A5C87A` | Secondary backgrounds, borders |
-| Pale Olive | `#C5D9A5` | Subtle backgrounds |
-| Off-White | `#E8E4DC` | Light backgrounds |
-| Deep Black | `#1A1A1A` | Text, headings |
+| Color Name | Hex | Usage |
+|------------|-----|-------|
+| Dark Charcoal | `#1B1D1A` | Header/Footer backgrounds |
+| Warm Gold | `#A68966` | CTA buttons, links, accents |
+| Warm Cream | `#F4F1EA` | Main page background |
+| Forest Green | `#2D322A` | Headings, body text |
+| Pure White | `#FFFFFF` | Card backgrounds |
+| Olive Green | `#4A5D23` | Active states |
+| Gold Hover | `#8A7555` | Button hover states |
+| Gold Light | `#C4A882` | Light accents |
 
-**Updated Logo Description:**
-- Square format featuring Palestinian tatreez (embroidery) patterns
-- Central botanical/olive motif
-- "LIBRA FOR RIGHTS" text integrated into design
-- Palestinian flag accent
-- Cultural heritage elements
+### AC2: Update `CLAUDE.md`
 
-### AC2: Logo Generation Instructions Updated
+**Given** CLAUDE.md contains design requirements with old colors
+**When** I update the file
+**Then** the Design Requirements section reflects new palette:
+- Update color scheme description
+- Update hex values
+- Maintain bilingual requirement notes
 
-**Given** `docs/logo-generation-instructions.md` describes horizontal logo generation
-**When** I update the document
-**Then** it reflects square logo format:
-- Update dimensions to square format
-- Update file naming conventions
-- Remove references to horizontal aspect ratio
-- Update tool instructions for square export
-
-### AC3: CLAUDE.md Updated
-
-**Given** `CLAUDE.md` contains color scheme reference
-**When** I review and update if needed
-**Then** the design requirements section reflects:
-- New olive green color palette
-- Square logo format
-- Palestinian tatreez design elements
-
-### AC4: Architecture Documentation Updated
+### AC3: Update `docs/architecture.md` (if applicable)
 
 **Given** architecture docs may reference brand colors
-**When** I review architecture documentation
-**Then** any color references are updated to olive palette
+**When** I review the file
+**Then** any color references are updated to new palette
 
-### AC5: Old Logo Files Archived/Removed
+### AC4: Update `docs/prd.md` (if applicable)
 
-**Given** old SVG logo files exist in the repository
-**When** documentation is complete
-**Then** old files are handled appropriately:
-- `public/images/logo.svg` - Remove or archive
-- `public/images/logo-reversed.svg` - Remove or archive
-- `public/images/logo-mono.svg` - Remove or archive
-- `public/favicon.svg` - Remove or archive
+**Given** PRD may reference brand colors
+**When** I review the file
+**Then** any color references are updated to new palette
 
-**Note:** Keep git history for reference; no need to purge from history
+### AC5: Update Test Color Assertions
 
-### AC6: Logo Folder Cleanup
-
-**Given** logo files were generated in `logo/` folder
-**When** deployment is complete
-**Then** the `logo/` folder is removed (files moved to `public/`)
-
-### AC7: README Updated (if applicable)
-
-**Given** README may contain branding information
-**When** I review README.md
-**Then** any visual/branding references are current
-
-### AC8: Test Assertions Updated
-
-**Given** tests may contain color value assertions
+**Given** tests may assert specific color values
 **When** I review test files
-**Then** color assertions use new olive palette values:
-- `AccessibilityComplianceTest.php`
-- Any component tests with color assertions
-- Email template tests
-- PDF template tests
+**Then** color assertions are updated:
+- `tests/Feature/Admin/PdfBrandColorsTest.php`
+- Any other tests checking brand colors
+
+### AC6: Review and Update Code Comments
+
+**Given** code comments may reference old color names
+**When** I review key files
+**Then** comments are updated:
+- `resources/css/app.css` - CSS comments
+- Any inline style comments in Blade files
+
+### AC7: Update Logo Generation Instructions (if exists)
+
+**Given** `docs/logo-generation-instructions.md` may exist
+**When** I review the file
+**Then** any color references match new palette
 
 ## Technical Notes
 
-### Files to Update
+### Files to Review/Modify
 
 **Documentation:**
-- `docs/brand.md` - Full brand guide update
-- `docs/logo-generation-instructions.md` - Update for square format
-- `CLAUDE.md` - Update design requirements section
+- `docs/brand.md` - Primary brand documentation
+- `CLAUDE.md` - Project instructions
+- `docs/architecture.md` - Architecture documentation
+- `docs/prd.md` - Product requirements
 
-**Tests to Review:**
-- `tests/Feature/AccessibilityComplianceTest.php`
-- `tests/Feature/Components/` - Any color assertions
-- `tests/Feature/Mail/EmailTemplateColorsTest.php`
+**Tests:**
 - `tests/Feature/Admin/PdfBrandColorsTest.php`
+- Any other brand color tests
 
-### New Brand Guide Content
+**Code Comments:**
+- `resources/css/app.css`
+
+### Color Reference Quick Sheet
+
+```
+Primary Colors:
+- Dark Charcoal: #1B1D1A (header/footer bg)
+- Warm Gold: #A68966 (CTA, links)
+- Warm Cream: #F4F1EA (page background)
+- Forest Green: #2D322A (text)
+- Pure White: #FFFFFF (cards)
+- Olive Green: #4A5D23 (active states)
+
+Variants:
+- Gold Hover: #8A7555
+- Gold Light: #C4A882
+- Olive Hover: #5A7030
+- Primary Light: #2D322A
+```
+
+### CLAUDE.md Design Requirements Update
+
+Replace the existing color scheme section with:
 
 ```markdown
-## Color Palette
-
-| Color | Hex Code | Usage |
-|-------|----------|-------|
-| Olive Green | `#8AB357` | Primary brand color |
-| Darker Olive | `#7AA347` | Hover states |
-| Dark Olive | `#6A9337` | Active states |
-| Light Olive | `#A5C87A` | Secondary accents |
-| Pale Olive | `#C5D9A5` | Subtle backgrounds |
-| Off-White | `#E8E4DC` | Light backgrounds |
-| Deep Black | `#1A1A1A` | Text, headings |
-
-## Logo
-
-### Description
-The logo features a square design incorporating Palestinian tatreez (traditional embroidery)
-patterns with a central botanical/olive motif. The design represents:
-- **Tatreez Patterns:** Palestinian cultural heritage and identity
-- **Olive Branch:** Peace, dignity, and connection to the land
-- **"LIBRA FOR RIGHTS":** Organization name and mission
-- **Palestinian Flag:** National identity accent
-
-### Logo Style
-- Square format
-- Traditional embroidery-inspired patterns
-- Botanical/organic central element
-- Deep black and olive green color scheme
-- Cultural authenticity with modern presentation
-```
-
-### Files to Remove
-
-```bash
-# Old logo files to remove after verification
-rm public/images/logo.svg
-rm public/images/logo-reversed.svg
-rm public/images/logo-mono.svg
-rm public/favicon.svg
-
-# Temporary logo folder to remove
-rm -rf logo/
-```
-
-### Test Color Value Updates
-
-```php
-// Old assertions
-$this->assertStringContainsString('#4A4A42', $content);
-$this->assertStringContainsString('#C9C4BA', $content);
-
-// New assertions
-$this->assertStringContainsString('#8AB357', $content);
-$this->assertStringContainsString('#A5C87A', $content);
+- **Color scheme:**
+  - Dark Charcoal (#1B1D1A) - Header/Footer backgrounds
+  - Warm Gold (#A68966) - CTA buttons, links, accents
+  - Warm Cream (#F4F1EA) - Main page background
+  - Forest Green (#2D322A) - Headings, body text
+  - Pure White (#FFFFFF) - Card backgrounds
+  - Olive Green (#4A5D23) - Active states
 ```
 
 ## Dev Checklist
 
-- [ ] Update `docs/brand.md` with new color palette
-- [ ] Update `docs/brand.md` with new logo description
-- [ ] Update `docs/logo-generation-instructions.md` for square format
-- [ ] Review and update `CLAUDE.md` design requirements
-- [ ] Review architecture documentation for color references
-- [ ] Update `AccessibilityComplianceTest.php` color assertions
-- [ ] Update `EmailTemplateColorsTest.php` color assertions
-- [ ] Update `PdfBrandColorsTest.php` color assertions
-- [ ] Review and update any other test color assertions
-- [ ] Remove old SVG logo files from `public/images/`
-- [ ] Remove old `public/favicon.svg`
-- [ ] Remove temporary `logo/` folder
-- [ ] Verify all tests pass with new color values
-- [ ] Final visual review of documentation
+- [ ] Update `docs/brand.md` color palette section
+- [ ] Update `docs/brand.md` color usage guidelines
+- [ ] Update `CLAUDE.md` Design Requirements section
+- [ ] Review `docs/architecture.md` for color references
+- [ ] Review `docs/prd.md` for color references
+- [ ] Update `PdfBrandColorsTest.php` assertions
+- [ ] Review other test files for color assertions
+- [ ] Update CSS comments in `app.css`
+- [ ] Review `docs/logo-generation-instructions.md` if exists
+- [ ] Final review of all documentation for consistency
 
 ## Estimation
 
 **Complexity:** Low
-**Risk:** Low - Documentation and cleanup tasks
+**Risk:** Low - Documentation only, no code changes
 
 ## Dependencies
 
-- All other Epic 12 stories should be completed before final cleanup
-- This story should be completed last in the epic
+- Stories 12.2, 12.3, 12.4, 12.5 must be completed first
+- New colors must be implemented and verified before documenting
+
+---
+
+## Dev Agent Record
+
+### Status
+Not Started - Blocked (waiting for Stories 12.2-12.5 completion)
+
+### Agent Model Used
+(To be filled during implementation)
+
+### File List
+(To be filled during implementation)
+
+### Change Log
+
+| Date | Change |
+|------|--------|
+| 2026-01-04 | Story created for documenting new Dark Charcoal & Warm Gold palette |
+
+### Completion Notes
+(To be filled during implementation)