fix(#262): resolve WCAG AA contrast violations across codebase

[ChristopherRotnes]

Summary

• Systematic audit (issue As a user I want all interactive elements to meet WCAG AA contrast so I can use the app confidently #262) found four categories of WCAG AA failures. All are fixed here with no visual regressions on dark mode — only dark accents get slightly darker on filled states.

Changes

1. --accent → --accent-active on filled backgrounds with white text
--accent (#ee2c80) as a background with color: #fff produces 3.95:1 — fails AA for normal text (requires 4.5:1). Replaced with --accent-active (#b5116a, ~6.45:1) in five locations:

• Home.jsx — CTA "Log" button
• MuscleMapConfirm.jsx — Today / Other day segmented pills + Save CTA
• Settings.jsx — Save display-name button
• Report.jsx — add-to-library (+) button in recommendations

2. --accent-soft override for light mode
--accent-soft: #ff7eb6 as text on --accent-bg-14 in light mode computes to ~1.77:1 (FAIL). Added --accent-soft: #b5116a to the [data-theme="g10"] block in carbon-tokens.css. Dark mode keeps #ff7eb6 (~7.7:1 on dark bg). Fixes AccentChip and all accent-soft text labels in light mode.

3. OvelsePicker exercise label on green-soft background
10px mono label used --exercise (#1a8c4e in light mode) as text on --exercise-soft background → 3.79:1 (FAIL). Changed to --cds-text-primary. Green identity preserved via border and Add icon.

4. Focus rings on raw <input> elements
Inline outline: none on custom-styled text inputs in ExFlyt, GruppetimePicker, OvelsePicker, and Planlegger suppressed keyboard focus rings with no replacement. Removed all four. Extended app.css focus rule from input[type=number] to all non-Carbon inputs.

5. CLAUDE.md rule added
Added an explicit WCAG rule to the key-tokens section: never use --accent as a filled background with white text — always use --accent-active.

Test plan

• Home → verify CTA button is slightly darker magenta (not hot pink), white text readable
• Camera flow → confirm step: Today / Other day pills and Save CTA use darker magenta
• Settings → save display name: button uses darker magenta
• Report → add a recommendation to library: + button uses darker magenta
• Toggle to light mode (g10) — verify AccentChip labels (Report gap callout, MuscleMapResult muscle chips) are legible dark magenta, not faint pink
• Sett sammen → Ny øvelse card: subtitle label is now primary text color, not green
• Tab through ExFlyt search input, GruppetimePicker name input, OvelsePicker search input, Planlegger search input — verify blue focus ring appears on each
• Verify no regressions in dark mode (g100)

#262

🤖 Generated with Claude Code

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://white-island-090dfd003-263.westeurope.7.azurestaticapps.net