[Draft issue] Match application with Figma theme

[SAUMILDHANKAR]

Description

Establish and apply the global theme for the React application based on the Figma design system. This includes colors, spacing, elevation, border radius, and component variants. The goal is to ensure visual consistency across all pages and components, and to prepare the app for future design updates. The theme is still in progress, so use the placeholder Figma link and build a flexible foundation.

Goals

• Create a centralized Material UI theme file (theme.ts)
• Implement global design tokens: primary/secondary colors, background, surface, border radius, elevation, spacing scale
• Apply theme using ThemeProvider across the app
• Ensure all components (buttons, cards, inputs, tooltips, etc.) reflect the theme
• Prepare for future updates once the final theme spec is published

Implementation Instructions

1. Create theme.ts using Material UI’s createTheme()
2. Use placeholder values based on current design assumptions
3. Apply theme globally via ThemeProvider in App.tsx
4. Replace hardcoded styles with theme values using sx or styled()
5. Implement and test:
   • Color palette: primary, secondary, background, surface, error
   • Border radius: apply consistently to cards, buttons, inputs
   • Elevation: use boxShadow tokens for depth
   • Spacing: use theme.spacing() instead of raw pixel values
   • Component variants: buttons, inputs, cards, tooltips
6. Compare implementation against the Figma theme spec once available
7. Document any gaps or assumptions made during implementation

Acceptance Criteria

• Theme file exists and is applied globally
• All components use theme values for color, spacing, elevation, and radius
• No hardcoded styles that duplicate theme tokens
• Visual appearance matches the Figma theme across all pages
• Theme is flexible and ready to accept updates
• Verified against placeholder Figma theme spec

Resources

• [Placeholder Figma Theme Spec](https://www.figma.com/file/PLACEHOLDER-THEME-LINK)
• [Material UI Theme Customization](https://mui.com/material-ui/customization/theming/)
• [Material UI Color System](https://mui.com/material-ui/customization/color/)
• [Material UI Elevation](https://mui.com/material-ui/customization/elevation/)
• [Material UI Border Radius](https://mui.com/material-ui/customization/shadows/#customizing-elevation)
• [Material UI sx Prop](https://mui.com/system/getting-started/the-sx-prop/)

[SAUMILDHANKAR]

New Figma link to the theme needs to be added to this issue.