# Story 9.1: Color System Implementation

## Epic Reference
**Epic 9:** Design & Branding Implementation
**Epic File:** `docs/epics/epic-9-design-branding.md`

## Dependencies
- **Epic 1:** Base Tailwind/Flux setup must be complete (Tailwind CSS 4, Flux UI installed)

## User Story
As a **developer**,
I want **to implement the complete color palette as Tailwind CSS theme**,
So that **brand colors are consistently applied throughout the application**.

## Acceptance Criteria

### Primary Colors
- [ ] Dark Navy Blue: #0A1F44 (backgrounds, headers)
- [ ] Gold/Brass: #D4AF37 (accents, buttons, links)

### Supporting Colors
- [ ] Light Gold: #F4E4B8 (hover states)
- [ ] Off-White/Cream: #F9F7F4 (text, cards)
- [ ] Charcoal Gray: #2C3E50 (secondary text)
- [ ] Success Green: #27AE60 (approved status)
- [ ] Warning Red: #E74C3C (rejected, errors)
- [ ] Pending Yellow: #F39C12 (pending status)

### Implementation
- [ ] Custom Tailwind colors configured via @theme
- [ ] Color variables for easy maintenance
- [ ] Semantic color aliases (primary, accent, etc.)

### Dark Mode
- [ ] Dark mode is **deferred** to a future story
- [ ] Document that dark mode will require additional color mappings later

## Technical Notes

### Existing Code Context
The file `resources/css/app.css` already exists with:
- Tailwind and Flux CSS imports (PRESERVE these)
- Zinc color palette (can be REMOVED - not used in brand)
- Accent color variables using neutral-800 (REPLACE with brand colors)
- Flux field/label/control selectors (PRESERVE these)

### Merge Strategy
- Keep all `@import` statements at the top
- Keep `@source` directives
- Keep `@custom-variant dark` definition
- Replace the `@theme` block content with brand colors below
- Keep `@layer theme`, `@layer base`, and Flux selectors intact

### Color Implementation
```css
/* resources/css/app.css - REPLACE the @theme block with this content */
@theme {
  /* Keep existing font if needed, or update in typography story */
  --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;

  /* Primary Brand Colors */
  --color-navy: #0A1F44;
  --color-gold: #D4AF37;

  /* Supporting Colors */
  --color-gold-light: #F4E4B8;
  --color-cream: #F9F7F4;
  --color-charcoal: #2C3E50;

  /* Status Colors */
  --color-success: #27AE60;
  --color-danger: #E74C3C;
  --color-warning: #F39C12;

  /* Semantic Aliases - used by components */
  --color-primary: var(--color-navy);
  --color-accent: var(--color-gold);
  --color-accent-content: var(--color-gold);
  --color-accent-foreground: var(--color-navy);
  --color-background: var(--color-cream);
  --color-text: var(--color-charcoal);
}
```

**Note:** The `--color-accent-content` and `--color-accent-foreground` variables are used by Flux UI components and must be updated to use brand colors.

## Testing Requirements

### Build Verification
- [ ] Run `npm run build` - must complete without errors
- [ ] Verify CSS output contains the new color variables

### Utility Class Verification
Create a temporary test view or use browser dev tools to verify:
- [ ] `bg-navy` applies background color #0A1F44
- [ ] `text-gold` applies text color #D4AF37
- [ ] `bg-cream` applies background color #F9F7F4
- [ ] `text-charcoal` applies text color #2C3E50
- [ ] `bg-success` applies background color #27AE60
- [ ] `bg-danger` applies background color #E74C3C
- [ ] `bg-warning` applies background color #F39C12
- [ ] Semantic aliases work: `bg-primary`, `text-accent`, `bg-background`

### Regression Check
- [ ] Existing Flux UI components still render correctly
- [ ] No visual regressions on existing pages

## Definition of Done
- [ ] All colors defined in Tailwind @theme block
- [ ] Colors work with utility classes (bg-navy, text-gold, etc.)
- [ ] Semantic aliases configured (primary, accent, background, text)
- [ ] Dark mode explicitly documented as deferred
- [ ] Existing Flux UI styling preserved
- [ ] `npm run build` succeeds
- [ ] Manual verification of utility classes complete
- [ ] Code formatted with Pint

## Estimation
**Complexity:** Low | **Effort:** 2 hours
