Establish Adaptive Theme CSS Variables & Typography #77
Description
Goal: Set up the foundational CSS custom properties (variables) for the new color palette and typography that adapt to both light and dark modes.
Tasks:
- Extract the background colors, border colors, and text colors from the design (e.g., charcoal background, light gray/white text, subtle border lines).
- Add these as CSS variables in the main global stylesheet (e.g.,
--bg-primary,--text-primary,--border-light). - Implement adaptive styling using
@media (prefers-color-scheme: dark)or a theme toggle class so the site seamlessly switches between light and dark themes based on user preference. - Update the global typography settings (font-family, base font size) to match the bold, clean sans-serif look of the design.
- Apply the new adaptive background color to the primary
<body>or main app wrapper.
Acceptance Criteria:
- A set of CSS variables is defined and available globally for both light/dark color themes.
- Changing the OS/Browser theme preference successfully swaps the site's default background and text colors.
- Typography (font family and size) matches the provided mockup.