feat: configure Material UI theme with custom colors and component styles

apps/admin/src/main.tsx

@@ -1,10 +1,44 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { ThemeProvider, createTheme, CssBaseline } from '@mui/material'
 import './index.css'
 import App from './App.tsx'
 
+const theme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: { main: '#7c3aed' }, // violet
+    secondary: { main: '#06b6d4' }, // cyan
+    background: { default: '#fafafa' },
+  },
+  shape: { borderRadius: 10 },
+  components: {
+    MuiAppBar: {
+      defaultProps: { color: 'default' },
+      styleOverrides: {
+        root: { borderBottom: '1px solid rgba(0,0,0,0.08)' },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: { textTransform: 'none', fontWeight: 600 },
+      },
+    },
+    MuiPaper: {
+      defaultProps: { elevation: 0 },
+      styleOverrides: { root: { border: '1px solid rgba(0,0,0,0.06)' } },
+    },
+    MuiChip: {
+      styleOverrides: { root: { fontWeight: 600 } },
+    },
+  },
+});
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
   </StrictMode>,
 )