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

@@ -23,8 +23,8 @@ function Shell() {
   }, [settings?.appearance.theme, prefersDark]);
 
   const theme = useMemo(
-    () => buildTheme(mode, settings?.appearance.accent || "#6750A4", settings?.appearance.compact ?? false),
-    [mode, settings?.appearance.accent, settings?.appearance.compact],
+    () => buildTheme(mode, settings?.appearance.compact ?? false),
+    [mode, settings?.appearance.compact],
   );
 
   // Keep the browser chrome in step with the app's surface.