As a user I want all interactive elements to meet WCAG AA contrast so I can use the app confidently

[ChristopherRotnes]

Summary

A systematic audit of the codebase revealed five categories of WCAG AA contrast failures. The root cause is that `--accent: #ee2c80` (3.95:1 against white) is used as a filled background with white text in multiple components, and `--accent-soft: #ff7eb6` is used as text color in light mode where it produces near-invisible contrast (~1.77:1) on pale tinted backgrounds. Additional failures include `--exercise` text on `--exercise-soft` backgrounds at 10px, and `outline: none` on interactive button elements that suppress keyboard focus rings without a replacement.

Priority

High

UI spec (Carbon g100)

• Filled accent buttons and controls (active pills, CTA buttons) stay visually magenta — use `--accent-active: #b5116a` (~6.45:1 vs white) instead of `--accent` (#ee2c80, 3.95:1)
• AccentChip and accent-soft text labels: add `--accent-soft: #b5116a` override to the `[data-theme="g10"]` block — dark mode keeps the existing light-pink `#ff7eb6` (7.7:1 on dark bg), light mode gets the darker value (4.84:1 on tinted bg)
• "New exercise" / "New gruppetime" featured cards: change the 10px mono label from `--exercise` to `--cds-text-primary` (green identity preserved via border + icon)
• Focus rings: remove `outline: none` from native `` elements; the existing `app.css` rule `button:not(.cds--btn):focus-visible` already provides the correct ring — inline style was overriding it

Acceptance criteria

• `Home.jsx` — "Log" CTA button: `background: var(--accent)` → `var(--accent-active)`
• `MuscleMapConfirm.jsx` — Today/Other day segmented pills (lines 59, 72): `background: var(--accent)` → `var(--accent-active)`
• `MuscleMapConfirm.jsx` — Save CTA (line 185): `background: var(--accent)` → `var(--accent-active)`
• `Settings.jsx` — Save display-name button (line 243): `background: var(--accent)` → `var(--accent-active)`
• `Report.jsx` — Add-to-library button in recommendations (line 611): `background: var(--accent)` → `var(--accent-active)`
• `carbon-tokens.css` — add `--accent-soft: #b5116a` to the `[data-theme="g10"]` block
• `OvelsePicker.jsx` — 10px mono label text on `--exercise-soft` background (line 140): change `color` from `var(--exercise)` to `var(--cds-text-primary)`
• `GruppetimeEditor.jsx` — equivalent 10px label on `--exercise-soft` background (line 268): same fix
• `ExFlyt.jsx` (lines 73, 166), `GruppetimePicker.jsx` (line 142), `OvelsePicker.jsx` (line 198), `Planlegger.jsx` (line 83) — remove `outline: none` from `` elements so `app.css` focus-visible rule applies
• Verify all fixes visually in both g100 (dark) and g10 (light) themes

Out of scope

• SVG `` muscle elements in `bodymap.jsx` and `MusclePicker.jsx` — keyboard accessibility of SVG body maps is a separate issue requiring `tabIndex` + `role="button"` work
• Decorative uses of `--accent` (borders, left-strips, dividers) — contrast requirements apply to text/interactive elements, not decoration
• 10px mono labels using `--text-muted-wl` — these are borderline (3.6:1 in dark mode) and a separate design decision; not included here