### Description Create a responsive top navigation bar component (`Navbar.tsx`) styled using project CSS variables. It should support page navigation, active route indicators, a theme toggle (light/dark mode), and user authentication controls. --- ### Definition of Done - [ ] **Structure & Layout** - [ ] App logo/title ("WAG CoP Planner") on the far left. - [ ] Navigation links ("Search", "Calculator", "About") aligned centrally/right with an active route underline indicator. - [ ] Action buttons on the far right: Dark mode toggle icon button and "Log in with Google" pill button. - [ ] **Interactivity & State** - [ ] Navigation links update active state based on current route. - [ ] Dark mode toggle switches themes (updates `data-theme` on `<html>`). - [ ] Standard hover, active, and focus states applied using `variables.css`. - [ ] **Accessibility (UU)** - [ ] Wrapped in a `<nav aria-label="Main Navigation">` semantic tag. - [ ] Visible focus outlines (`:focus-visible`) for keyboard navigation. - [ ] Theme toggle button includes an `aria-label` (e.g., `"Toggle dark mode"`). - [ ] **Quality** - [ ] Styled via CSS Module (`Navbar.module.css`). - [ ] Prettier check passes (`npx prettier --check .`).