# Story 10.1: Core CSS Theme Update

## Story

**As a** developer
**I want to** update the Tailwind CSS theme color variables
**So that** the application uses the new LIBRA for Rights brand palette

## Acceptance Criteria

### AC1: Update Color Variables in `resources/css/app.css`

**Given** the current theme uses Navy Blue + Gold palette
**When** I update the `@theme` block
**Then** the following color mappings are applied:

| Old Variable | Old Hex | New Variable | New Hex |
|--------------|---------|--------------|---------|
| `--color-navy` | `#0A1F44` | `--color-primary` | `#4A4A42` (Charcoal) |
| `--color-gold` | `#D4AF37` | `--color-accent` | `#C9C4BA` (Warm Gray) |
| `--color-gold-light` | `#F4E4B8` | `--color-accent-light` | `#E8E4DC` (Off-White) |
| `--color-cream` | `#F9F7F4` | `--color-background` | `#E8E4DC` (Off-White) |
| `--color-charcoal` | `#2C3E50` | `--color-text` | `#1A1A1A` (Deep Black) |

### AC2: Maintain Backward Compatibility Aliases

**Given** existing components use `navy`, `gold`, `cream` class names
**When** the theme is updated
**Then** aliases are created so existing classes continue to work:
- `--color-navy` → points to `--color-primary` (Charcoal)
- `--color-gold` → points to `--color-accent` (Warm Gray)
- `--color-gold-light` → points to `--color-accent-light` (Off-White)
- `--color-cream` → points to `--color-background` (Off-White)
- `--color-charcoal` → points to `--color-text` (Deep Black)

### AC3: Update Semantic Aliases

**Given** semantic aliases exist for components
**When** theme is updated
**Then** these mappings are correct:
- `--color-primary` → `#4A4A42` (Charcoal)
- `--color-accent` → `#C9C4BA` (Warm Gray)
- `--color-accent-content` → `#C9C4BA` (Warm Gray)
- `--color-accent-foreground` → `#4A4A42` (Charcoal)
- `--color-background` → `#E8E4DC` (Off-White)
- `--color-text` → `#1A1A1A` (Deep Black)

### AC4: Update Button Styles

**Given** button classes use gold/navy colors
**When** theme is updated
**Then** `.btn-primary` and `.btn-secondary` use new palette:
- Primary: Charcoal background, Off-White text
- Secondary: Warm Gray border, Charcoal text
- Hover states updated accordingly

### AC5: Update Form Focus States

**Given** form inputs have gold focus rings
**When** theme is updated
**Then** focus states use Warm Gray:
- `focus:border-gold` → Warm Gray border
- `focus:ring-gold` → Warm Gray ring

### AC6: Update Prose Class

**Given** `.prose-navy` class exists for blog content
**When** theme is updated
**Then** rename to `.prose-brand` or update colors:
- Headings: Charcoal
- Links: Warm Gray
- Body: Deep Black

### 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 Charcoal (`#4A4A42`): ≥4.5:1 for body text
- Warm Gray (`#C9C4BA`) usage verified for sufficient contrast

## Technical Notes

### Files to Modify
- `resources/css/app.css` - Main theme file

### Color Reference (from `docs/brand.md`)
| Color | Hex | Usage |
|-------|-----|-------|
| Charcoal | `#4A4A42` | Primary backgrounds, text |
| Warm Gray | `#C9C4BA` | Secondary backgrounds, accents |
| Off-White | `#E8E4DC` | Light backgrounds |
| Deep Black | `#1A1A1A` | Logo artwork, headlines |

### Contrast Verification
Use WebAIM Contrast Checker or similar tool to verify:
- Deep Black on Off-White: ~12.5:1 (passes AAA)
- Off-White on Charcoal: ~4.8:1 (passes AA)
- Charcoal on Off-White: ~4.8:1 (passes AA)

## Dev Checklist

- [ ] Update `@theme` block with new color values
- [ ] Create backward-compatible aliases
- [ ] Update semantic aliases
- [ ] Update `.btn-primary` styles
- [ ] Update `.btn-secondary` styles
- [ ] Update form focus states (input, textarea, select, checkbox, radio)
- [ ] Update `.prose-navy` → `.prose-brand`
- [ ] 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 (both light and dark mode if applicable)

## Estimation

**Complexity:** Low
**Risk:** Low - CSS-only changes with aliases for backward compatibility