# 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 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 current colors
**When** I update the stylesheet
**Then** the following changes are applied:

| Element | New Color | Hex |
|---------|-----------|-----|
| Links (`a`) | Warm Gold | `#A68966` |
| Headings (h1, h2, h3) | Forest Green | `#2D322A` |
| Header background | Dark Forest Green | `#2D3624` |
| Footer links | Warm Gold | `#A68966` |
| Primary button | Warm Gold bg, White text | `#A68966` / `#FFFFFF` |
| Table headers | Dark Forest Green bg, White text | `#2D3624` |
| 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 Dark Forest Green (`#2D3624`)
- 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 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: 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 Gold Light (`#C4A882`)

### AC6: All Email Templates Tested

**Given** the application sends various email types
**When** I test each email template
**Then** colors display correctly:
- Welcome email
- Booking submitted confirmation
- Booking approved/rejected
- Consultation reminders (24h, 2h)
- Timeline update notification
- Password reset
- Guest booking notifications
- Admin notifications

### 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)

### AC8: 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
/* New Color Values */
#2D3624  /* Dark Forest Green - 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

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

### CSS Updates Example

```css
/* Header */
.header {
    background-color: #2D3624;
}

/* 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: #2D3624;
    color: #FFFFFF;
}

/* Body */
body {
    background-color: #F4F1EA;
    color: #2D322A;
}
```

## Dev Checklist

- [x] Update `default.css` header background color to `#2D3624`
- [x] Update `default.css` link colors to `#A68966`
- [x] Update `default.css` heading colors to `#2D322A`
- [x] Update `default.css` button colors (`.button-primary`) to `#A68966`
- [x] Update `default.css` table header colors to `#2D3624`
- [x] Update `default.css` panel border color to `#C4A882`
- [x] Update `default.css` footer link colors to `#A68966`
- [x] Update `default.css` body background to `#F4F1EA`
- [x] Update `header.blade.php` - inline styles
- [x] Update `footer.blade.php` - inline styles
- [x] Review `button.blade.php` for inline styles (no inline styles present - uses CSS classes)
- [x] Review `panel.blade.php` for inline styles (no inline styles present - uses CSS classes)
- [ ] Test Welcome email appearance (manual)
- [ ] Test Booking emails appearance (manual)
- [ ] Test Reminder emails appearance (manual)
- [ ] Test Timeline update email appearance (manual)
- [ ] Test Password reset email (manual)
- [ ] Test Guest booking emails (manual)
- [ ] Verify RTL email layout (Arabic) (manual)
- [ ] Test in Gmail (manual)
- [ ] Test in Outlook (manual)
- [ ] Test in Apple Mail (manual)

## Estimation

**Complexity:** Low-Medium
**Risk:** Low - Email styling is isolated from main app

## Dependencies

- Story 12.1 (Logo Deployment) - Completed
- Story 12.2 (Core CSS) should be completed for color reference consistency

---

## Dev Agent Record

### Status
Ready for Review

### Agent Model Used
Claude Opus 4.5 (claude-opus-4-5-20251101)

### File List

| File | Action |
|------|--------|
| `resources/views/vendor/mail/html/themes/default.css` | Modified - Updated all colors to new Dark Charcoal & Warm Gold palette |
| `resources/views/vendor/mail/html/header.blade.php` | Modified - Updated inline background color to #2D3624 |
| `resources/views/vendor/mail/html/footer.blade.php` | Modified - Updated inline text color to #2D322A, link color to #A68966 |
| `resources/views/vendor/mail/html/button.blade.php` | Reviewed - No changes needed, uses CSS classes |
| `resources/views/vendor/mail/html/panel.blade.php` | Reviewed - No changes needed, uses CSS classes |
| `resources/views/vendor/mail/html/layout.blade.php` | Reviewed - No changes needed, uses CSS classes |
| `tests/Feature/Mail/EmailTemplateColorsTest.php` | Modified - Updated test assertions for new color palette |

### Change Log

| Date | Change |
|------|--------|
| 2026-01-04 | Story updated with new Dark Charcoal & Warm Gold palette |
| 2026-01-04 | Implementation complete - all CSS and blade template colors updated |

### Completion Notes
- All email template colors updated to the new Dark Charcoal & Warm Gold palette
- CSS updates in default.css: body background (#F4F1EA), body text (#2D322A), links (#A68966), headings (#2D322A), header bg (#2D3624), footer text (#2D322A), footer links (#A68966), table headers (#2D3624 bg, #FFFFFF text), buttons (#A68966 bg, #FFFFFF text), panel borders (#C4A882)
- Header.blade.php: Updated inline background-color to #2D3624
- Footer.blade.php: Updated inline text colors to #2D322A and link colors to #A68966
- Button.blade.php and panel.blade.php: No inline color styles present - rely on CSS classes which were updated
- Layout.blade.php: No color styles present - relies on CSS classes
- All 128 mail-related tests pass
- EmailTemplateColorsTest.php updated with 20 tests verifying new color palette
- Manual testing in email clients still required (marked as manual in checklist)
