Implement Glassmorphism and System Color Scheme (Dark & Light Modes)

This issue is to implement a new UI feature that includes glassmorphism effects and robust support for system color schemes, ensuring proper handling for both dark mode and light mode.

Requirements:

• Implement glassmorphism to create a modern, frosted glass effect on specific UI components.
• Detect the system color scheme to automatically toggle between dark mode and light mode.
• Ensure the UI design is consistent and visually appealing in both dark and light themes.
• Add appropriate CSS styles and media queries (prefers-color-scheme) for responsiveness.
• Thoroughly test browser compatibility and custom theming across multiple devices.
• Document the implementation details, challenges faced, and any assumptions.

Additional notes:

• Consider using variables and theme switches to easily manage color palette adjustments.
• Ensure that transitions between themes are smooth and intuitive for the end users.
• The design should remain accessible and meet contrast requirements for both modes.