Add dark mode support

### Description

Add dark mode support using the semantic design token system.

The application should:

- Support light and dark themes
- Respect the user's system preference by default
- Allow the user to manually switch themes
- Persist the selected theme between visits
- Apply the theme consistently across all pages and components

## Dependency

Depends on the semantic Tailwind color utility refactor (#22).

## Acceptance criteria

- [ ] Light and dark themes are available
- [ ] The initial theme respects `prefers-color-scheme`
- [ ] A theme toggle is available in the site header
- [ ] A manually selected theme persists across page reloads
- [ ] The theme is applied before the Vue application mounts to avoid flashing the wrong theme
- [ ] Header, cards, forms, dropdowns, buttons, borders, and backgrounds work correctly in both themes
- [ ] Text maintains sufficient contrast in both themes
- [ ] Hover, focus, disabled, and active states work correctly in both themes
- [ ] The Matrix Directory logo remains readable in both themes
- [ ] Responsive and mobile navigation works correctly in both themes
- [ ] Components do not require unnecessary `dark:` utilities when semantic tokens can handle the theme change

## Implementation notes

Define light values in `:root` and override them for the dark theme:

```css
:root {
--bg: ...;
--surface: ...;
--sunk: ...;
--hover: ...;

--border: ...;
--border-strong: ...;

--text: ...;
--muted: ...;
--faint: ...;

--accent: ...;
--accent-deep: ...;
--accent-soft: ...;
--accent-ink: ...;
}

[data-theme="dark"] {
--bg: ...;
--surface: ...;
--sunk: ...;
--hover: ...;

--border: ...;
--border-strong: ...;

--text: ...;
--muted: ...;
--faint: ...;

--accent: ...;
--accent-deep: ...;
--accent-soft: ...;
--accent-ink: ...;
}
```

The selected theme may be stored in `localStorage`.

If no explicit theme preference exists, fall back to the user's operating system preference through `prefers-color-scheme`.

Start with the semantic Tailwind color utility refactor in issue #22, which this work depends on, then identify how the header and Vue application handle theme state. Check how theme preference can be applied before the app mounts and persisted between visits. Done means both themes meet the listed acceptance criteria across pages, components, and responsive navigation.

Written by the indexing model from the issue text.