Colors keep their role: headers/banners darken to readable contrast (same hue), lessons uses the teal token, packages use indigo; +XP pop, streak milestone card, lazy confetti

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/screens/HomeScreen.tsx

@@ -8,7 +8,7 @@ import { SeyarMascot } from '@/mascots/SeyarMascot';
 import { IslandPath } from '@/components/IslandPath';
 import { IslandSheet } from '@/components/IslandSheet';
 import { EmptyState, ErrorState, LoadingState, Screen, Sep } from '@/components/ui';
-import { shade } from '@/lib/color';
+import { onWhite, shade } from '@/lib/color';
 import { toFa } from '@/lib/format';
 import { MathText } from '@/lib/MathText';
 
@@ -106,7 +106,7 @@ export function HomeScreen() {
                     type="button"
                     onClick={() => nav.push({ name: 'unit', unitId: unit.id })}
                     className="flex w-full items-center gap-3 rounded-2xl px-4 py-3 text-right text-white active:translate-y-0.5"
-                    style={{ backgroundColor: color, boxShadow: `0 4px 0 ${shade(color, -0.25)}` }}
+                    style={{ backgroundColor: onWhite(color), boxShadow: `0 4px 0 ${shade(onWhite(color), -0.25)}` }}
                   >
                     <div className="min-w-0 flex-1">
                       <div className="text-[11px] font-bold text-white/80">