docs: Restructure styling documentation and add theme toggle docs

- Simplify CLAUDE.md from ~460 to ~145 lines with imports
- Add Theme System section to css-design-system.md (3 modes: auto/light/dark)
- Document theme toggle UI, localStorage persistence, CSS priority order
- Add paths: frontmatter to authentication.md and company-period.md
- Update DESIGN_TOKENS.md Dark Mode section with toggle documentation
- Clean auto-build-memory.md header (remove non-existent auto-sync reference)
- Remove non-existent plugin from settings.json

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

docs/DESIGN_TOKENS.md

@@ -483,20 +483,52 @@ For backwards compatibility with existing code:
 
 ## Dark Mode (ACTIVE)
 
-Dark mode is fully supported via `@media (prefers-color-scheme: dark)` in `variables.css`. All tokens automatically switch to dark variants.
+ROA2WEB folosește un **sistem two-tier** pentru teme cu toggle manual în header.
+
+### Theme Toggle UI
+
+Butonul de temă din header ciclează prin 3 moduri:
+
+| Mode | Icon | Label | Comportament |
+|------|------|-------|--------------|
+| `auto` | 🖥️ `pi-desktop` | "Tema: Auto (sistem)" | Urmează preferința OS |
+| `light` | ☀️ `pi-sun` | "Tema: Light" | Forțează light mode |
+| `dark` | 🌙 `pi-moon` | "Tema: Dark" | Forțează dark mode |
+
+**Implementare:** `src/shared/components/layout/AppHeader.vue` (lines 137-175)
+
+### Persistență
+
+- **Key:** `localStorage['user-theme']`
+- **Values:** `'light'`, `'dark'`, sau absent (= auto)
+- **Init:** La mount, aplică tema salvată
+
+### CSS Priority Order
+
+```
+1. [data-theme="dark/light"]  →  Manual override (highest)
+2. @media (prefers-color-scheme)  →  System preference (fallback)
+3. :root (light)  →  Default
+```
 
 ### How It Works
 
 ```css
-/* Light mode (default) */
+/* 1. Default light mode */
 :root {
   --surface-card: #ffffff;
   --text-color: #111827;
 }
 
-/* Dark mode (automatic) */
+/* 2. Manual dark override (user clicks toggle) */
+[data-theme="dark"] {
+  --surface-card: #1e293b;
+  --text-color: #f9fafb;
+}
+
+/* 3. Auto-detect (when mode=auto + OS dark) */
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme]) {
     --surface-card: #1e293b;
     --text-color: #f9fafb;
   }
@@ -509,6 +541,7 @@ Dark mode is fully supported via `@media (prefers-color-scheme: dark)` in `varia
 |-------|-------|------|---------|
 | `--surface-card` | #ffffff | #1e293b | Card/container backgrounds |
 | `--surface-ground` | #f8fafc | #0f172a | Page background |
+| `--surface-hover` | #f1f5f9 | #334155 | Hover states |
 | `--surface-border` | #e2e8f0 | #475569 | Borders |
 | `--text-color` | #111827 | #f9fafb | Primary text |
 | `--text-color-secondary` | #6b7280 | #d1d5db | Secondary text |
@@ -528,9 +561,12 @@ Each color has a full scale (50-900) that inverts appropriately in dark mode:
 
 ### Testing Dark Mode
 
-1. In browser DevTools: Set `prefers-color-scheme: dark`
-2. In Playwright: `await page.emulateMedia({ colorScheme: 'dark' })`
-3. System preference: Change OS dark mode setting
+**IMPORTANT:** Testează întotdeauna ambele scenarii!
+
+1. **Toggle manual:** Click buton temă în header (ciclează auto→light→dark)
+2. **DevTools:** Rendering → Emulate CSS media → `prefers-color-scheme: dark`
+3. **Playwright:** `await page.emulateMedia({ colorScheme: 'dark' })`
+4. **System:** Change OS dark mode setting
 
 ---