應用程式頂欄

# 任務：用「螢光墨紙 / Neon Ink」風格，在 SvelteKit 專案中實作以下區塊

你是這個專案的前端工程師。請依照下面的設計系統與規範，把指定的 UI 區塊實作出來。
不要重新發明樣式，也不要自己挑顏色 —— 所有視覺決策都已經定義好了。

## 1. 這個風格是什麼

紙感底色 + 一種吵到不行的螢光色，工具型產品的最佳解。

- 個性：直率、高對比、手作感、工具氣質、年輕
- 適合：創作者工具、SaaS 產品官網、開發者工具、訂閱制服務
- 不適合：金融/醫療等需要穩重感的產品、大量彩色圖片的電商
- 風格參考：whatsub.equal2.app（重新實作，非複製）

## 2. 你收到的檔案

```
design-system/
  contract.css      設計 token 契約（變數定義 + reset + 版面 primitives）
  components.css    元件層（按鈕、輸入框、卡片…），只用 contract 的變數
  tokens.css        這個風格的 token 值 ← 換風格只要換這一個檔案
modules/
  <每個區塊的 .svelte 原始碼 + 已經去 scope 化的 component.css>
guides/
  <這次會用到的規範文件>
```

把 `design-system/` 三個檔案照順序 import 到全域樣式入口（contract → components → tokens），
然後才 import 各個模組的 component.css。

## 3. 要實作的區塊

- **應用程式頂欄**（`header/app-topbar`）：工作區切換、全域搜尋、通知與帳號選單。

## 4. 硬性規則（違反就是做錯，不是風格差異）

1. **只能用 token**：不可以出現任何寫死的色碼、字體名稱、陰影或圓角。
   一律使用 `var(--ds-*)`。要新的值，就先在 tokens.css 加一個 token。
2. **文字色不要用 --ds-accent**：品牌色多半在淺色底上對比不足。
   accent 當文字時一律用 `--ds-accent-ink`；accent 當底色時文字用 `--ds-on-accent`。
3. **間距只能用 `--ds-space-*`**，不可以出現 `margin: 13px` 這種數字。
4. **focus 一定要看得見**：不可以 `outline: none` 而不補上 `box-shadow: var(--ds-ring)`。
5. **RWD 用 clamp() 與 auto-fit grid**，能不用 media query 就不用。
6. **不要引入 UI 套件**（Tailwind、MUI、shadcn 都不要）。這套設計系統就是純 CSS 變數，
   引入套件會讓風格切換失效。
7. **語意標籤**：導覽用 `<nav>`、主要內容用 `<main>`、可點擊的東西用 `<button>` 或 `<a>`，
   不要用 `<div onclick>`。

### SvelteKit 專屬轉換規則

- 直接使用附上的 .svelte 檔，不要重寫成別的寫法。
- 元件已經是 Svelte 5 runes（$state / $derived / $props），不要退回 export let。

## 5. 這個風格的關鍵 token（完整版在 tokens.css）

```css
:root {
  --ds-canvas: #F7F6F2;
  --ds-surface: #FFFFFF;
  --ds-ink: #0A0A0A;
  --ds-ink-2: #575751;
  --ds-accent: #39FF14;
  --ds-accent-ink: #1E7A0C;
  --ds-on-accent: #0A0A0A;
  --ds-line: #E5E3DC;
  --ds-font-display: Geologica, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --ds-font-body: Geologica, 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
  --ds-font-mono: 'IBM Plex Mono', 'PingFang TC', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif, monospace;
}
```

## 6. 相關規範文件

實作前請先讀這幾份（都在 guides/ 裡）：
- `auth-session.md`
- `navigation-cache.md`


## 7. 完成條件（做完請自己檢查一遍）

- [ ] 全部區塊在 360px / 768px / 1440px 三個寬度都不會破版、不會橫向捲動
- [ ] 用瀏覽器搜尋原始碼，找不到任何 `#` 開頭的色碼（除了 tokens.css）
- [ ] 只用鍵盤可以走完所有互動，且每一步都看得到 focus 樣式
- [ ] 把 tokens.css 換成另一個風格的版本，版面不會壞掉
- [ ] 深色風格下文字對比正常（不要只在淺色底測試）