fix: assign distinct tier colors in learner profile

[EmeditWeb]

Problem

In LearnerProfile.tsx (lines 15-20), TIER_COLORS maps 'Gold' and 'Bronze' both to 'amber', and 'Silver' to 'muted'. Different tiers should have visually distinct colors.

User impact: The tier badges for Gold and Bronze learners look identical, defeating the purpose of visual tier differentiation.

Root Cause

Color mapping was typed incorrectly during initial development.

What To Build

1. Fix TIER_COLORS to use distinct colors:
   • Gold → amber/yellow
   • Silver → gray/slate
   • Bronze → orange/copper
   • Starter → blue
2. Verify against colors.ts constants

Files To Touch

• src/pages/LearnerProfile.tsx — lines 15-20 fix color mapping

Acceptance Criteria

• Each tier has a distinct color
• Colors reference constants/colors.ts
• Gold and Bronze visually different

Mandatory Checks

• context/ files read
• npm run build passes
• PR references this issue

[Deylan-S]

Hi! I'd like to claim this issue. I will fix the color mapping in TIER_COLORS inside LearnerProfile.tsx using the distinct color constants from colors.ts so that Gold, Silver, and Bronze tiers are easily distinguishable. Please assign it to me. Thanks!