fix: use CSS variables for M3 tokens — resolves client-side hydration error

- globals.css: define --surface-dim, --surface, --primary, etc. in :root (light) and .dark (dark)
- tailwind.config.ts: use var(--token) for all M3 colors
- page.tsx: remove light:/dark: dual prefixes, use unified classes (bg-surface-dim, text-onsurface)
- Navigation.tsx: same unified class approach
- Auto light/dark switch via CSS variables + html.dark class

Author: AIwork4me