# 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

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

## Estimation

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

## Dependencies

- Epic 12 completed (brand colors defined)