fix(client): rebuild the stat box gradient from main

The coloured stat box ran its gradient from `<palette>.light` to
`<palette>.main`. With Material's stock warning that was #ff9800 ->
#ed6c02, a bright orange. The new warning.main is a dark amber chosen so
the "Paused" chip text clears 4.5:1, and MUI derives `light` from it, so
the gradient became brown mud.

The two roles were never compatible: `main` has to be dark enough for
small text on white, and the same value was being used as a large filled
background. The gradient now runs from lighten(main, 0.12) to main,
which keeps the box in the status colour, restores the depth that the
flat brown lost, and holds white contrastText at 4.64:1 or better at the
lightest point for all four palettes.

Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd

client/src/Components/design-elements/StatBox.tsx

@@ -23,8 +23,11 @@ export const GradientBox = ({ children, palette, sx, interactive }: GradientBox)
 	// gradient collapses flat. Darken slightly towards the page ground instead.
 	const paperStart = isLight ? darken(paper, 0.02) : lighten(paper, 0.08);
 	const paperEnd = paper;
+	// The gradient carries white `contrastText`, so it runs between two shades
+	// dark enough to keep that legible. `light` is a mid-tone used for status
+	// dots and chart marks - too pale here - so lift from `main` instead.
 	const bg = palette
-		? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)`
+		? `linear-gradient(135deg, ${lighten(theme.palette[palette].main, 0.12)} 0%, ${theme.palette[palette].main} 100%)`
 		: `linear-gradient(135deg, ${paperStart} 0%, ${paperEnd} 100%)`;
 
 	return (