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/tokens.ts

@@ -0,0 +1,67 @@
+/**
+ * The design tokens, in one place.
+ *
+ * Kadence is meant to read like a well-set page rather than a dashboard: warm
+ * paper, ink-black type, hairline rules instead of boxes and shadows, one warm
+ * accent. The desktop app's QML `Theme` singleton carries the same values, so
+ * the two clients are the same product.
+ *
+ * Chart colours are deliberately *not* the brand accent: they come from the
+ * validated data palette (see `viz.ts`), because a chart has to stay readable
+ * for colour-blind readers in both themes.
+ */
+
+export interface Tokens {
+  paper: string;
+  surface: string;
+  surfaceSunken: string;
+  ink: string;
+  inkMuted: string;
+  inkFaint: string;
+  rule: string;
+  ruleStrong: string;
+  ember: string;
+  emberSoft: string;
+  pine: string;
+  amber: string;
+  clay: string;
+}
+
+export const light: Tokens = {
+  paper: "#FAF7F2",
+  surface: "#FFFFFF",
+  surfaceSunken: "#F3EFE8",
+  ink: "#17150F",
+  inkMuted: "#6E675B",
+  inkFaint: "#9A9388",
+  rule: "rgba(23, 21, 15, 0.12)",
+  ruleStrong: "rgba(23, 21, 15, 0.26)",
+  ember: "#B4441E",
+  emberSoft: "rgba(180, 68, 30, 0.10)",
+  pine: "#2F6B55",
+  amber: "#8A6200",
+  clay: "#A33A2E",
+};
+
+export const dark: Tokens = {
+  paper: "#121110",
+  surface: "#1A1917",
+  surfaceSunken: "#201E1B",
+  ink: "#F4F1EA",
+  inkMuted: "#A79F93",
+  inkFaint: "#776F64",
+  rule: "rgba(244, 241, 234, 0.14)",
+  ruleStrong: "rgba(244, 241, 234, 0.30)",
+  ember: "#E0724A",
+  emberSoft: "rgba(224, 114, 74, 0.14)",
+  pine: "#6FB394",
+  amber: "#D9A441",
+  clay: "#E07A6E",
+};
+
+export const DISPLAY_FONT = '"Fraunces", "Iowan Old Style", Georgia, serif';
+export const SANS_FONT = '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif';
+
+export function tokensFor(mode: "light" | "dark"): Tokens {
+  return mode === "dark" ? dark : light;
+}