### Description Create `src/styles/variables.css` with CSS variables (`:root`) for colors, typography, spacing, and shadows. Import it globally in `src/main.tsx` so styles are available across all components. --- ### Definition of Done - [ ] **Setup** - [ ] `src/styles/variables.css` is created. - [ ] `src/styles/global.css` is created (for base styles/reset). - [ ] Both files are imported in `src/main.tsx`. - [ ] **Variables Defined** - [ ] Colors: Primary, surface/background, text, and difficulty levels (easy, medium, hard). - [ ] Accessibility: `--color-focus-ring` defined for keyboard focus. - [ ] Typography: Base font, weights, and sizes (`rem`). - [ ] Layout: Spacing tokens based on an 8px scale (`--space-xs` to `--space-xl`). - [ ] UI: Border radius and card shadows. - [ ] **Quality & Accessibility** - [ ] Text/background contrasts pass WCAG 2.1 AA (≥ 4.5:1). - [ ] Focus styles using `--color-focus-ring` added to `global.css`. - [ ] Tested working inside a CSS Module (e.g. `TripCard.module.css`). - [ ] Prettier check passes (`npx prettier --check .`).