Add dark mode support

[chrisdedman]

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:

: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.