generated logo and a new epic with stories for logo implimintation and color changing

docs/stories/epic-12-branding-refresh.md

@@ -0,0 +1,135 @@
+# Epic 12: Branding Refresh - Logo and Color Scheme Update
+
+## 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.
+
+## 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)
+- **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.
+
+### Enhancement Details
+
+**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)
+
+**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) |
+
+**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
+- 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`
+
+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
+**File:** `story-12.2-core-css-theme-update.md`
+
+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.
+
+### Story 12.3: Blade Component Color Migration
+**File:** `story-12.3-blade-component-color-migration.md`
+
+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.
+
+### Story 12.4: Email Template Color and Logo Update
+**File:** `story-12.4-email-template-color-update.md`
+
+Update email templates to use new olive green colors and square logo. Includes theme CSS, header/footer components, button styles, and all notification emails.
+
+### Story 12.5: PDF Template Color and Logo Update
+**File:** `story-12.5-pdf-template-color-update.md`
+
+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.
+
+### Story 12.6: Brand Documentation and Cleanup
+**File:** `story-12.6-documentation-update.md`
+
+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.
+
+## Compatibility Requirements
+
+- [x] Existing APIs remain unchanged
+- [x] Database schema changes are backward compatible (N/A - no DB changes)
+- [x] UI changes follow existing patterns
+- [x] Performance impact is minimal
+
+## Risk Mitigation
+
+- **Primary Risk:** Color changes may affect accessibility (contrast ratios)
+- **Mitigation:** Test all color combinations for WCAG AA compliance; adjust shades if needed
+- **Rollback Plan:** Git revert to previous commit; old logo files preserved in git history
+
+## Definition of Done
+
+- [ ] All stories completed with acceptance criteria met
+- [ ] New logo displays correctly across all pages and devices
+- [ ] Color scheme is consistent throughout the application
+- [ ] Brand documentation is updated
+- [ ] No regression in existing features
+- [ ] Visual QA completed on major pages
+
+## 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 */
+
+/* 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 */
+```
+
+## Dependencies
+
+- Logo files already generated in `logo/` folder
+- No external dependencies required

docs/stories/story-12.1-logo-asset-deployment.md

@@ -0,0 +1,190 @@
+# Story 12.1: Logo Asset Deployment and CSS Layout Updates
+
+## Story
+
+**As a** developer
+**I want to** deploy the new square logo with Palestinian tatreez patterns and update CSS layouts
+**So that** the application displays the new brand identity correctly throughout the website
+
+## Acceptance Criteria
+
+### AC1: Logo Files Deployed to Public Directory
+
+**Given** logo files have been generated in the `logo/` folder
+**When** I deploy them to the public directory
+**Then** the following files are placed correctly:
+
+| Source File | Destination | Purpose |
+|-------------|-------------|---------|
+| `logo/favicon.ico` | `public/favicon.ico` | Browser tab icon |
+| `logo/favicon-16x16.png` | `public/favicon-16x16.png` | Small favicon |
+| `logo/favicon-32x32.png` | `public/favicon-32x32.png` | Standard favicon |
+| `logo/favicon-48x48.png` | `public/favicon-48x48.png` | Large favicon |
+| `logo/apple-touch-icon.png` | `public/apple-touch-icon.png` | iOS home screen |
+| `logo/android-chrome-192x192.png` | `public/android-chrome-192x192.png` | Android home screen |
+| `logo/android-chrome-512x512.png` | `public/android-chrome-512x512.png` | Android splash |
+| `logo/logo-square.png` | `public/images/logo.png` | Main logo |
+| `logo/logo-email.png` | `public/images/logo-email.png` | Email templates |
+
+### AC2: Navigation Component Updated for Square Logo
+
+**Given** the navigation uses a horizontal logo layout
+**When** I update `resources/views/components/navigation.blade.php`
+**Then** the following changes are applied:
+- Logo container adjusted for square aspect ratio
+- Logo height set to appropriate size (e.g., 48px-56px)
+- Width set to auto to maintain aspect ratio
+- Responsive sizing for mobile views
+- Proper alignment with navigation items
+
+### AC3: Footer Component Updated for Square Logo
+
+**Given** the footer uses the logo
+**When** I update `resources/views/components/footer.blade.php`
+**Then** the following changes are applied:
+- Logo container adjusted for square format
+- Appropriate sizing for footer context
+- Proper spacing and alignment
+
+### AC4: Logo Blade Component Updated
+
+**Given** `resources/views/components/logo.blade.php` references logo files
+**When** I update the component
+**Then** it:
+- Uses the new PNG logo as the primary source
+- Removes references to old horizontal SVG
+- Supports size variants via props (sm, md, lg)
+- Maintains alt text "LIBRA for Rights"
+
+### AC5: Auth Pages Logo Updated
+
+**Given** auth pages (login, password reset, etc.) display the logo
+**When** I update auth page layouts
+**Then** the square logo displays correctly:
+- Centered on auth pages
+- Appropriate size for auth context
+- Proper spacing above forms
+
+### AC6: Favicon Displays in Browser Tab
+
+**Given** the new favicon files are deployed
+**When** I view the application in a browser
+**Then** the botanical design icon appears in:
+- Browser tab
+- Bookmarks
+- Browser history
+
+### AC7: Mobile App Icons Updated
+
+**Given** mobile manifest files reference app icons
+**When** I update `public/manifest.json` (if exists) or meta tags
+**Then** mobile icons reference the new files:
+- `apple-touch-icon.png` for iOS
+- `android-chrome-*.png` for Android
+
+### AC8: Logo Displays Correctly on All Breakpoints
+
+**Given** the application is responsive
+**When** I test the logo on different screen sizes
+**Then** it displays correctly:
+- Desktop: Full size logo in navbar
+- Tablet: Appropriately scaled
+- Mobile: Compact size that fits mobile nav
+
+### AC9: RTL Layout Support
+
+**Given** the application supports RTL (Arabic)
+**When** viewing in Arabic mode
+**Then** the logo displays correctly without mirroring
+
+### AC10: Old Logo Files Removed
+
+**Given** old SVG logo files exist
+**When** deployment is complete
+**Then** the following old files are removed or archived:
+- `public/images/logo.svg`
+- `public/images/logo-reversed.svg`
+- `public/images/logo-mono.svg`
+- `public/favicon.svg`
+
+## Technical Notes
+
+### Files to Modify
+
+**Components:**
+- `resources/views/components/navigation.blade.php`
+- `resources/views/components/footer.blade.php`
+- `resources/views/components/logo.blade.php`
+- `resources/views/components/app-logo.blade.php`
+- `resources/views/components/app-logo-icon.blade.php`
+
+**Layouts:**
+- `resources/views/components/layouts/public.blade.php` (head section for favicon meta)
+- `resources/views/components/layouts/app.blade.php` (if applicable)
+
+**Auth Views (check for logo usage):**
+- `resources/views/livewire/pages/auth/login.blade.php`
+- `resources/views/livewire/pages/auth/forgot-password.blade.php`
+- `resources/views/livewire/pages/auth/reset-password.blade.php`
+
+### Logo Sizing Guidelines
+
+| Context | Recommended Size |
+|---------|------------------|
+| Navbar (Desktop) | 48-56px height |
+| Navbar (Mobile) | 40px height |
+| Footer | 64-80px height |
+| Auth Pages | 80-100px height |
+| Email Header | 60px height |
+
+### CSS Updates for Square Logo
+
+```css
+/* Example navbar logo styling */
+.logo-container {
+    height: 48px;
+    width: 48px;
+}
+
+.logo-container img {
+    height: 100%;
+    width: auto;
+    object-fit: contain;
+}
+
+/* Mobile */
+@media (max-width: 768px) {
+    .logo-container {
+        height: 40px;
+        width: 40px;
+    }
+}
+```
+
+## Dev Checklist
+
+- [ ] Copy logo files from `logo/` to `public/` directories
+- [ ] Update `navigation.blade.php` for square logo
+- [ ] Update `footer.blade.php` for square logo
+- [ ] Update `logo.blade.php` component
+- [ ] Update `app-logo.blade.php` component
+- [ ] Update `app-logo-icon.blade.php` component
+- [ ] Update favicon meta tags in layout head
+- [ ] Update auth page logo displays
+- [ ] Test favicon in browser tab
+- [ ] Test logo on desktop viewport
+- [ ] Test logo on tablet viewport
+- [ ] Test logo on mobile viewport
+- [ ] Test RTL layout (Arabic)
+- [ ] Remove old SVG logo files
+- [ ] Run existing tests to ensure no regressions
+
+## Estimation
+
+**Complexity:** Medium
+**Risk:** Low - Primarily asset replacement and CSS adjustments
+
+## Dependencies
+
+- Logo files already generated in `logo/` folder
+- No dependencies on other Epic 12 stories (can run in parallel with 12.2)

docs/stories/story-12.2-core-css-theme-update.md

@@ -0,0 +1,194 @@
+# Story 12.2: Core CSS Theme Update - Olive Green 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
+
+## Acceptance Criteria
+
+### AC1: Update Color Variables in `resources/css/app.css`
+
+**Given** the current theme uses Charcoal/Warm Gray 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 |
+
+### AC2: Add Olive Green Color Variants
+
+**Given** the new palette needs hover and active states
+**When** I update the theme
+**Then** these additional variants are defined:
+
+| 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 |
+
+### 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
+**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
+- Hover states updated accordingly
+
+### AC5: 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
+
+### AC6: 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)
+
+### AC7: Status Colors Unchanged
+
+**Given** status colors serve functional purposes
+**When** theme is updated
+**Then** these remain unchanged:
+- `--color-success: #27AE60`
+- `--color-danger: #E74C3C`
+- `--color-warning: #F39C12`
+
+### AC8: 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
+
+### AC9: 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
+
+### AC10: Build Succeeds
+
+**Given** CSS changes are made
+**When** I run `npm run build`
+**Then** the build completes successfully without errors
+
+## Technical Notes
+
+### Files to Modify
+- `resources/css/app.css` - Main theme file
+
+### 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) |
+
+### 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)
+
+**Note:** If Off-White on Olive Green doesn't meet 4.5:1, use Deep Black text on olive backgrounds instead.
+
+### 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;
+
+    /* Secondary/Accent */
+    --color-accent: #A5C87A;
+    --color-accent-light: #C5D9A5;
+    --color-accent-content: #A5C87A;
+    --color-accent-foreground: #1A1A1A;
+
+    /* Neutrals (unchanged) */
+    --color-background: #E8E4DC;
+    --color-text: #1A1A1A;
+
+    /* Backward compatibility */
+    --color-charcoal: var(--color-primary);
+    --color-warm-gray: var(--color-accent);
+    --color-off-white: var(--color-background);
+
+    /* Status colors (unchanged) */
+    --color-success: #27AE60;
+    --color-danger: #E74C3C;
+    --color-warning: #F39C12;
+}
+```
+
+## Dev Checklist
+
+- [ ] Update `@theme` block with new olive green values
+- [ ] Add olive green variants (hover, dark, light)
+- [ ] Update backward-compatible aliases
+- [ ] Update `.btn-primary` styles
+- [ ] Update `.btn-secondary` styles
+- [ ] Update form focus states
+- [ ] Update link colors
+- [ ] Update `.prose-brand` class
+- [ ] Update skip-link focus styles
+- [ ] Update timeline-dot color
+- [ ] Update skeleton loader color
+- [ ] Verify status colors unchanged
+- [ ] Run contrast checker on all combinations
+- [ ] Run `npm run build` successfully
+- [ ] Visual test in browser
+
+## Estimation
+
+**Complexity:** Low-Medium
+**Risk:** Low - CSS-only changes with aliases for backward compatibility
+
+## Dependencies
+
+- Can run in parallel with Story 12.1 (Logo Deployment)

docs/stories/story-12.3-blade-component-color-migration.md

@@ -0,0 +1,211 @@
+# Story 12.3: Blade Component Color Migration - Olive Green
+
+## 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
+
+## Acceptance Criteria
+
+### AC1: Navigation Component Updated
+
+**Given** `resources/views/components/navigation.blade.php` uses charcoal 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
+
+### AC2: Footer Component Updated
+
+**Given** `resources/views/components/footer.blade.php` uses charcoal 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
+- Social icons: Appropriate contrast colors
+
+### AC3: Card Components Updated
+
+**Given** card components use old 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
+
+### AC4: Stat Card Component Updated
+
+**Given** `resources/views/components/ui/stat-card.blade.php` uses old colors
+**When** I update the component
+**Then** accent colors use olive palette:
+- Icon backgrounds: Light Olive
+- Value highlights: Olive Green
+- Borders: Light Olive
+
+### AC5: Spinner Component Updated
+
+**Given** `resources/views/components/spinner.blade.php` uses old colors
+**When** I update the component
+**Then** spinner uses Olive Green
+
+### AC6: Toast Component Updated
+
+**Given** `resources/views/components/toast.blade.php` uses old colors
+**When** I update the component
+**Then** default toast uses olive palette (status colors remain unchanged)
+
+### AC7: Language Toggle Updated
+
+**Given** `resources/views/components/language-toggle.blade.php` uses old colors
+**When** I update the component
+**Then** active/inactive states use olive colors
+
+### AC8: Public Pages Updated
+
+**Given** public pages use old accent colors
+**When** I update the following pages
+**Then** they use the new olive 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`
+
+### AC9: Post Pages Updated
+
+**Given** post display pages use old colors
+**When** I update the following pages
+**Then** they use the new olive palette:
+- `resources/views/livewire/pages/posts/index.blade.php`
+- `resources/views/livewire/pages/posts/show.blade.php`
+
+### AC10: Admin Dashboard Components Updated
+
+**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
+
+### AC11: Client Dashboard Components Updated
+
+**Given** client dashboard uses accent colors
+**When** I update client components
+**Then** they use olive palette consistently
+
+### AC12: Public Layout Updated
+
+**Given** `resources/views/components/layouts/public.blade.php` uses old colors
+**When** I update the layout
+**Then** it uses the new olive palette
+
+### AC13: RTL Layout Integrity
+
+**Given** the application supports RTL (Arabic)
+**When** colors are updated
+**Then** RTL layout displays correctly with new olive colors
+
+### AC14: Responsive Appearance
+
+**Given** the application is responsive
+**When** colors are updated
+**Then** all breakpoints display correctly (mobile, tablet, desktop)
+
+## Technical Notes
+
+### Files to Modify
+
+**Components:**
+- `resources/views/components/navigation.blade.php`
+- `resources/views/components/footer.blade.php`
+- `resources/views/components/logo.blade.php`
+- `resources/views/components/language-toggle.blade.php`
+- `resources/views/components/spinner.blade.php`
+- `resources/views/components/toast.blade.php`
+- `resources/views/components/ui/card.blade.php`
+- `resources/views/components/ui/stat-card.blade.php`
+- `resources/views/components/layouts/public.blade.php`
+
+**Public Pages:**
+- `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`
+
+**Post Pages:**
+- `resources/views/livewire/pages/posts/index.blade.php`
+- `resources/views/livewire/pages/posts/show.blade.php`
+
+**Admin Pages (review for color usage):**
+- `resources/views/livewire/admin/` directory
+
+**Client Pages (review for color usage):**
+- `resources/views/livewire/client/` directory
+
+### 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` |
+
+### Visual Hierarchy with Olive Green
+
+**Primary Actions:**
+- Background: Olive Green (`#8AB357`)
+- Text: Off-White (`#E8E4DC`) or Deep Black depending on contrast
+
+**Secondary Actions:**
+- Border: Light Olive (`#A5C87A`)
+- Text: Olive Green or Deep Black
+
+**Highlights/Accents:**
+- Background: Light Olive (`#A5C87A`) or Pale Olive (`#C5D9A5`)
+- Text: Deep Black for contrast
+
+## Dev Checklist
+
+- [ ] Update `navigation.blade.php`
+- [ ] Update `footer.blade.php`
+- [ ] Update `language-toggle.blade.php`
+- [ ] Update `spinner.blade.php`
+- [ ] Update `toast.blade.php`
+- [ ] Update `card.blade.php`
+- [ ] Update `stat-card.blade.php`
+- [ ] Update `public.blade.php` layout
+- [ ] Update `home.blade.php`
+- [ ] Update `booking.blade.php`
+- [ ] Update `terms.blade.php`
+- [ ] Update `privacy.blade.php`
+- [ ] Update `legal.blade.php`
+- [ ] Update `posts/index.blade.php`
+- [ ] Update `posts/show.blade.php`
+- [ ] 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
+
+## Dependencies
+
+- Story 12.2 (Core CSS Theme Update) must be completed first

docs/stories/story-12.4-email-template-color-update.md

@@ -0,0 +1,179 @@
+# Story 12.4: Email Template Color and Logo Update
+
+## 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
+
+## Acceptance Criteria
+
+### AC1: Email Theme CSS Updated
+
+**Given** `resources/views/vendor/mail/html/themes/default.css` uses charcoal/warm gray 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) |
+
+### 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
+
+### 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
+
+### 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`)
+
+### 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`)
+
+### 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
+
+**Given** the application sends various email types
+**When** I test each email template
+**Then** colors and logo display correctly:
+- Welcome email
+- Booking submitted confirmation
+- Booking approved/rejected
+- Consultation reminders (24h, 2h)
+- Timeline update notification
+- Password reset
+- Guest booking notifications
+- Admin notifications
+
+### AC8: 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
+
+**Given** emails are viewed in various clients
+**When** I test the templates
+**Then** they render correctly in:
+- Gmail (web and mobile)
+- Outlook (desktop and web)
+- Apple Mail
+- Mobile email apps
+
+## Technical Notes
+
+### Files to Modify
+
+**Theme CSS:**
+- `resources/views/vendor/mail/html/themes/default.css`
+
+**HTML Components:**
+- `resources/views/vendor/mail/html/header.blade.php`
+- `resources/views/vendor/mail/html/footer.blade.php`
+- `resources/views/vendor/mail/html/button.blade.php`
+- `resources/views/vendor/mail/html/panel.blade.php`
+- `resources/views/vendor/mail/html/layout.blade.php` (if contains colors)
+
+### 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;">
+```
+
+### Email-Safe Colors
+
+Email clients have limited CSS support. Ensure:
+- Use inline styles for critical colors
+- Test in major email clients
+- Maintain fallback background colors
+- Use web-safe colors where possible
+
+### Testing Emails
+
+Use Laravel's mail preview or Mailtrap to test:
+```bash
+# Preview emails in browser (if configured)
+php artisan serve
+# Visit mail preview routes
+```
+
+## Dev Checklist
+
+- [ ] Update `default.css` header background color
+- [ ] Update `default.css` link colors
+- [ ] Update `default.css` heading colors
+- [ ] Update `default.css` button colors (`.button-primary`)
+- [ ] Update `default.css` table header colors
+- [ ] Update `default.css` panel border color
+- [ ] Update `default.css` footer link colors
+- [ ] Update `header.blade.php` - inline styles and logo reference
+- [ ] Update `footer.blade.php` - inline styles
+- [ ] Review `button.blade.php` for inline styles
+- [ ] Review `panel.blade.php` for inline styles
+- [ ] Test Welcome email appearance
+- [ ] Test Booking emails appearance
+- [ ] Test Reminder emails appearance
+- [ ] Test Timeline update email appearance
+- [ ] Test Password reset email
+- [ ] Test Guest booking emails
+- [ ] Verify RTL email layout (Arabic)
+- [ ] Test in Gmail
+- [ ] Test in Outlook
+- [ ] Test in Apple Mail
+
+## Estimation
+
+**Complexity:** Low-Medium
+**Risk:** Low - Email styling is isolated from main app
+
+## Dependencies
+
+- Story 12.1 (Logo Deployment) must be completed for `logo-email.png`
+- Story 12.2 (Core CSS) should be completed for color reference consistency

docs/stories/story-12.5-pdf-template-color-update.md

@@ -0,0 +1,184 @@
+# Story 12.5: PDF Template Color and Logo Update
+
+## 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
+
+## Acceptance Criteria
+
+### AC1: Users Export PDF Updated
+
+**Given** `resources/views/pdf/users-export.blade.php` uses charcoal 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
+
+### AC2: Consultations Export PDF Updated
+
+**Given** `resources/views/pdf/consultations-export.blade.php` uses charcoal colors
+**When** I update the template
+**Then** colors match the new olive green palette:
+- Headers: Olive Green background
+- Status badges: Appropriate contrast colors
+- Table styling: Olive accents
+
+### AC3: Timelines Export PDF Updated
+
+**Given** `resources/views/pdf/timelines-export.blade.php` uses charcoal 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
+
+### AC4: Monthly Report PDF Updated
+
+**Given** `resources/views/pdf/monthly-report.blade.php` uses charcoal 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
+
+### 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
+
+### 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
+
+**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)
+- Sufficient contrast for all text
+- Consider adding subtle borders for light-colored sections
+
+### AC8: All PDF Exports Tested
+
+**Given** the admin can export various data types
+**When** I test each PDF export
+**Then** colors display correctly and documents are professional:
+- Users export
+- Consultations export
+- Timelines export
+- Monthly report
+
+## Technical Notes
+
+### Files to Modify
+
+**PDF Templates:**
+- `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`
+
+**Services:**
+- `app/Services/MonthlyReportService.php` (chart colors)
+
+**Livewire Components (review for inline PDF styles):**
+- `resources/views/livewire/admin/reports/monthly-report.blade.php`
+
+### 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` |
+
+### 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;">
+```
+
+### Chart Color Palette for Reports
+
+```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
+];
+```
+
+### Print Considerations
+
+- Olive Green (`#8AB357`) prints as medium gray - good contrast
+- Light Olive (`#A5C87A`) prints as light gray - use for 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
+
+- [ ] Update `users-export.blade.php` colors
+- [ ] Update `users-export.blade.php` logo
+- [ ] Update `consultations-export.blade.php` colors
+- [ ] Update `consultations-export.blade.php` logo
+- [ ] Update `timelines-export.blade.php` colors
+- [ ] Update `timelines-export.blade.php` logo
+- [ ] Update `monthly-report.blade.php` colors
+- [ ] Update `monthly-report.blade.php` logo
+- [ ] Update `MonthlyReportService.php` chart colors
+- [ ] Review `monthly-report.blade.php` Livewire component
+- [ ] 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
+
+## Estimation
+
+**Complexity:** Low-Medium
+**Risk:** Low - PDF templates are isolated
+
+## Dependencies
+
+- Story 12.1 (Logo Deployment) must be completed for logo files
+- Story 12.2 (Core CSS) should be completed for color reference consistency

docs/stories/story-12.6-documentation-update.md

@@ -0,0 +1,193 @@
+# Story 12.6: Brand Documentation and Cleanup
+
+## 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
+
+## Acceptance Criteria
+
+### AC1: Brand Guide Updated
+
+**Given** `docs/brand.md` contains old color palette and logo description
+**When** I update the document
+**Then** it reflects the new branding:
+
+**Updated 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 |
+
+**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: Logo Generation Instructions Updated
+
+**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
+
+**Given** architecture docs may reference brand colors
+**When** I review architecture documentation
+**Then** any color references are updated to olive palette
+
+### AC5: Old Logo Files Archived/Removed
+
+**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
+
+**Note:** Keep git history for reference; no need to purge from history
+
+### 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
+**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
+
+## Technical Notes
+
+### Files to Update
+
+**Documentation:**
+- `docs/brand.md` - Full brand guide update
+- `docs/logo-generation-instructions.md` - Update for square format
+- `CLAUDE.md` - Update design requirements section
+
+**Tests to Review:**
+- `tests/Feature/AccessibilityComplianceTest.php`
+- `tests/Feature/Components/` - Any color assertions
+- `tests/Feature/Mail/EmailTemplateColorsTest.php`
+- `tests/Feature/Admin/PdfBrandColorsTest.php`
+
+### New Brand Guide Content
+
+```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);
+```
+
+## 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
+
+## Estimation
+
+**Complexity:** Low
+**Risk:** Low - Documentation and cleanup tasks
+
+## Dependencies
+
+- All other Epic 12 stories should be completed before final cleanup
+- This story should be completed last in the epic