refactor: enhance TimerPage layout and functionality; update theme and tokens for improved design consistency

- Refactored TimerPage component to improve layout and user experience.
- Updated theme configuration to utilize design tokens for better maintainability.
- Introduced new tokens for colors and typography to align with design principles.
- Simplified state management and improved timer functionality.
- Enhanced accessibility and responsiveness of UI elements.

frontend/src/components/charts/FocusBars.tsx

@@ -4,7 +4,7 @@
  * The goal line is the only reference mark; days that cleared it are the darker
  * ramp step, which keeps "did I hit the goal" readable without a second colour.
  */
-import { Box, Tooltip, Typography, useTheme } from "@mui/material";
+import { Box, Tooltip, Typography } from "@mui/material";
 
 import { shortDate } from "../../lib/format";
 import type { VizPalette } from "../../lib/viz";
@@ -30,7 +30,6 @@ export default function FocusBars({
   palette: VizPalette;
   title?: string;
 }) {
-  const theme = useTheme();
   const max = Math.max(goal, ...days.map((day) => day.pomodoros), 1);
   const goalY = HEIGHT - (goal / max) * HEIGHT;
   const slotWidth = 100 / Math.max(days.length, 1);
@@ -84,7 +83,7 @@ export default function FocusBars({
                   borderRadius: "4px 4px 0 0",
                   bgcolor:
                     day.pomodoros === 0
-                      ? theme.palette.action.disabledBackground
+                      ? palette.empty
                       : day.goal_met
                         ? palette.sequential[4]
                         : palette.sequential[2],