second commit

frontend/src/theme.ts

@@ -1,4 +1,4 @@
-import { createTheme } from "@mui/material/styles";
+import { createTheme } from "@mui/material/styles";
 
 export type ColorMode = "light" | "dark";
 
@@ -7,31 +7,123 @@ export function buildTheme(mode: ColorMode) {
     palette: {
       mode,
       primary: {
-        main: "#1976d2",
+        main: mode === "dark" ? "#D0BCFF" : "#6750A4", // Highly chromatic for Expressive
       },
       secondary: {
-        main: "#dc004e",
+        main: mode === "dark" ? "#FFB4AB" : "#B3261E", // Vibrant red/pink analogous/complement
       },
       background: {
-        default: mode === "dark" ? "#121212" : "#f5f5f5",
-        paper: mode === "dark" ? "#1e1e1e" : "#ffffff",
+        default: mode === "dark" ? "#141218" : "#FEF7FF",
+        paper: mode === "dark" ? "#211F26" : "#F3EDF7", // Tonal surfaces
+      },
+      error: {
+        main: mode === "dark" ? "#FFB4AB" : "#BA1A1A",
+      },
+      warning: {
+        main: mode === "dark" ? "#FFB59B" : "#A63D00",
+      },
+      info: {
+        main: mode === "dark" ? "#9ECAFF" : "#0061A4",
+      },
+      success: {
+        main: mode === "dark" ? "#82D3A0" : "#146C36",
       },
     },
     shape: {
-      borderRadius: 8,
+      borderRadius: 16, // Softer, more fluid shapes
+    },
+    typography: {
+      fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+      h1: { fontWeight: 700, letterSpacing: "-0.02em" }, // Editorial style
+      h2: { fontWeight: 700, letterSpacing: "-0.01em" },
+      h3: { fontWeight: 600 },
+      h4: { fontWeight: 600 },
+      h5: { fontWeight: 600 },
+      h6: { fontWeight: 600 },
+      button: {
+        textTransform: "none", // Avoid all-caps for a friendlier, modern look
+        fontWeight: 600,
+        fontSize: "0.9375rem",
+        letterSpacing: "0.01em",
+      },
     },
     components: {
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            borderRadius: 100, // Full pill shape typical of M3 Expressive
+            padding: "10px 24px",
+            boxShadow: "none",
+            "&:hover": {
+              boxShadow: "none",
+            },
+          },
+          contained: {
+            "&:active": {
+              transform: "scale(0.98)", // Springy physics-based interaction hint
+              transition: "transform 0.1s cubic-bezier(0.2, 0, 0, 1)",
+            },
+          },
+        },
+      },
       MuiCard: {
         styleOverrides: {
           root: {
-            boxShadow:
-              mode === "dark"
-                ? "0px 2px 4px rgba(0, 0, 0, 0.4)"
-                : "0px 2px 4px rgba(0, 0, 0, 0.1)",
+            borderRadius: 24, // Playful, edge-hugging containers
+            boxShadow: "none", // Flatter hierarchy using surface tones
+            backgroundColor: mode === "dark" ? "#2B2930" : "#F3EDF7",
+            backgroundImage: "none",
+            transition: "transform 0.2s cubic-bezier(0.2, 0, 0, 1)",
+            "&:hover": {
+              transform: "translateY(-2px)", // Subtle hover interaction
+            },
+          },
+        },
+      },
+      MuiAppBar: {
+        styleOverrides: {
+          root: {
+            boxShadow: "none", // Flat M3 look
+            backgroundColor: mode === "dark" ? "#141218" : "#FEF7FF",
+            color: mode === "dark" ? "#E6E0E9" : "#1D1B20",
+          },
+        },
+      },
+      MuiPaper: {
+        styleOverrides: {
+          rounded: {
+            borderRadius: 24,
+          },
+        },
+      },
+      MuiTextField: {
+        styleOverrides: {
+          root: {
+            "& .MuiOutlinedInput-root": {
+              borderRadius: 12, // Softer input fields
+            },
+          },
+        },
+      },
+      MuiChip: {
+        styleOverrides: {
+          root: {
+            borderRadius: 8,
+            fontWeight: 500,
+          },
+        },
+      },
+      MuiSlider: {
+        styleOverrides: {
+          thumb: {
+            transition: "transform 0.1s cubic-bezier(0.2, 0, 0, 1)",
+            "&:hover, &.Mui-focusVisible": {
+              boxShadow: "none",
+              transform: "scale(1.2)", // Bouncy thumb
+            },
           },
         },
       },
     },
   });
 }
-