# 🎨 ToolBox 全站設計風格規範 (Style Guide)
本規範定義了 ToolBox 所有頁面（包括入口首頁及所有獨立工具頁）的統一視覺語言、色彩系統、UI 元件標準與開發規範。
---
## 1. 核心設計原則
1. **簡約現代（Modern & Clean）**：以板岩灰（Slate）與科技藍（Blue）為主調，保持清爽、俐落、高可讀性的工程師美學。
2. **純靜態・零相依（Zero Dependency）**：全站使用原生 HTML5、CSS3 與 Vanilla JavaScript，無須打包編譯工具（Zero Build）。
3. **原生雙主題（Dark / Light Mode First）**：所有元件均預設完美適配深淺色模式，切換無延遲、無白光閃爍（FOUC），狀態跨頁同步。
4. **極致響應式（Responsive RWD）**：小至手機（360px），大至寬螢幕桌面，元件與排版皆自動適配。
---
## 2. 色彩系統 (Design Tokens)
所有頁面統一透過 `common.css` 定義之 CSS 變數取用色彩，**嚴禁在各工具頁面中直接寫死 Hex 色碼**。
| CSS 變數 | 淺色模式 (Light) | 深色模式 (Dark) | 用途說明 |
| :--- | :--- | :--- | :--- |
| `--accent` | `#2563eb` (Blue 600) | `#3b82f6` (Blue 500) | 主要互動色、按鈕、聚焦環 |
| `--accent-hover` | `#1d4ed8` (Blue 700) | `#60a5fa` (Blue 400) | 懸停狀態重點色 |
| `--bg` | `#f8fafc` (Slate 50) | `#0f172a` (Slate 900) | 全站頁面背景底色 |
| `--card-bg` | `#ffffff` | `#1e293b` (Slate 800) | 主要卡片、容器背景 |
| `--card-secondary-bg`| `#f8fafc` | `#0f172a` | 次級容器、時段列背景 |
| `--text-main` | `#0f172a` (Slate 900) | `#f1f5f9` (Slate 100) | 主要標題、內文文字 |
| `--text-muted` | `#64748b` (Slate 500) | `#94a3b8` (Slate 400) | 次要輔助文字、單位標註 |
| `--border` | `#e2e8f0` (Slate 200) | `#334155` (Slate 700) | 邊框線、分割線 |
| `--border-hover` | `#cbd5e1` (Slate 300) | `#475569` (Slate 600) | 懸停時的邊框線 |
| `--success` | `#10b981` | `#34d399` | 正常、儲存成功、達成目標 |
| `--warning` | `#f59e0b` | `#fbbf24` | 警示、注意提示 |
| `--danger` | `#ef4444` | `#f87171` | 刪除、警告、錯誤 |
| `--summary-bg` | `#0f172a` | `#0b1120` | 重點結算面板背景深色盒 |
---
## 3. 字體排版與間距規範
### 字體棧 (Font Stack)
```css
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, sans-serif;
```
### 字級與字重階層
- **頁面主標題 (H1)**：`1.75rem` (28px)，字重 `800`，行高 `1.2`
- **卡片/區塊標題 (H2)**：`1.15rem` ~ `1.25rem` (20px)，字重 `700`
- **欄位標籤 (Label)**：`0.85rem` (13.6px)，字重 `600`
- **內文正文 (Body)**：`0.95rem` (15.2px)，行高 `1.6`
- **輔助註解/標籤 (Muted / Tag)**：`0.75rem` ~ `0.85rem` (12px ~ 13.6px)
### 圓角規範 (Border Radius)
- 按鈕、輸入框 (`--radius-sm`)：`6px`
- 內部設備框、次要卡片 (`--radius-md`)：`10px`
- 主要大卡片、外層容器 (`--radius-lg`)：`14px`
---
## 4. UI 元件標準使用指南
### ① 頂部導覽列 (Navbar)
每個工具頁頂部必須具備 `.tb-nav` 容器，包含：
1. 左側：返回工具箱首頁按鈕（`.tb-nav-back`）
2. 右側：主題切換按鈕（`.theme-toggle-btn`）以及 GitHub 連結按鈕
```html
```
### ② 內容容器 (Container)
- 工具頁面推薦寬度：`.tb-container`（最大寬度 `860px`）。
- 入口網站推薦寬度：`.tb-container.tb-container-wide`（最大寬度 `1080px`）。
### ③ 卡片與表單 (Card & Form Controls)
- 統一使用 `.card` 包裹獨立邏輯區塊。
- 表單群組使用 `.field`，內含 `