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