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/SessionTimeline.tsx

@@ -4,7 +4,7 @@
  * Three categories (focus / short / long break) so a legend is mandatory, and
  * each block is also labelled on hover — colour never carries identity alone.
  */
-import { Box, Stack, Tooltip, Typography, useTheme } from "@mui/material";
+import { Box, Stack, Tooltip, Typography } from "@mui/material";
 
 import { KIND_LABEL } from "../../lib/format";
 import { kindColor, type VizPalette } from "../../lib/viz";
@@ -28,12 +28,11 @@ export default function SessionTimeline({
   sessions: Session[];
   palette: VizPalette;
 }) {
-  const theme = useTheme();
   const done = sessions.filter((item) => item.minutes > 0);
   if (!done.length) {
     return (
       <ChartFrame title="Today's timeline" caption="Nothing recorded yet — start a pomodoro.">
-        <Box sx={{ height: LANE, borderRadius: 1, bgcolor: theme.palette.action.hover }} />
+        <Box sx={{ height: LANE, borderRadius: 1, border: "1px dashed", borderColor: "divider" }} />
       </ChartFrame>
     );
   }
@@ -58,7 +57,7 @@ export default function SessionTimeline({
         { label: KIND_LABEL.long_break, color: palette.longBreak },
       ]}
     >
-      <Box sx={{ position: "relative", height: LANE, borderRadius: 1, bgcolor: theme.palette.action.hover }}>
+      <Box sx={{ position: "relative", height: LANE, borderRadius: 1, bgcolor: palette.empty }}>
         {done.map((item) => {
           const start = (hourOf(item.started_at) - first) / span;
           const width = item.minutes / 60 / span;