# Story 13.1: Language Toggle Visibility Enhancement

## Story

**As a** user on authentication pages
**I want to** clearly see and interact with the language toggle
**So that** I can easily switch between Arabic and English

## Acceptance Criteria

### AC1: Update Light Variant Text Color

**Given** the language toggle has a `light` variant for light backgrounds
**When** viewed on auth pages (white/cream background)
**Then** the inactive language uses `text-primary` (Dark Forest Green #2D3624) instead of `text-body/70`

### AC2: Update Light Variant Hover State

**Given** the user hovers over an inactive language option
**When** the variant is `light`
**Then** the hover state uses:
- Text: `text-cta-hover` (Darker Gold #8A7555)
- Background: `bg-primary/10` (subtle dark background)

### AC3: Update Light Variant Separator Color

**Given** the separator `|` between languages
**When** the variant is `light`
**Then** it uses `text-primary/50` instead of `text-body/30` for better visibility

### AC4: Dark Variant Unchanged

**Given** the language toggle has a `dark` variant for dark backgrounds (navigation bar)
**When** viewed on the public navigation
**Then** the existing styling remains unchanged:
- Inactive: `text-off-white`
- Hover: `text-cta hover:bg-active-hover`
- Separator: `text-cta/50`

### AC5: Active State Unchanged

**Given** the currently active language
**When** displayed in either variant
**Then** it maintains the existing active styling:
- `bg-active text-white font-bold`

### AC6: Contrast Compliance

**Given** accessibility requirements
**When** the light variant is used on Warm Cream background (#F4F1EA)
**Then** the text contrast meets WCAG AA:
- Dark Forest Green (#2D3624) on Warm Cream (#F4F1EA): ≥4.5:1

## Technical Notes

### File to Modify
- `resources/views/components/language-toggle.blade.php`

### Current Implementation (Light Variant)
```php
'text-body/70 hover:text-body hover:bg-active-hover' => app()->getLocale() !== 'ar' && $variant === 'light',
```

### New Implementation (Light Variant)
```php
'text-primary hover:text-cta-hover hover:bg-primary/10' => app()->getLocale() !== 'ar' && $variant === 'light',
```

### Color Reference
| Element | Current | New |
|---------|---------|-----|
| Inactive Text | `text-body/70` (~70% opacity) | `text-primary` (100% Dark Forest Green) |
| Hover Text | `text-body` | `text-cta-hover` (Darker Gold) |
| Hover Background | `bg-active-hover` | `bg-primary/10` (subtle dark) |
| Separator | `text-body/30` | `text-primary/50` |

## Dev Checklist

- [x] Update Arabic link light variant classes
- [x] Update English link light variant classes
- [x] Update separator light variant class
- [x] Verify dark variant unchanged
- [x] Test on login page
- [x] Test on forgot-password page
- [x] Test RTL (Arabic) layout
- [x] Test LTR (English) layout
- [x] Verify contrast ratios

## Estimation

**Complexity:** Low
**Risk:** Low - Component-level CSS changes only

## Dependencies

- Epic 12 completed (brand colors defined)

---

## Dev Agent Record

### Status
Ready for Review

### Agent Model Used
Claude Opus 4.5

### File List
| File | Action |
|------|--------|
| `resources/views/components/language-toggle.blade.php` | Modified |
| `tests/Feature/Components/LanguageToggleTest.php` | Created |

### Change Log
- Updated light variant inactive text from `text-body/70` to `text-primary`
- Updated light variant hover text from `hover:text-body` to `hover:text-cta-hover`
- Updated light variant hover background from `hover:bg-active-hover` to `hover:bg-primary/10`
- Updated light variant separator from `text-body/30` to `text-primary/50`
- Dark variant styling preserved unchanged
- Active state styling preserved unchanged
- Created comprehensive test suite (12 tests, 30 assertions)

### Completion Notes
- All acceptance criteria implemented
- Light variant now uses Dark Forest Green (#2D3624) for inactive text - meets WCAG AA contrast on Warm Cream (#F4F1EA)
- Hover states use Darker Gold (#8A7555) for better visual feedback
- Separator visibility improved with 50% opacity primary color
- Dark variant and active states remain unchanged as specified