diff --git a/apps/backend/etc/callhome.md b/apps/backend/etc/callhome.md
new file mode 100644
index 0000000..601a82a
--- /dev/null
+++ b/apps/backend/etc/callhome.md
@@ -0,0 +1,57 @@
+# Call Home 會議重點與 Action Items
+
+**日期：** 2026/07/28
+
+## 會議重點
+
+### 1. 整合方向
+
+Call Home 可拆成三個部分：
+
+1. **Trigger／State**：事件收集、分類、去重與 Recovery。
+2. **Delivery**：Email、SMS、Phone、ServiceNow、Salesforce。
+3. **Service Process**：自動開單、Ticket 狀態與結案責任。
+
+### 2. 可以直接重用的能力
+
+- **SSM 團隊提供：** Event Mapping、事件白名單、資料收集、去重與 Recovery 邏輯。
+- **SCC-FLEX 提供：** Policy Engine、統一 Webhook、多通路通知與 Salesforce API。
+- **Local Administrator：** 沿用 SCC-FLEX 現有 Recipient／Receiver 設定，不另外開發獨立模組。
+
+### 3. 目前主要缺口
+
+- 尚未定義統一 Event Payload 與 Correlation Key。
+- SCC-FLEX 尚缺完整 Deduplication、Soft／Hard State 與 Event Lifecycle。
+- Service Team 可接受的 Event 白名單尚未確認。
+- Device Recovered 與 Ticket Closed 的關係尚未定義。
+- Salesforce Ticket 的 Owner、Close 權限與 Ask-to-Close 流程尚未確認。
+- Call Home License 模式尚未確認。
+
+### 4. 初步共識
+
+- Supermicro Service 情境傾向**自動建立 Ticket**。
+- 自動開單前必須先完成 Event 白名單、去重及 Idempotency。
+- 初期先支援 Compute／Supermicro Hardware。
+- CDU、PDU、Liquid Cooling 等產品後續再評估。
+
+## Action Items
+
+| Owner | Action Item | Status |
+|---|---|---|
+| Daniel | 依 Trigger、Delivery、Service Process 三部分整理整合需求與責任邊界。 | 待整理 |
+| Daniel | 建立跨團隊討論群組並發布會議記錄。 | 待處理 |
+| Daniel／PM | 確認 DCM Single Key、Service Key、每台 Host 計費及 Support Advisor 的關係。 | 待確認 |
+| PM／Service Team | 提供可自動開單的 Event 白名單、必要 Payload／附件及維護 Owner。 | 待確認 |
+| SSM 團隊 | 提供 Event Mapping、Trigger List、Deduplication、Recovery 與資料收集規則。 | 待指派 |
+| SCC-FLEX 團隊 | 定義 Event Payload、Correlation Key、Soft／Hard State、Deduplication 與 Idempotency。 | 待排程 |
+| Daniel／IT／Service Team | 確認 Salesforce API Owner、Ticket Update、Close 與 Ask-to-Close 規則。 | 待確認 |
+| PM／產品團隊 | 決定 Event 選擇方式及 Ticket List／Ask-to-Close 是否列入產品範圍。 | 待討論 |
+
+## 下一步
+
+下一次會議只需要確認四件事：
+
+1. Service Team Event 白名單。
+2. SSM 可提供的資料與介面。
+3. Salesforce Ticket Lifecycle 與責任人。
+4. License 與產品範圍。
diff --git a/apps/backend/generate/api/growth_p2.api b/apps/backend/generate/api/growth_p2.api
index 5a774fb..d6d38b1 100644
--- a/apps/backend/generate/api/growth_p2.api
+++ b/apps/backend/generate/api/growth_p2.api
@@ -98,9 +98,11 @@ type (
 	}
 
 	UtmLinkPublic {
-		Id             string `json:"id"`
-		Code           string `json:"code"`
+		Id   string `json:"id"`
+		Code string `json:"code"`
+		// TrackPath 保留給同源前端；TrackUrl 是後端算好的絕對網址，貼到 Threads 用這個。
 		TrackPath      string `json:"track_path"`
+		TrackUrl       string `json:"track_url"`
 		DestinationUrl string `json:"destination_url"`
 		OutcomeId      string `json:"outcome_id,optional"`
 		Label          string `json:"label,optional"`
diff --git a/apps/backend/internal/logic/benchmark/get_benchmark_logic.go b/apps/backend/internal/logic/benchmark/get_benchmark_logic.go
index 9c7dd18..9b50d91 100644
--- a/apps/backend/internal/logic/benchmark/get_benchmark_logic.go
+++ b/apps/backend/internal/logic/benchmark/get_benchmark_logic.go
@@ -27,12 +27,11 @@ func (l *GetBenchmarkLogic) GetBenchmark(req *types.BenchmarkReq) (*types.Benchm
 	if !ok || uid <= 0 {
 		return nil, fmt.Errorf("unauthorized")
 	}
-	niche := req.Niche
-	if niche == "" {
-		niche = "general"
-	}
+	niche := usecase.NormalizeNiche(req.Niche)
 	var yourEng, yourViews float64
-	// contribute + read from own posts if studio available
+	// 只讀自己的貼文算出對照值。這裡刻意不 ContributeBenchmark：查詢是讀路徑，
+	// 若順手寫入，任何人只要輸入某個利基名稱就能把自己的數字灌進那個桶。
+	// 貢獻的唯一入口是 insights summary（那裡的數字來自使用者自己的已同步貼文）。
 	if l.svcCtx.Studio != nil {
 		posts, err := l.svcCtx.Studio.ListOwnPosts(l.ctx, uid, req.AccountId)
 		if err == nil && len(posts) > 0 {
@@ -52,15 +51,14 @@ func (l *GetBenchmarkLogic) GetBenchmark(req *types.BenchmarkReq) (*types.Benchm
 				if views > 0 {
 					yourEng = float64(likes+replies) / float64(views)
 				}
-				_ = l.svcCtx.Growth.ContributeBenchmark(l.ctx, uid, niche, yourEng, yourViews)
 			}
 		}
 	}
 	sample, medEng, medViews, avail, hint := l.svcCtx.Growth.GetBenchmark(l.ctx, niche, yourEng, yourViews)
 	return &types.BenchmarkData{
 		Available: avail, SampleSize: sample, Niche: niche,
-		MedianEngRate: usecase.Round2(medEng), MedianViews: usecase.Round2(medViews),
-		YourEngRate: usecase.Round2(yourEng), YourViews: usecase.Round2(yourViews),
+		MedianEngRate: usecase.RoundRate(medEng), MedianViews: usecase.Round2(medViews),
+		YourEngRate: usecase.RoundRate(yourEng), YourViews: usecase.Round2(yourViews),
 		PercentileHint: hint, Message: hint,
 	}, nil
 }
diff --git a/apps/backend/internal/logic/insightsapi/get_insights_summary_logic.go b/apps/backend/internal/logic/insightsapi/get_insights_summary_logic.go
index 5c295a3..8a929e9 100644
--- a/apps/backend/internal/logic/insightsapi/get_insights_summary_logic.go
+++ b/apps/backend/internal/logic/insightsapi/get_insights_summary_logic.go
@@ -80,7 +80,7 @@ func (l *GetInsightsSummaryLogic) GetInsightsSummary(req *types.InsightsSummaryR
 		}
 		top = append(top, types.InsightsPostPublic{
 			Id: p.ID, TextPreview: prev, PublishedAt: ts,
-			ViewCount: p.ViewCount, LikeCount: p.LikeCount, ReplyCount: p.ReplyCount, EngRate: usecase.Round2(eng),
+			ViewCount: p.ViewCount, LikeCount: p.LikeCount, ReplyCount: p.ReplyCount, EngRate: usecase.RoundRate(eng),
 		})
 	}
 	sort.Slice(top, func(i, j int) bool { return top[i].EngRate > top[j].EngRate })
@@ -98,7 +98,7 @@ func (l *GetInsightsSummaryLogic) GetInsightsSummary(req *types.InsightsSummaryR
 			e = float64(a.likes+a.replies) / float64(a.views)
 		}
 		buckets = append(buckets, types.InsightsMonthBucket{
-			MonthKey: mk, Posts: a.posts, Views: a.views, Likes: a.likes, Replies: a.replies, AvgEngRate: usecase.Round2(e),
+			MonthKey: mk, Posts: a.posts, Views: a.views, Likes: a.likes, Replies: a.replies, AvgEngRate: usecase.RoundRate(e),
 		})
 	}
 	sort.Slice(buckets, func(i, j int) bool { return buckets[i].MonthKey < buckets[j].MonthKey })
@@ -116,7 +116,7 @@ func (l *GetInsightsSummaryLogic) GetInsightsSummary(req *types.InsightsSummaryR
 	}
 	return &types.InsightsSummaryData{
 		AccountId: req.AccountId, PostCount: n, TotalViews: totalV, TotalLikes: totalL, TotalReplies: totalR,
-		AvgEngRate: usecase.Round2(avgEng), TopPosts: top, MonthBuckets: buckets,
+		AvgEngRate: usecase.RoundRate(avgEng), TopPosts: top, MonthBuckets: buckets,
 		Conclusion: conclusion, Suggestions: sugs,
 	}, nil
 }
diff --git a/apps/backend/internal/logic/utm/create_utm_link_logic.go b/apps/backend/internal/logic/utm/create_utm_link_logic.go
index 0fe27f5..c1cb5c6 100644
--- a/apps/backend/internal/logic/utm/create_utm_link_logic.go
+++ b/apps/backend/internal/logic/utm/create_utm_link_logic.go
@@ -30,9 +30,6 @@ func (l *CreateUtmLinkLogic) CreateUtmLink(req *types.CreateUtmLinkReq) (*types.
 	if err != nil {
 		return nil, err
 	}
-	return &types.UtmLinkPublic{
-		Id: u.ID, Code: u.Code, TrackPath: "/api/v1/public/u/" + u.Code,
-		DestinationUrl: u.DestinationURL, OutcomeId: u.OutcomeID, Label: u.Label,
-		Clicks: u.Clicks, CreatedAt: u.CreatedAt,
-	}, nil
+	out := publicView(l.svcCtx.Config, u)
+	return &out, nil
 }
diff --git a/apps/backend/internal/logic/utm/list_utm_links_logic.go b/apps/backend/internal/logic/utm/list_utm_links_logic.go
index 9f07b4e..c572a48 100644
--- a/apps/backend/internal/logic/utm/list_utm_links_logic.go
+++ b/apps/backend/internal/logic/utm/list_utm_links_logic.go
@@ -32,11 +32,7 @@ func (l *ListUtmLinksLogic) ListUtmLinks() (*types.UtmLinkListData, error) {
 	}
 	out := make([]types.UtmLinkPublic, 0, len(list))
 	for _, u := range list {
-		out = append(out, types.UtmLinkPublic{
-			Id: u.ID, Code: u.Code, TrackPath: "/api/v1/public/u/" + u.Code,
-			DestinationUrl: u.DestinationURL, OutcomeId: u.OutcomeID, Label: u.Label,
-			Clicks: u.Clicks, CreatedAt: u.CreatedAt,
-		})
+		out = append(out, publicView(l.svcCtx.Config, u))
 	}
 	return &types.UtmLinkListData{List: out}, nil
 }
diff --git a/apps/backend/internal/logic/utm/publicview.go b/apps/backend/internal/logic/utm/publicview.go
new file mode 100644
index 0000000..f5075bd
--- /dev/null
+++ b/apps/backend/internal/logic/utm/publicview.go
@@ -0,0 +1,38 @@
+package utm
+
+import (
+	"strings"
+
+	"apps/backend/internal/config"
+	"apps/backend/internal/module/growth/domain"
+	"apps/backend/internal/types"
+)
+
+const trackPathPrefix = "/api/v1/public/u/"
+
+// publicView 把追蹤連結轉成對外型別。TrackUrl 必須由後端算：連結會被貼進 Threads
+// 貼文，前端自己拼 window.location.origin 在 API 與前端不同 host 時會產出 404 連結。
+func publicView(c config.Config, u *domain.UtmLink) types.UtmLinkPublic {
+	path := trackPathPrefix + u.Code
+	return types.UtmLinkPublic{
+		Id:             u.ID,
+		Code:           u.Code,
+		TrackPath:      path,
+		TrackUrl:       publicAPIBase(c) + path,
+		DestinationUrl: u.DestinationURL,
+		OutcomeId:      u.OutcomeID,
+		Label:          u.Label,
+		Clicks:         u.Clicks,
+		CreatedAt:      u.CreatedAt,
+	}
+}
+
+// publicAPIBase 與 threads oauth callback 用同一套推導：PublicAPIBase 優先，否則
+// PublicWebBase（正式站 nginx、dev 的 vite 都會把 /api 轉到 gateway）。兩者皆空
+// 時回空字串，TrackUrl 退回相對路徑讓瀏覽器自己解。
+func publicAPIBase(c config.Config) string {
+	if b := strings.TrimRight(strings.TrimSpace(c.PublicAPIBase), "/"); b != "" {
+		return b
+	}
+	return strings.TrimRight(strings.TrimSpace(c.PublicWebBase), "/")
+}
diff --git a/apps/backend/internal/logic/utm/publicview_test.go b/apps/backend/internal/logic/utm/publicview_test.go
new file mode 100644
index 0000000..2f4466b
--- /dev/null
+++ b/apps/backend/internal/logic/utm/publicview_test.go
@@ -0,0 +1,36 @@
+package utm
+
+import (
+	"testing"
+
+	"apps/backend/internal/config"
+	"apps/backend/internal/module/growth/domain"
+
+	"github.com/stretchr/testify/require"
+)
+
+func TestTrackUrlIsAbsoluteSoItCanBePastedIntoAPost(t *testing.T) {
+	var c config.Config
+	c.PublicAPIBase = "https://api.example.com/"
+	c.PublicWebBase = "https://app.example.com"
+
+	out := publicView(c, &domain.UtmLink{ID: "l1", Code: "abc123", DestinationURL: "https://shop.example.com/p/1"})
+
+	require.Equal(t, "https://api.example.com/api/v1/public/u/abc123", out.TrackUrl)
+	require.Equal(t, "/api/v1/public/u/abc123", out.TrackPath)
+}
+
+func TestTrackUrlFallsBackToWebBaseWhichProxiesApi(t *testing.T) {
+	var c config.Config
+	c.PublicWebBase = "http://127.0.0.1:5173"
+
+	out := publicView(c, &domain.UtmLink{Code: "xyz"})
+
+	require.Equal(t, "http://127.0.0.1:5173/api/v1/public/u/xyz", out.TrackUrl)
+}
+
+func TestTrackUrlStaysRelativeWhenNoBaseIsConfigured(t *testing.T) {
+	out := publicView(config.Config{}, &domain.UtmLink{Code: "xyz"})
+
+	require.Equal(t, "/api/v1/public/u/xyz", out.TrackUrl)
+}
diff --git a/apps/backend/internal/module/growth/usecase/p2.go b/apps/backend/internal/module/growth/usecase/p2.go
index c630356..cd8573d 100644
--- a/apps/backend/internal/module/growth/usecase/p2.go
+++ b/apps/backend/internal/module/growth/usecase/p2.go
@@ -292,11 +292,17 @@ func (s *Service) TrackUtmClick(ctx context.Context, code string) (dest string,
 
 // --- Benchmark ---
 
-func (s *Service) ContributeBenchmark(ctx context.Context, ownerUID int64, niche string, engRate, avgViews float64) error {
-	niche = strings.TrimSpace(niche)
+// NormalizeNiche 讓利基桶有機會對得上：大小寫與前後空白不該切出不同的桶。
+func NormalizeNiche(niche string) string {
+	niche = strings.ToLower(strings.TrimSpace(niche))
 	if niche == "" {
-		niche = "general"
+		return "general"
 	}
+	return niche
+}
+
+func (s *Service) ContributeBenchmark(ctx context.Context, ownerUID int64, niche string, engRate, avgViews float64) error {
+	niche = NormalizeNiche(niche)
 	h := sha256.Sum256([]byte(fmt.Sprintf("%d|%s", ownerUID, niche)))
 	return s.Repo.UpsertBenchmarkSample(ctx, &domain.BenchmarkSample{
 		Niche: niche, EngRate: engRate, AvgViews: avgViews,
@@ -305,10 +311,7 @@ func (s *Service) ContributeBenchmark(ctx context.Context, ownerUID int64, niche
 }
 
 func (s *Service) GetBenchmark(ctx context.Context, niche string, yourEng, yourViews float64) (sampleSize int, medianEng, medianViews float64, available bool, hint string) {
-	niche = strings.TrimSpace(niche)
-	if niche == "" {
-		niche = "general"
-	}
+	niche = NormalizeNiche(niche)
 	list, err := s.Repo.ListBenchmarkSamples(ctx, niche, 500)
 	if err != nil || len(list) < 5 {
 		return len(list), 0, 0, false, "樣本不足 5，暫不顯示中位數（多貢獻幾次成效後再看）"
@@ -534,3 +537,9 @@ func toPDFSafe(s string) string {
 func Round2(v float64) float64 {
 	return math.Round(v*100) / 100
 }
+
+// RoundRate 用在互動率這種比率（0.0234）。比率不能走 Round2 —— 那會輾成 0.02，
+// 前端 *100 後所有人都變成整數百分比。保留 4 位小數 = 百分比的 2 位。
+func RoundRate(v float64) float64 {
+	return math.Round(v*10000) / 10000
+}
diff --git a/apps/backend/internal/module/growth/usecase/service_test.go b/apps/backend/internal/module/growth/usecase/service_test.go
index dc84738..81e5adb 100644
--- a/apps/backend/internal/module/growth/usecase/service_test.go
+++ b/apps/backend/internal/module/growth/usecase/service_test.go
@@ -220,3 +220,26 @@ func TestUTM_RefusesToRedirectToAStoredBadDestination(t *testing.T) {
 	_, err = svc.TrackUtmClick(ctx, link.Code)
 	require.ErrorIs(t, err, domain.ErrValidation)
 }
+
+// 互動率是比率，走 Round2 會被輾成整數百分比（0.0234 → 0.02 → 前端 2.00%）。
+func TestRoundRateKeepsTwoDecimalsOfAPercentage(t *testing.T) {
+	require.Equal(t, 0.0234, RoundRate(0.023449))
+	require.Equal(t, 0.1235, RoundRate(0.12345))
+	require.Equal(t, 0.0, RoundRate(0))
+	require.Equal(t, 0.02, Round2(0.023449), "Round2 仍供瀏覽數這類整數量使用")
+}
+
+func TestBenchmarkBucketsIgnoreCaseAndPadding(t *testing.T) {
+	svc := New(repository.NewMemory())
+	ctx := context.Background()
+
+	for uid := int64(1); uid <= 5; uid++ {
+		require.NoError(t, svc.ContributeBenchmark(ctx, uid, "  SkinCare ", 0.02, 100))
+	}
+
+	size, medEng, medViews, available, _ := svc.GetBenchmark(ctx, "skincare", 0.02, 100)
+	require.True(t, available)
+	require.Equal(t, 5, size)
+	require.Equal(t, 0.02, medEng)
+	require.Equal(t, 100.0, medViews)
+}
diff --git a/apps/backend/internal/types/types.go b/apps/backend/internal/types/types.go
index aab05c6..2bd513e 100644
--- a/apps/backend/internal/types/types.go
+++ b/apps/backend/internal/types/types.go
@@ -1796,6 +1796,7 @@ type UtmLinkPublic struct {
 	Id             string `json:"id"`
 	Code           string `json:"code"`
 	TrackPath      string `json:"track_path"`
+	TrackUrl       string `json:"track_url"`
 	DestinationUrl string `json:"destination_url"`
 	OutcomeId      string `json:"outcome_id,optional"`
 	Label          string `json:"label,optional"`
diff --git a/apps/web/package.json b/apps/web/package.json
index 459af3e..8d8b72b 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -7,6 +7,7 @@
     "dev": "vite --host 0.0.0.0",
     "build": "tsc -b && vite build",
     "lint": "oxlint",
+    "check:tokens": "node scripts/check-tokens.mjs",
     "test": "vitest run",
     "test:unit": "vitest run",
     "preview": "vite preview --host 0.0.0.0"
diff --git a/apps/web/public/brand-mark.svg b/apps/web/public/brand-mark.svg
index fbd20a3..2099214 100644
--- a/apps/web/public/brand-mark.svg
+++ b/apps/web/public/brand-mark.svg
@@ -1,19 +1,19 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
   <defs>
     <linearGradient id="night" x1="8" y1="5" x2="58" y2="61" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#141A19"/>
-      <stop offset=".58" stop-color="#1B2725"/>
-      <stop offset="1" stop-color="#20B49C"/>
+      <stop stop-color="#141A1A"/>
+      <stop offset=".58" stop-color="#1B2627"/>
+      <stop offset="1" stop-color="#5F9AA3"/>
     </linearGradient>
     <linearGradient id="orbit" x1="14" y1="14" x2="50" y2="51" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#C8F5EE"/>
-      <stop offset=".52" stop-color="#22C3A8"/>
-      <stop offset="1" stop-color="#3CDDC2"/>
+      <stop stop-color="#DCEEF1"/>
+      <stop offset=".52" stop-color="#6FADB6"/>
+      <stop offset="1" stop-color="#8BC5CD"/>
     </linearGradient>
     <radialGradient id="core" cx="0" cy="0" r="1" gradientTransform="translate(32 30) rotate(90) scale(12)">
       <stop stop-color="#FFFFFF"/>
-      <stop offset=".42" stop-color="#DDFBF7"/>
-      <stop offset="1" stop-color="#3CDDC2" stop-opacity=".12"/>
+      <stop offset=".42" stop-color="#E8F4F6"/>
+      <stop offset="1" stop-color="#8BC5CD" stop-opacity=".12"/>
     </radialGradient>
     <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
       <feGaussianBlur stdDeviation="2.4"/>
@@ -21,19 +21,19 @@
   </defs>
 
   <rect width="64" height="64" rx="18" fill="url(#night)"/>
-  <circle cx="32" cy="31" r="19" stroke="#69D4C5" stroke-opacity=".2"/>
+  <circle cx="32" cy="31" r="19" stroke="#8BC5CD" stroke-opacity=".2"/>
   <path d="M15.5 35.5c1.8 9 10.2 15.8 19.8 14.4 9.5-1.4 16.1-10.6 13.7-20" stroke="url(#orbit)" stroke-width="2.4" stroke-linecap="round"/>
-  <path d="M17.2 24.8c4.9-9 16.4-12.5 25.5-7.5" stroke="#C8F5EE" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="1 4"/>
-  <ellipse cx="32" cy="31" rx="24" ry="10.5" transform="rotate(-24 32 31)" stroke="#3CDDC2" stroke-opacity=".5" stroke-width="1.4"/>
+  <path d="M17.2 24.8c4.9-9 16.4-12.5 25.5-7.5" stroke="#DCEEF1" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="1 4"/>
+  <ellipse cx="32" cy="31" rx="24" ry="10.5" transform="rotate(-24 32 31)" stroke="#8BC5CD" stroke-opacity=".5" stroke-width="1.4"/>
 
-  <circle cx="32" cy="30" r="11" fill="#3CDDC2" fill-opacity=".3" filter="url(#glow)"/>
+  <circle cx="32" cy="30" r="11" fill="#8BC5CD" fill-opacity=".3" filter="url(#glow)"/>
   <circle cx="32" cy="30" r="9.2" fill="url(#core)"/>
-  <path d="M34.8 21.3a9.2 9.2 0 1 0 6 13.8 10.7 10.7 0 0 1-6-13.8Z" fill="#F4F6F5"/>
-  <path d="M17 43.5c4-3 8-3 12 0s8 3 12 0 8-3 12 0" stroke="#3CDDC2" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M34.8 21.3a9.2 9.2 0 1 0 6 13.8 10.7 10.7 0 0 1-6-13.8Z" fill="#F4F6F6"/>
+  <path d="M17 43.5c4-3 8-3 12 0s8 3 12 0 8-3 12 0" stroke="#8BC5CD" stroke-width="2.5" stroke-linecap="round"/>
 
-  <path d="M46 13.5c.5 2.2 1.8 3.5 4 4-2.2.5-3.5 1.8-4 4-.5-2.2-1.8-3.5-4-4 2.2-.5 3.5-1.8 4-4Z" fill="#FF7B73"/>
-  <path d="M18.5 15c.3 1.5 1.2 2.4 2.7 2.7-1.5.3-2.4 1.2-2.7 2.7-.3-1.5-1.2-2.4-2.7-2.7 1.5-.3 2.4-1.2 2.7-2.7Z" fill="#C8F5EE"/>
+  <path d="M46 13.5c.5 2.2 1.8 3.5 4 4-2.2.5-3.5 1.8-4 4-.5-2.2-1.8-3.5-4-4 2.2-.5 3.5-1.8 4-4Z" fill="#FEE5A1"/>
+  <path d="M18.5 15c.3 1.5 1.2 2.4 2.7 2.7-1.5.3-2.4 1.2-2.7 2.7-.3-1.5-1.2-2.4-2.7-2.7 1.5-.3 2.4-1.2 2.7-2.7Z" fill="#DCEEF1"/>
   <circle cx="50.5" cy="33.5" r="1.5" fill="#FFF"/>
-  <circle cx="14" cy="32" r="1" fill="#69D4C5"/>
-  <rect x="1" y="1" width="62" height="62" rx="17" stroke="#E0EBE9" stroke-opacity=".15" stroke-width="2"/>
+  <circle cx="14" cy="32" r="1" fill="#8BC5CD"/>
+  <rect x="1" y="1" width="62" height="62" rx="17" stroke="#E0E9EB" stroke-opacity=".15" stroke-width="2"/>
 </svg>
diff --git a/apps/web/public/favicon.svg b/apps/web/public/favicon.svg
index 46c8710..206129c 100644
--- a/apps/web/public/favicon.svg
+++ b/apps/web/public/favicon.svg
@@ -1,15 +1,15 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
   <defs>
     <linearGradient id="bg" x1="3" y1="2" x2="29" y2="31" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#141A19"/>
-      <stop offset="1" stop-color="#20B49C"/>
+      <stop stop-color="#141A1A"/>
+      <stop offset="1" stop-color="#5F9AA3"/>
     </linearGradient>
   </defs>
   <rect width="32" height="32" rx="9" fill="url(#bg)"/>
-  <circle cx="16" cy="15.5" r="9.5" stroke="#69D4C5" stroke-opacity=".5"/>
-  <ellipse cx="16" cy="15.5" rx="12" ry="5.2" transform="rotate(-24 16 15.5)" stroke="#3CDDC2" stroke-opacity=".72"/>
-  <circle cx="16" cy="15" r="5" fill="#DDFBF7"/>
-  <path d="M17.5 10.2a5 5 0 1 0 3.2 7.5 5.8 5.8 0 0 1-3.2-7.5Z" fill="#F4F6F5"/>
-  <path d="M7.5 22c2-1.5 4-1.5 6 0s4 1.5 6 0 4-1.5 6 0" stroke="#3CDDC2" stroke-width="1.5" stroke-linecap="round"/>
-  <path d="M24 6.2c.3 1.2 1 2 2.2 2.2-1.2.3-2 1-2.2 2.2-.3-1.2-1-2-2.2-2.2 1.2-.3 2-1 2.2-2.2Z" fill="#FF7B73"/>
+  <circle cx="16" cy="15.5" r="9.5" stroke="#8BC5CD" stroke-opacity=".5"/>
+  <ellipse cx="16" cy="15.5" rx="12" ry="5.2" transform="rotate(-24 16 15.5)" stroke="#8BC5CD" stroke-opacity=".72"/>
+  <circle cx="16" cy="15" r="5" fill="#E8F4F6"/>
+  <path d="M17.5 10.2a5 5 0 1 0 3.2 7.5 5.8 5.8 0 0 1-3.2-7.5Z" fill="#F4F6F6"/>
+  <path d="M7.5 22c2-1.5 4-1.5 6 0s4 1.5 6 0 4-1.5 6 0" stroke="#8BC5CD" stroke-width="1.5" stroke-linecap="round"/>
+  <path d="M24 6.2c.3 1.2 1 2 2.2 2.2-1.2.3-2 1-2.2 2.2-.3-1.2-1-2-2.2-2.2 1.2-.3 2-1 2.2-2.2Z" fill="#FEE5A1"/>
 </svg>
diff --git a/apps/web/public/icons.svg b/apps/web/public/icons.svg
deleted file mode 100644
index 788874e..0000000
--- a/apps/web/public/icons.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg">
-  <symbol id="bluesky-icon" viewBox="0 0 16 17">
-    <g clip-path="url(#bluesky-clip)"><path fill="#152825" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
-    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
-  </symbol>
-  <symbol id="discord-icon" viewBox="0 0 20 19">
-    <path fill="#152825" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
-  </symbol>
-  <symbol id="documentation-icon" viewBox="0 0 21 20">
-    <path fill="none" stroke="#20b49c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
-    <path fill="none" stroke="#20b49c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
-    <path fill="none" stroke="#20b49c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
-  </symbol>
-  <symbol id="github-icon" viewBox="0 0 19 19">
-    <path fill="#152825" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
-  </symbol>
-  <symbol id="social-icon" viewBox="0 0 20 20">
-    <path fill="none" stroke="#20b49c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
-    <path fill="none" stroke="#20b49c" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
-  </symbol>
-  <symbol id="x-icon" viewBox="0 0 19 19">
-    <path fill="#152825" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
-  </symbol>
-</svg>
diff --git a/apps/web/scripts/check-tokens.mjs b/apps/web/scripts/check-tokens.mjs
new file mode 100644
index 0000000..cc0d30a
--- /dev/null
+++ b/apps/web/scripts/check-tokens.mjs
@@ -0,0 +1,105 @@
+/**
+ * 樣式把關：顏色與字級只能來自 tokens.css。
+ *
+ * 會擋下的事：
+ *   1. css 寫死 font-size 數值（em 例外：那是刻意的相對縮放）
+ *   2. tsx 的 inline style 寫死 fontSize 或色碼
+ *   3. css 出現任何 css 檔都沒定義的 --hb-*（--hb-warn 這種拼錯永遠吃 fallback，很難發現）
+ *   4. css 出現寫死的顏色
+ *   5. 把兩個有彩度的 token 互相 color-mix（藍配橘是補色，混出來一定是濁褐）
+ *
+ * 第 4 條放過兩種情形：純黑純白（只用於陰影與高光的 color-mix，本身不是主題色），
+ * 以及 global.css 主題預覽色塊那 12 個值 —— 那裡必須同時顯示淺色與深色，
+ * 不能吃會隨主題切換的 var()。
+ */
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join } from "node:path";
+
+const STYLE_DIR = "src/styles";
+const NEUTRAL = /^#(fff|000|ffffff|000000)$/i;
+/**
+ * 有彩度的 token。這些彼此不能混：主色在 H≈187、暖色在 H≈32，是補色關係，
+ * 任何比例混出來都是濁褐。要調淡就跟 surface／line／transparent 混，要同一顏色
+ * 的深淺兩階就用 X 與 X-deep。
+ */
+const CHROMATIC =
+  /^--hb-(brand|brand-hover|brand-deep|brand-dim|magic|accent-warm|warning|warning-deep|danger|danger-deep|success|gold|gold-bright)$/;
+const MIX = /color-mix\(in srgb,\s*var\((--hb-[a-z0-9-]+)\)[^,]*,\s*var\((--hb-[a-z0-9-]+)\)\s*\)/g;
+/** 主題預覽色塊：見 global.css 的 .hb-theme-picker__swatch--* */
+const HEX_BUDGET = { "global.css": 12, "layout.css": 0, "ui.css": 0 };
+
+const errors = [];
+
+function walk(dir) {
+  const out = [];
+  for (const name of readdirSync(dir)) {
+    const path = join(dir, name);
+    if (statSync(path).isDirectory()) out.push(...walk(path));
+    else out.push(path);
+  }
+  return out;
+}
+
+const cssFiles = readdirSync(STYLE_DIR).filter((f) => f.endsWith(".css"));
+// 除了 tokens.css 的全域 token，元件內宣告的區域變數（如 --hb-top-ctrl）也算已定義。
+const defined = new Set(
+  cssFiles.flatMap((f) => [
+    ...readFileSync(join(STYLE_DIR, f), "utf8").matchAll(/^\s*(--hb-[a-z0-9-]+)\s*:/gm),
+  ].map((m) => m[1])),
+);
+
+for (const file of readdirSync(STYLE_DIR)) {
+  if (!file.endsWith(".css") || file === "tokens.css") continue;
+  const path = join(STYLE_DIR, file);
+  const text = readFileSync(path, "utf8");
+
+  text.split("\n").forEach((line, i) => {
+    const at = `${path}:${i + 1}`;
+    if (/font-size:\s*[0-9.]+(rem|px|pt)/.test(line)) {
+      errors.push(`${at} 寫死 font-size，請改用 var(--hb-text-*)：${line.trim()}`);
+    }
+    for (const [, name] of line.matchAll(/var\((--hb-[a-z0-9-]+)/g)) {
+      if (!defined.has(name)) {
+        errors.push(`${at} 用了 tokens.css 沒有的 ${name}（拼錯？）`);
+      }
+    }
+    for (const [, a, b] of line.matchAll(MIX)) {
+      if (CHROMATIC.test(a) && CHROMATIC.test(b)) {
+        errors.push(
+          `${at} 混了兩個有彩度的顏色（${a} + ${b}），會變濁。` +
+            `要調淡請跟 surface／line／transparent 混，要深一階請用 -deep。`,
+        );
+      }
+    }
+  });
+
+  const hex = (text.match(/#[0-9a-fA-F]{3,8}\b/g) ?? []).filter((h) => !NEUTRAL.test(h));
+  const budget = HEX_BUDGET[file] ?? 0;
+  if (hex.length > budget) {
+    errors.push(
+      `${path} 寫死顏色 ${hex.length} 處（上限 ${budget}）：${[...new Set(hex)].join(" ")}。` +
+        `顏色請走 tokens.css，否則深淺模式會有一半畫面不跟著切。`,
+    );
+  }
+}
+
+for (const path of walk("src")) {
+  if (!path.endsWith(".tsx")) continue;
+  const text = readFileSync(path, "utf8");
+  text.split("\n").forEach((line, i) => {
+    const at = `${path}:${i + 1}`;
+    if (/fontSize:\s*"[0-9.]/.test(line)) {
+      errors.push(`${at} inline fontSize 寫死，請改用 var(--hb-text-*)`);
+    }
+    if (/(color|background|borderColor):\s*"#[0-9a-fA-F]{3,8}"/.test(line)) {
+      errors.push(`${at} inline 色碼寫死，請改用 var(--hb-*)`);
+    }
+  });
+}
+
+if (errors.length) {
+  console.error(`樣式把關失敗（${errors.length}）：`);
+  for (const e of errors) console.error("  " + e);
+  process.exit(1);
+}
+console.log("樣式把關通過：顏色與字級都來自 tokens.css");
diff --git a/apps/web/src/components/layout/AccountMenu.tsx b/apps/web/src/components/layout/AccountMenu.tsx
index ef66e99..8542705 100644
--- a/apps/web/src/components/layout/AccountMenu.tsx
+++ b/apps/web/src/components/layout/AccountMenu.tsx
@@ -32,7 +32,7 @@ export function AccountMenu() {
   const avatarAccount = {
     display_name: name,
     username: member?.email || "user",
-    avatar_color: "#20b49c",
+    avatar_color: "var(--hb-brand)",
     avatar_url: member?.avatar_url,
   };
 
diff --git a/apps/web/src/components/persona/PersonaWorkbench.tsx b/apps/web/src/components/persona/PersonaWorkbench.tsx
index f0f4f2e..b007cc1 100644
--- a/apps/web/src/components/persona/PersonaWorkbench.tsx
+++ b/apps/web/src/components/persona/PersonaWorkbench.tsx
@@ -377,7 +377,10 @@ export function PersonaWorkbench() {
                 </span>
                 <span className="text-muted hb-persona-item__tone">{toneOf(p) || t("common.dash")}</span>
                 {p.learning_summary ? (
-                  <span className="text-muted" style={{ display: "block", fontSize: "0.8em" }}>
+                  <span
+                    className="text-muted"
+                    style={{ display: "block", fontSize: "var(--hb-text-2xs)" }}
+                  >
                     {p.learning_summary}
                   </span>
                 ) : null}
@@ -511,7 +514,7 @@ export function PersonaWorkbench() {
               })
             }
           />
-          <p className="text-muted" style={{ fontSize: "0.8rem", margin: 0 }}>
+          <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: 0 }}>
             {t("persona.guardChars", { n: selected.guard.maxChars })}
             {selected.guard.banAiTone ? t("persona.banAi") : ""}
             {!isPersonaReady(selected) ? t("persona.notReadySuffix") : ""}
@@ -613,7 +616,7 @@ export function PersonaWorkbench() {
 
           {hasAnalysis ? (
             <div className="hb-stack">
-              <p className="text-muted" style={{ fontSize: "0.875rem", margin: 0 }}>
+              <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)", margin: 0 }}>
                 {t("persona.sampleMeta", { n: selected.style.sampleCount })}
                 {" · "}
                 {selected.style.source === "benchmark"
@@ -643,7 +646,7 @@ export function PersonaWorkbench() {
               ) : null}
             </div>
           ) : (
-            <p className="text-muted" style={{ fontSize: "0.875rem" }}>
+            <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)" }}>
               {t("persona.analyzeHint")}
             </p>
           )}
@@ -652,7 +655,7 @@ export function PersonaWorkbench() {
 
       {detailTab === "fingerprint" ? (
         <div className="hb-stack">
-          <p className="text-muted" style={{ fontSize: "0.875rem", margin: 0 }}>
+          <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)", margin: 0 }}>
             {t("persona.fingerprintHint")}
           </p>
           <Textarea
@@ -670,7 +673,7 @@ export function PersonaWorkbench() {
 
       {detailTab === "preview" ? (
         <div className="hb-stack">
-          <p className="text-muted" style={{ fontSize: "0.875rem", margin: 0 }}>
+          <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)", margin: 0 }}>
             {t("persona.previewHint")}
           </p>
           <Button
@@ -681,12 +684,12 @@ export function PersonaWorkbench() {
             {busy === "preview" ? t("persona.previewRunning") : t("persona.tryGen")}
           </Button>
           {!isPersonaReady(selected) ? (
-            <p className="text-muted" style={{ fontSize: "0.875rem" }}>
+            <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)" }}>
               {t("persona.notReadyMsg")}
             </p>
           ) : null}
           {previewTopic ? (
-            <p className="text-muted" style={{ fontSize: "0.85rem", margin: 0 }}>
+            <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)", margin: 0 }}>
               {t("persona.previewTopicLabel", {
                 topic: previewTopic,
                 source:
@@ -699,7 +702,7 @@ export function PersonaWorkbench() {
             </p>
           ) : null}
           {previewNotes ? (
-            <p className="text-muted" style={{ fontSize: "0.8rem", margin: 0 }}>
+            <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: 0 }}>
               {previewNotes}
             </p>
           ) : null}
diff --git a/apps/web/src/components/studio/ImageAttach.tsx b/apps/web/src/components/studio/ImageAttach.tsx
index 49ede9d..3e6dab0 100644
--- a/apps/web/src/components/studio/ImageAttach.tsx
+++ b/apps/web/src/components/studio/ImageAttach.tsx
@@ -179,12 +179,12 @@ export function ImageAttach({
         </Button>
       </div>
       {uploadingN > 0 ? (
-        <p className="text-muted" style={{ margin: 0, fontSize: "0.8rem" }}>
+        <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-xs)" }}>
           {t("image.uploadingN", { n: uploadingN })}
         </p>
       ) : null}
       {err ? (
-        <p className="hb-form-error" role="alert" style={{ margin: 0, fontSize: "0.8rem" }}>
+        <p className="hb-form-error" role="alert" style={{ margin: 0, fontSize: "var(--hb-text-xs)" }}>
           {err}
         </p>
       ) : null}
diff --git a/apps/web/src/components/studio/ReplyComposer.tsx b/apps/web/src/components/studio/ReplyComposer.tsx
index 143db6f..d86a9b3 100644
--- a/apps/web/src/components/studio/ReplyComposer.tsx
+++ b/apps/web/src/components/studio/ReplyComposer.tsx
@@ -85,7 +85,7 @@ export function ReplyComposer({
         </Select>
       </div>
       {!ready ? (
-        <p className="text-muted" style={{ fontSize: "0.8rem", margin: 0 }}>
+        <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: 0 }}>
           {t("reply.notReady")}
         </p>
       ) : null}
diff --git a/apps/web/src/components/ui/AppIcons.tsx b/apps/web/src/components/ui/AppIcons.tsx
index accc00e..614ec19 100644
--- a/apps/web/src/components/ui/AppIcons.tsx
+++ b/apps/web/src/components/ui/AppIcons.tsx
@@ -48,7 +48,8 @@ function Spark({
   s?: number;
   tone?: "magic" | "accent";
 }) {
-  const color = tone === "accent" ? "var(--hb-accent-warm)" : "var(--hb-magic)";
+  // magic 不用 --hb-magic：那是次色奶油黃，當線條放在淺底上幾乎看不見。
+  const color = tone === "accent" ? "var(--hb-accent-warm)" : "var(--hb-brand-deep)";
   return (
     <g opacity={0.9} transform={`translate(${x} ${y}) scale(${s})`}>
       <path
diff --git a/apps/web/src/data/live/repos.ts b/apps/web/src/data/live/repos.ts
index 1910ec0..848d526 100644
--- a/apps/web/src/data/live/repos.ts
+++ b/apps/web/src/data/live/repos.ts
@@ -502,7 +502,8 @@ function mapAccount(raw: Record<string, unknown>): ThreadsAccount {
     display_name: String(raw.display_name ?? ""),
     connection: (raw.connection as ThreadsAccount["connection"]) ?? "disconnected",
     is_usable: Boolean(raw.is_usable),
-    avatar_color: String(raw.avatar_color ?? "#20b49c"),
+    // 留空字串讓 AccountAvatar 退回 var(--hb-brand)，寫死色碼會不跟著深淺模式切。
+    avatar_color: String(raw.avatar_color ?? ""),
     avatar_url: raw.avatar_url != null ? String(raw.avatar_url) : null,
     error_message: raw.error_message != null ? String(raw.error_message) : undefined,
     session_expires_at: mapUnixNano(raw.session_expires_at),
diff --git a/apps/web/src/pages/AdminUsersPage.tsx b/apps/web/src/pages/AdminUsersPage.tsx
index 73a17df..a415d5c 100644
--- a/apps/web/src/pages/AdminUsersPage.tsx
+++ b/apps/web/src/pages/AdminUsersPage.tsx
@@ -376,7 +376,7 @@ export function AdminUsersPage() {
               {revealed.reason === "create" ? t("admin.users.tempPwNew") : t("admin.users.tempPw")}
               {t("admin.users.tempPwPersist")}
             </p>
-            <span className="text-muted" style={{ fontSize: "0.78rem" }}>
+            <span className="text-muted" style={{ fontSize: "var(--hb-text-xs)" }}>
               {revealed.display_name} · {revealed.email}
               {" · "}
               {formatLocalDateTime(revealed.created_at)}
@@ -396,7 +396,7 @@ export function AdminUsersPage() {
             </div>
           </div>
           {copyHint ? (
-            <p className="text-muted" style={{ margin: 0, fontSize: "0.8rem" }}>
+            <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-xs)" }}>
               <strong style={{ color: "var(--hb-brand)" }}>{copyHint}</strong>
             </p>
           ) : null}
@@ -507,7 +507,7 @@ export function AdminUsersPage() {
               ) : null}
             </div>
             {query ? (
-              <p className="text-muted" style={{ margin: 0, fontSize: "0.8rem" }}>
+              <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-xs)" }}>
                 {t("admin.users.searchActive", { query })}
               </p>
             ) : null}
@@ -582,7 +582,7 @@ export function AdminUsersPage() {
                     {selected.email}
                   </p>
                   <p style={{ margin: "0.35rem 0 0" }}>
-                    <Link to="/app/invite" className="text-muted" style={{ fontSize: "0.82rem" }}>
+                    <Link to="/app/invite" className="text-muted" style={{ fontSize: "var(--hb-text-xs)" }}>
                       {t("invite.openFromAdmin")}
                     </Link>
                   </p>
diff --git a/apps/web/src/pages/BenchmarkPage.tsx b/apps/web/src/pages/BenchmarkPage.tsx
index e9f20b1..ee93710 100644
--- a/apps/web/src/pages/BenchmarkPage.tsx
+++ b/apps/web/src/pages/BenchmarkPage.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { PageHeader } from "../components/layout/PageHeader";
-import { Button, Card, Input } from "../components/ui";
+import { Button, Card } from "../components/ui";
 import { apiRequest } from "../data/live/http";
 
 type Bench = {
@@ -16,19 +16,19 @@ type Bench = {
 };
 
 export function BenchmarkPage() {
-  const [niche, setNiche] = useState("general");
   const [data, setData] = useState<Bench | null>(null);
   const [err, setErr] = useState("");
 
+  // 利基維度還沒有真來源（帳號／品牌都沒存利基），先只比全站桶；
+  // 給輸入框只會讓使用者打出一個永遠「樣本不足」的空桶。
   const load = useCallback(async () => {
     setErr("");
     try {
-      const q = new URLSearchParams({ niche });
-      setData(await apiRequest<Bench>(`/api/v1/benchmark?${q}`));
+      setData(await apiRequest<Bench>("/api/v1/benchmark"));
     } catch (e) {
       setErr(e instanceof Error ? e.message : "fail");
     }
-  }, [niche]);
+  }, []);
 
   useEffect(() => {
     void load();
@@ -36,17 +36,16 @@ export function BenchmarkPage() {
 
   return (
     <>
-      <PageHeader title="同利基基準" description="匿名聚合中位數（樣本≥5 才顯示）" />
-      <div style={{ display: "flex", gap: "0.5rem", marginBottom: "1rem" }}>
-        <Input value={niche} onChange={(e) => setNiche(e.target.value)} placeholder="niche" />
+      <PageHeader title="成效基準" description="全站匿名聚合中位數（樣本≥5 才顯示）" />
+      <div style={{ marginBottom: "1rem" }}>
         <Button type="button" onClick={() => void load()}>
-          查詢
+          重新查詢
         </Button>
       </div>
       {err ? <p className="hb-form-error">{err}</p> : null}
       {data ? (
         <Card>
-          <p>利基：{data.niche} · 樣本 {data.sample_size}</p>
+          <p>樣本 {data.sample_size}</p>
           {data.available ? (
             <>
               <p>
diff --git a/apps/web/src/pages/CrewPage.tsx b/apps/web/src/pages/CrewPage.tsx
index 96d6ec8..e3d1d29 100644
--- a/apps/web/src/pages/CrewPage.tsx
+++ b/apps/web/src/pages/CrewPage.tsx
@@ -214,7 +214,7 @@ export function CrewPage() {
             <Button type="button" onClick={() => void connectAccount()} disabled={Boolean(busy)}>
               {busy === "create" ? t("crew.connecting") : t("crew.connect")}
             </Button>
-            <p className="text-muted" style={{ margin: 0, fontSize: "0.8rem", alignSelf: "center" }}>
+            <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-xs)", alignSelf: "center" }}>
               {t("crew.tokenRenewHint")}
             </p>
           </div>
diff --git a/apps/web/src/pages/ForgotPasswordPage.tsx b/apps/web/src/pages/ForgotPasswordPage.tsx
index 6c227fa..d18b880 100644
--- a/apps/web/src/pages/ForgotPasswordPage.tsx
+++ b/apps/web/src/pages/ForgotPasswordPage.tsx
@@ -46,10 +46,10 @@ export function ForgotPasswordPage() {
             <p className="hb-banner-ok" role="status" style={{ margin: 0 }}>
               {done.message}
             </p>
-            <p className="text-muted" style={{ margin: 0, fontSize: "0.875rem" }}>
+            <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
               {t("forgot.checkInbox")}
             </p>
-            <p className="text-muted" style={{ margin: 0, fontSize: "0.85rem" }}>
+            <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
               {t("forgot.nextStep")}
             </p>
             <Link to={resetPath} className="hb-btn hb-btn--primary">{t("forgot.openReset")}</Link>
@@ -69,7 +69,7 @@ export function ForgotPasswordPage() {
           </div>
         ) : (
           <form className="hb-stack" onSubmit={(e) => void onSubmit(e)}>
-            <p className="text-muted" style={{ margin: 0, fontSize: "0.875rem" }}>
+            <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
               {t("forgot.hint")}
             </p>
             <Input
diff --git a/apps/web/src/pages/JobDetailPage.tsx b/apps/web/src/pages/JobDetailPage.tsx
index 0be3811..11e700d 100644
--- a/apps/web/src/pages/JobDetailPage.tsx
+++ b/apps/web/src/pages/JobDetailPage.tsx
@@ -222,7 +222,7 @@ export function JobDetailPage() {
           ) : null}
           {job.error ? <p className="hb-form-error">{job.error}</p> : null}
           {job.template_type === "compose_mimic" && job.status === "succeeded" ? (
-            <p className="text-muted" style={{ fontSize: "0.875rem", margin: 0 }}>
+            <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)", margin: 0 }}>
               {t("jobs.mimicApplyHint")}
             </p>
           ) : null}
diff --git a/apps/web/src/pages/OutboxDetailPage.tsx b/apps/web/src/pages/OutboxDetailPage.tsx
index 17dd8ab..4305966 100644
--- a/apps/web/src/pages/OutboxDetailPage.tsx
+++ b/apps/web/src/pages/OutboxDetailPage.tsx
@@ -139,7 +139,7 @@ export function OutboxDetailPage() {
         </p>
       ) : null}
       {inFlight ? (
-        <p className="text-muted" style={{ fontSize: "0.875rem" }} role="status">
+        <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)" }} role="status">
           {t("outbox.detail.sendingHint")}
         </p>
       ) : null}
diff --git a/apps/web/src/pages/PlaybooksPage.tsx b/apps/web/src/pages/PlaybooksPage.tsx
index 3e77a1a..57e748e 100644
--- a/apps/web/src/pages/PlaybooksPage.tsx
+++ b/apps/web/src/pages/PlaybooksPage.tsx
@@ -143,7 +143,7 @@ export function PlaybooksPage() {
                 <Badge tone="neutral">{p.author_label}</Badge>
                 <Badge tone="neutral">引用 {p.import_count}</Badge>
               </div>
-              <pre style={{ whiteSpace: "pre-wrap", fontSize: "0.85rem" }}>{p.body.slice(0, 400)}</pre>
+              <pre style={{ whiteSpace: "pre-wrap", fontSize: "var(--hb-text-sm)" }}>{p.body.slice(0, 400)}</pre>
               {!p.mine ? (
                 <Button type="button" disabled={busy === p.id} onClick={() => void importPb(p.id)}>
                   引用
diff --git a/apps/web/src/pages/ResetPasswordPage.tsx b/apps/web/src/pages/ResetPasswordPage.tsx
index 0ed45f2..2475640 100644
--- a/apps/web/src/pages/ResetPasswordPage.tsx
+++ b/apps/web/src/pages/ResetPasswordPage.tsx
@@ -72,7 +72,7 @@ export function ResetPasswordPage() {
             <p className="hb-banner-ok" role="status" style={{ margin: 0 }}>
               {okMsg}
             </p>
-            <p className="text-muted" style={{ margin: 0, fontSize: "0.85rem" }}>
+            <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
               {t("reset.redirecting")}
             </p>
             <Link to="/login">
@@ -81,7 +81,7 @@ export function ResetPasswordPage() {
           </div>
         ) : (
           <form className="hb-stack" onSubmit={(e) => void onSubmit(e)}>
-            <p className="text-muted" style={{ margin: 0, fontSize: "0.875rem" }}>
+            <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
               {t("reset.hint")}
             </p>
             <Input
@@ -113,7 +113,7 @@ export function ResetPasswordPage() {
               required
               placeholder={t("reset.passwordPh")}
             />
-            <p className="text-muted" style={{ margin: 0, fontSize: "0.8rem" }}>
+            <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-xs)" }}>
               {t("password.policy.hint")}
             </p>
             <Input
diff --git a/apps/web/src/pages/ScoutPage.tsx b/apps/web/src/pages/ScoutPage.tsx
index 4673e8d..daa06f4 100644
--- a/apps/web/src/pages/ScoutPage.tsx
+++ b/apps/web/src/pages/ScoutPage.tsx
@@ -677,7 +677,7 @@ export function ScoutPage() {
                 ))}
               </Select>
               {selectedProduct ? (
-                <p className="text-muted" style={{ fontSize: "0.8rem", margin: 0 }}>
+                <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: 0 }}>
                   {t("scout.placement", { label: selectedProduct.label })}
                   {selectedProduct.pain_points?.[0]
                     ? t("scout.painPart", { pain: selectedProduct.pain_points[0] })
@@ -685,7 +685,7 @@ export function ScoutPage() {
                 </p>
               ) : null}
               {allProducts.length === 0 ? (
-                <p className="text-muted" style={{ fontSize: "0.8rem", margin: 0 }}>
+                <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: 0 }}>
                   {t("scout.noProductsBefore")}{" "}
                   <Link to="/app/brands">{t("nav.brands")}</Link>{" "}
                   {t("scout.noProductsAfter")}
@@ -724,7 +724,7 @@ export function ScoutPage() {
       {runGroups.length > 0 ? (
         <Card title={t("scout.runs")}>
           <div className="hb-stack">
-            <p className="text-muted" style={{ margin: 0, fontSize: "0.85rem" }}>
+            <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
               {t("scout.runCount", { n: runGroups.length })}
             </p>
             <div className="hb-scout-run-list">
@@ -785,7 +785,7 @@ export function ScoutPage() {
             </div>
             <p className="hb-scout-now__text">{current.text}</p>
             {current.created_at || allowHttpUrl(current.permalink) ? (
-              <p className="text-muted" style={{ fontSize: "0.8rem", margin: 0 }}>
+              <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: 0 }}>
                 {current.created_at ? t("scout.createdAt", { time: formatLocalDateTime(current.created_at) }) : ""}
                 {current.created_at && allowHttpUrl(current.permalink) ? " · " : ""}
                 {allowHttpUrl(current.permalink) ? (
@@ -796,12 +796,12 @@ export function ScoutPage() {
               </p>
             ) : null}
             {current.match_reason ? (
-              <p className="text-muted" style={{ fontSize: "0.8rem", margin: 0 }}>
+              <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: 0 }}>
                 {current.match_reason}
               </p>
             ) : null}
             {current.opportunity ? (
-              <p className="text-muted" style={{ fontSize: "0.8rem", margin: 0 }}>
+              <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: 0 }}>
                 {current.opportunity}
               </p>
             ) : null}
@@ -814,7 +814,7 @@ export function ScoutPage() {
               placeholder={current.scout_mode === "activity" ? t("scout.draftPhActivity") : t("scout.draftPhValue")}
             />
 
-            <p className="text-muted" style={{ fontSize: "0.85rem", margin: 0 }}>
+            <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)", margin: 0 }}>
               {t("scout.manualReplyHint")}
             </p>
 
diff --git a/apps/web/src/pages/SettingsPage.tsx b/apps/web/src/pages/SettingsPage.tsx
index 791e8d2..60aade2 100644
--- a/apps/web/src/pages/SettingsPage.tsx
+++ b/apps/web/src/pages/SettingsPage.tsx
@@ -304,7 +304,7 @@ export function SettingsPage() {
       <Card title={t("settings.ai")}>
         {ai ? (
           <div className="hb-stack">
-            <p className="text-muted" style={{ margin: 0, fontSize: "0.85rem" }}>
+            <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
               {t("settings.aiUnifiedHint")}
             </p>
             <Select
@@ -353,11 +353,11 @@ export function SettingsPage() {
               }
             />
             {ai.models_error ? (
-              <p className="text-muted" style={{ margin: 0, fontSize: "0.85rem" }}>
+              <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
                 {t("settings.modelsHint")}: {ai.models_error}
               </p>
             ) : ai.models_from_cache ? (
-              <p className="text-muted" style={{ margin: 0, fontSize: "0.85rem" }}>
+              <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
                 {t("settings.modelsCached")}
               </p>
             ) : null}
diff --git a/apps/web/src/pages/TodayPage.tsx b/apps/web/src/pages/TodayPage.tsx
index 09a74f5..b1f4df3 100644
--- a/apps/web/src/pages/TodayPage.tsx
+++ b/apps/web/src/pages/TodayPage.tsx
@@ -210,7 +210,7 @@ export function TodayPage() {
             display_name: accId,
             connection: "connected",
             is_usable: true,
-            avatar_color: "#888",
+            avatar_color: "var(--hb-muted)",
           } as ThreadsAccount);
         rows.push({
           account: acc,
@@ -338,7 +338,7 @@ export function TodayPage() {
           </div>
         </div>
         {!hasOutcome ? (
-          <p className="text-muted" style={{ margin: 0, fontSize: "0.85rem" }}>
+          <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
             {t("today.outcome.emptyHint")}{" "}
             <Link to="/app/scout">{t("today.goScout")}</Link>
           </p>
@@ -375,7 +375,7 @@ export function TodayPage() {
             </ul>
           </div>
         ) : (
-          <p className="text-muted" style={{ margin: "0.75rem 0 0", fontSize: "0.85rem" }}>
+          <p className="text-muted" style={{ margin: "0.75rem 0 0", fontSize: "var(--hb-text-sm)" }}>
             {t("today.checkup.empty")}
           </p>
         )}
@@ -482,7 +482,7 @@ export function TodayPage() {
               ))}
             </ul>
             {pendingScout.length > pendingPreview.length ? (
-              <p className="text-muted" style={{ margin: 0, fontSize: "0.85rem" }}>
+              <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
                 {t("today.pending.more", { n: pendingScout.length - pendingPreview.length })}{" "}
                 <Link to="/app/scout">{t("today.pending.handle")}</Link>
               </p>
@@ -589,7 +589,7 @@ export function TodayPage() {
           </p>
         ) : (
           <div className="hb-stack" style={{ gap: "0.5rem" }}>
-            <p style={{ margin: 0, fontSize: "0.9rem" }}>
+            <p style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
               {t("today.outbox.summary", {
                 sent: sentToday,
                 running: runningOutbox.length,
@@ -597,13 +597,13 @@ export function TodayPage() {
               })}
             </p>
             {failedOutbox.slice(0, 2).map((o) => (
-              <p key={o.id} style={{ margin: 0, fontSize: "0.85rem" }}>
+              <p key={o.id} style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
                 <Badge tone="danger">{t("today.badge.failed")}</Badge>{" "}
                 <Link to={`/app/outbox/${o.id}`}>{o.title || o.id.slice(0, 8)}</Link>
               </p>
             ))}
             {runningOutbox.slice(0, 2).map((o) => (
-              <p key={o.id} style={{ margin: 0, fontSize: "0.85rem" }}>
+              <p key={o.id} style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
                 <Badge tone="brand">
                   {o.status === "scheduling"
                     ? t("today.badge.scheduling")
@@ -653,7 +653,7 @@ export function TodayPage() {
                 <li key={row.account.id} className="hb-today-account">
                   <div className="hb-today-account__head">
                     <strong>@{row.account.username}</strong>
-                    <span className="text-muted" style={{ fontSize: "0.78rem" }}>
+                    <span className="text-muted" style={{ fontSize: "var(--hb-text-xs)" }}>
                       {t("today.postsCount", { n: row.posts })}
                     </span>
                   </div>
diff --git a/apps/web/src/pages/UsagePage.tsx b/apps/web/src/pages/UsagePage.tsx
index cc5bb07..8b48370 100644
--- a/apps/web/src/pages/UsagePage.tsx
+++ b/apps/web/src/pages/UsagePage.tsx
@@ -327,7 +327,7 @@ export function UsagePage() {
                 : ""}
             </p>
             {!outcomeSummary?.reach && !outcomeSummary?.conversations && !outcomeSummary?.conversions ? (
-              <p className="text-muted" style={{ margin: "0.35rem 0 0", fontSize: "0.82rem" }}>
+              <p className="text-muted" style={{ margin: "0.35rem 0 0", fontSize: "var(--hb-text-xs)" }}>
                 {t("usage.outcome.emptyHint")}
               </p>
             ) : null}
diff --git a/apps/web/src/pages/UtmLinksPage.tsx b/apps/web/src/pages/UtmLinksPage.tsx
index 5eeea73..9776c06 100644
--- a/apps/web/src/pages/UtmLinksPage.tsx
+++ b/apps/web/src/pages/UtmLinksPage.tsx
@@ -7,6 +7,8 @@ type Link = {
   id: string;
   code: string;
   track_path: string;
+  /** 後端算好的絕對網址；舊版後端沒有這欄，退回 track_path。 */
+  track_url?: string;
   destination_url: string;
   outcome_id?: string;
   label?: string;
@@ -14,11 +16,14 @@ type Link = {
   created_at: number;
 };
 
+function trackUrlOf(l: Link): string {
+  return l.track_url || `${window.location.origin}${l.track_path}`;
+}
+
 export function UtmLinksPage() {
   const [list, setList] = useState<Link[]>([]);
   const [url, setUrl] = useState("");
   const [label, setLabel] = useState("");
-  const [outcomeId, setOutcomeId] = useState("");
   const [msg, setMsg] = useState("");
 
   const load = useCallback(async () => {
@@ -34,11 +39,10 @@ export function UtmLinksPage() {
     try {
       await apiRequest("/api/v1/utm/links", {
         method: "POST",
-        body: { destination_url: url, label, outcome_id: outcomeId || undefined },
+        body: { destination_url: url, label },
       });
       setUrl("");
       setLabel("");
-      setOutcomeId("");
       await load();
       setMsg("已建立追蹤連結");
     } catch (e) {
@@ -46,19 +50,23 @@ export function UtmLinksPage() {
     }
   }
 
+  async function copy(l: Link) {
+    try {
+      await navigator.clipboard.writeText(trackUrlOf(l));
+      setMsg("已複製追蹤連結");
+    } catch {
+      setMsg("複製失敗，請手動選取網址");
+    }
+  }
+
   return (
     <>
-      <PageHeader title="UTM 追蹤連結" description="點擊自動計入成果歸因" />
+      <PageHeader title="UTM 追蹤連結" description="貼進貼文的可追蹤連結，累計點擊次數" />
       {msg ? <p className="text-muted">{msg}</p> : null}
       <Card title="新建">
         <div className="hb-stack">
           <Input label="目標 URL" value={url} onChange={(e) => setUrl(e.target.value)} />
           <Input label="標籤" value={label} onChange={(e) => setLabel(e.target.value)} />
-          <Input
-            label="綁定 Outcome ID（選填）"
-            value={outcomeId}
-            onChange={(e) => setOutcomeId(e.target.value)}
-          />
           <Button type="button" disabled={!url.startsWith("http")} onClick={() => void create()}>
             建立
           </Button>
@@ -71,11 +79,13 @@ export function UtmLinksPage() {
           {list.map((l) => (
             <Card key={l.id} title={l.label || l.code}>
               <p className="text-muted" style={{ wordBreak: "break-all" }}>
-                追蹤：{window.location.origin}
-                {l.track_path}
+                追蹤：{trackUrlOf(l)}
               </p>
               <p>目標：{l.destination_url}</p>
               <p>點擊：{l.clicks}</p>
+              <Button type="button" onClick={() => void copy(l)}>
+                複製連結
+              </Button>
             </Card>
           ))}
         </ul>
diff --git a/apps/web/src/pages/VerifyEmailPage.tsx b/apps/web/src/pages/VerifyEmailPage.tsx
index d97d6ff..98f6df9 100644
--- a/apps/web/src/pages/VerifyEmailPage.tsx
+++ b/apps/web/src/pages/VerifyEmailPage.tsx
@@ -81,8 +81,8 @@ export function VerifyEmailPage() {
         <div className="hb-stack">
           <div className="hb-verify-status">
             <span className="hb-verify-status__badge is-pending">{t("verify.pending")}</span>
-            <p style={{ margin: 0, fontSize: "0.9rem" }}>{t("verify.body")}</p>
-            <p className="text-muted" style={{ margin: 0, fontSize: "0.82rem" }}>
+            <p style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>{t("verify.body")}</p>
+            <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-xs)" }}>
               {t("verify.currentAccount", { email: member.email })}
               {" · "}
               {role.primaryLabel}
@@ -136,7 +136,7 @@ export function VerifyEmailPage() {
             </Button>
           </div>
 
-          <p className="text-muted" style={{ margin: 0, fontSize: "0.78rem", textAlign: "center" }}>
+          <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-xs)", textAlign: "center" }}>
             {t("verify.after")}
           </p>
         </div>
diff --git a/apps/web/src/pages/studio/ComposerPanel.tsx b/apps/web/src/pages/studio/ComposerPanel.tsx
index 51d9ff8..96947e1 100644
--- a/apps/web/src/pages/studio/ComposerPanel.tsx
+++ b/apps/web/src/pages/studio/ComposerPanel.tsx
@@ -271,12 +271,12 @@ export function ComposerPanel({ accountId, personaId, personaReady }: Props) {
 
   return (
     <div className="hb-stack">
-      <p className="text-muted" style={{ fontSize: "0.875rem", margin: 0 }}>
+      <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)", margin: 0 }}>
         {t("compose.hint")} <Link to="/app/studio?tab=plays">{t("compose.playsLink")}</Link>
         {t("compose.hintEnd")}
       </p>
       {!personaReady ? (
-        <p className="text-muted" style={{ fontSize: "0.875rem" }}>
+        <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)" }}>
           {t("compose.personaOff")}
         </p>
       ) : null}
diff --git a/apps/web/src/pages/studio/InsightsPanel.tsx b/apps/web/src/pages/studio/InsightsPanel.tsx
index 1bf6afd..6049abf 100644
--- a/apps/web/src/pages/studio/InsightsPanel.tsx
+++ b/apps/web/src/pages/studio/InsightsPanel.tsx
@@ -425,7 +425,7 @@ export function InsightsPanel({
           </Select>
         ) : (
           <div className="hb-insights-toolbar__hint">
-            <p className="text-muted" style={{ margin: 0, fontSize: "0.85rem" }}>
+            <p className="text-muted" style={{ margin: 0, fontSize: "var(--hb-text-sm)" }}>
               {t("insights.panelHint")}
               {syncedAt ? (
                 <>
@@ -576,7 +576,7 @@ export function InsightsPanel({
                 <div className="hb-insights-snap-panel">
                   <div className="hb-insights-snap-meta">
                     <strong>{t("insights.analysisOf", { label: selectedSnap.month_label })}</strong>
-                    <span className="text-muted" style={{ fontSize: "0.8rem" }}>
+                    <span className="text-muted" style={{ fontSize: "var(--hb-text-xs)" }}>
                       {t("insights.producedAt", { time: formatLocalDateTime(selectedSnap.analyzed_at) })}
                       {selectedSnap.delta.views != null
                         ? t("insights.viewsVsPrev", { delta: fmtDelta(selectedSnap.delta.views) })
@@ -702,12 +702,12 @@ export function InsightsPanel({
                         {p.text.length > 120 ? "…" : ""}
                       </span>
                       {p.insight || p.formula_summary ? (
-                        <span className="text-muted" style={{ fontSize: "0.8rem" }}>
+                        <span className="text-muted" style={{ fontSize: "var(--hb-text-xs)" }}>
                           {p.insight || p.formula_summary}
                         </span>
                       ) : null}
                       {p.permalink ? (
-                        <a href={p.permalink} target="_blank" rel="noreferrer" style={{ fontSize: "0.8rem" }}>
+                        <a href={p.permalink} target="_blank" rel="noreferrer" style={{ fontSize: "var(--hb-text-xs)" }}>
                           {t("insights.openThreads")}
                         </a>
                       ) : null}
diff --git a/apps/web/src/pages/studio/InspirePanel.tsx b/apps/web/src/pages/studio/InspirePanel.tsx
index 99bec9e..614ec77 100644
--- a/apps/web/src/pages/studio/InspirePanel.tsx
+++ b/apps/web/src/pages/studio/InspirePanel.tsx
@@ -1249,7 +1249,7 @@ export function InspirePanel({ accountId, personaId, personaReady }: Props) {
                 );
               })}
               {brands.length === 0 ? (
-                <p className="text-muted" style={{ fontSize: "0.8rem", margin: 0 }}>
+                <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: 0 }}>
                   {t("inspire.noBrands")}
                 </p>
               ) : null}
diff --git a/apps/web/src/pages/studio/MentionsPanel.tsx b/apps/web/src/pages/studio/MentionsPanel.tsx
index 0cfba89..0120996 100644
--- a/apps/web/src/pages/studio/MentionsPanel.tsx
+++ b/apps/web/src/pages/studio/MentionsPanel.tsx
@@ -116,7 +116,7 @@ export function MentionsPanel({ accountId, personaId, accounts, personas }: Prop
   return (
     <div className="hb-stack">
       <div className="hb-wizard-actions" style={{ justifyContent: "space-between", flexWrap: "wrap" }}>
-        <p className="text-muted" style={{ fontSize: "0.875rem", margin: 0 }}>
+        <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)", margin: 0 }}>
           {t("mentions.hint", { n: pending })}
           {" · "}
           <Link to="/app/scout">{t("mentions.scoutLink")}</Link>
@@ -161,11 +161,11 @@ export function MentionsPanel({ accountId, personaId, accounts, personas }: Prop
                     : t("mentions.status.skipped")}
               </Badge>
               <Badge tone="neutral">@{m.from_username}</Badge>
-              <span className="text-muted" style={{ fontSize: "0.8rem" }}>
+              <span className="text-muted" style={{ fontSize: "var(--hb-text-xs)" }}>
                 {formatLocalDateTime(m.created_at)}
               </span>
             </div>
-            <p className="text-muted" style={{ fontSize: "0.8rem", margin: "0 0 0.35rem" }}>
+            <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: "0 0 0.35rem" }}>
               {m.context_snippet}
               {allowHttpUrl(m.permalink) ? (
                 <>
@@ -208,7 +208,7 @@ export function MentionsPanel({ accountId, personaId, accounts, personas }: Prop
               />
             ) : null}
             {m.status === "replied" && m.draft_text ? (
-              <p className="text-muted" style={{ fontSize: "0.875rem" }}>
+              <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)" }}>
                 {t("mentions.repliedPrefix", { text: m.draft_text })}
               </p>
             ) : null}
diff --git a/apps/web/src/pages/studio/OwnPostsPanel.tsx b/apps/web/src/pages/studio/OwnPostsPanel.tsx
index 6ccc690..2dc17b7 100644
--- a/apps/web/src/pages/studio/OwnPostsPanel.tsx
+++ b/apps/web/src/pages/studio/OwnPostsPanel.tsx
@@ -341,12 +341,12 @@ export function OwnPostsPanel({ accountId, personaId, accounts, personas }: Prop
 
               {/* AI 結構分析：有結果就顯示；詳細區在展開時更清楚 */}
               {showAnalysis && post.insight ? (
-                <p className="text-muted" style={{ fontSize: "0.875rem" }}>
+                <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)" }}>
                   {t("posts.insight", { text: post.insight })}
                 </p>
               ) : null}
               {showAnalysis && post.formula_summary ? (
-                <p className="text-muted" style={{ fontSize: "0.8rem" }}>
+                <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)" }}>
                   {t("posts.review", { text: post.formula_summary })}
                 </p>
               ) : null}
@@ -419,7 +419,7 @@ export function OwnPostsPanel({ accountId, personaId, accounts, personas }: Prop
               {open ? (
                 <div className="hb-stack" style={{ marginTop: "0.75rem" }}>
                   {busy === `replies:${post.id}` ? (
-                    <p className="text-muted" style={{ fontSize: "0.875rem" }}>
+                    <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)" }}>
                       {t("posts.loadingReplies")}
                     </p>
                   ) : null}
@@ -485,12 +485,12 @@ export function OwnPostsPanel({ accountId, personaId, accounts, personas }: Prop
                                   </Badge>
                                   <strong>@{r.username}</strong>
                                   {typeof r.like_count === "number" ? (
-                                    <span className="text-muted" style={{ fontSize: "0.8rem" }}>
+                                    <span className="text-muted" style={{ fontSize: "var(--hb-text-xs)" }}>
                                       {t("posts.likesN", { n: r.like_count })}
                                     </span>
                                   ) : null}
                                   {kids.length > 0 ? (
-                                    <span className="text-muted" style={{ fontSize: "0.8rem" }}>
+                                    <span className="text-muted" style={{ fontSize: "var(--hb-text-xs)" }}>
                                       {t("posts.childCount", { n: kids.length })}
                                     </span>
                                   ) : null}
@@ -510,7 +510,7 @@ export function OwnPostsPanel({ accountId, personaId, accounts, personas }: Prop
                                           <div className="hb-inline-badges">
                                             {mine ? <Badge tone="brand">{t("posts.mine")}</Badge> : null}
                                             <strong>@{c.username}</strong>
-                                            <span className="text-muted" style={{ fontSize: "0.75rem" }}>
+                                            <span className="text-muted" style={{ fontSize: "var(--hb-text-2xs)" }}>
                                               {formatLocalDateTime(c.created_at)}
                                             </span>
                                           </div>
diff --git a/apps/web/src/pages/studio/PlaysPanel.tsx b/apps/web/src/pages/studio/PlaysPanel.tsx
index ab19ace..8922fb3 100644
--- a/apps/web/src/pages/studio/PlaysPanel.tsx
+++ b/apps/web/src/pages/studio/PlaysPanel.tsx
@@ -682,7 +682,7 @@ export function PlaysPanel({ accountId, personas: personasProp = [] }: Props) {
                 {busy === "resolve" ? t("plays.resolving") : t("plays.resolve")}
               </Button>
             </div>
-            <p className="text-muted" style={{ fontSize: "0.8rem", margin: 0 }}>
+            <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: 0 }}>
               {t("plays.resolveHint")}
             </p>
           </div>
@@ -691,11 +691,11 @@ export function PlaysPanel({ accountId, personas: personasProp = [] }: Props) {
 
       {targetMode === "own" && selectedPost ? (
         <Card>
-          <p className="text-muted" style={{ fontSize: "0.8rem", margin: "0 0 0.35rem" }}>
+          <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: "0 0 0.35rem" }}>
             {t("plays.targetOwn")}
           </p>
           <p style={{ margin: 0 }}>{selectedPost.text}</p>
-          <p className="text-muted" style={{ fontSize: "0.8rem", margin: "0.35rem 0 0" }}>
+          <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: "0.35rem 0 0" }}>
             {formatLocalDateTime(selectedPost.published_at)}
             {allowHttpUrl(selectedPost.permalink) ? (
               <>
@@ -721,7 +721,7 @@ export function PlaysPanel({ accountId, personas: personasProp = [] }: Props) {
             ) : null}
           </div>
           <p style={{ margin: "0 0 0.35rem" }}>{external.text_preview}</p>
-          <p className="text-muted" style={{ fontSize: "0.8rem", margin: 0 }}>
+          <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)", margin: 0 }}>
             {allowHttpUrl(external.url) ? (
               <a href={allowHttpUrl(external.url) ?? undefined} target="_blank" rel="noreferrer">
                 {external.url}
@@ -762,7 +762,7 @@ export function PlaysPanel({ accountId, personas: personasProp = [] }: Props) {
                   <div className="hb-list-row">
                     <div>
                       <strong>{s.title}</strong>
-                      <p className="text-muted" style={{ fontSize: "0.875rem" }}>
+                      <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)" }}>
                         {t("plays.replyCount", { n: s.steps.length })}
                         {" · "}
                         {s.steps
@@ -822,7 +822,7 @@ export function PlaysPanel({ accountId, personas: personasProp = [] }: Props) {
                   })}
                 </div>
                 {poolAccounts.length === 0 ? (
-                  <p className="text-muted" style={{ fontSize: "0.8rem" }}>
+                  <p className="text-muted" style={{ fontSize: "var(--hb-text-xs)" }}>
                     {t("plays.noAccounts")}
                   </p>
                 ) : null}
diff --git a/apps/web/src/pages/studio/steps/PreviewStep.tsx b/apps/web/src/pages/studio/steps/PreviewStep.tsx
index 8535921..dd8fd3c 100644
--- a/apps/web/src/pages/studio/steps/PreviewStep.tsx
+++ b/apps/web/src/pages/studio/steps/PreviewStep.tsx
@@ -26,7 +26,7 @@ export function PreviewStep({ draft, accountMap }: Props) {
                     acc || {
                       display_name: t("wizard.preview.unknown"),
                       username: "?",
-                      avatar_color: "#888",
+                      avatar_color: "var(--hb-muted)",
                     }
                   }
                 />
diff --git a/apps/web/src/pages/studio/steps/ScriptStep.tsx b/apps/web/src/pages/studio/steps/ScriptStep.tsx
index be0488a..54fb553 100644
--- a/apps/web/src/pages/studio/steps/ScriptStep.tsx
+++ b/apps/web/src/pages/studio/steps/ScriptStep.tsx
@@ -111,12 +111,12 @@ export function ScriptStep({ draft, accounts, onChange }: Props) {
         ))}
       </Select>
       {!ready ? (
-        <p className="text-muted" style={{ fontSize: "0.875rem", marginTop: "0.5rem" }}>
+        <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)", marginTop: "0.5rem" }}>
           {t("wizard.script.personaNotReady")}
         </p>
       ) : null}
       {aiError ? (
-        <p className="hb-form-error" role="alert" style={{ fontSize: "0.875rem" }}>
+        <p className="hb-form-error" role="alert" style={{ fontSize: "var(--hb-text-sm)" }}>
           {aiError}
         </p>
       ) : null}
diff --git a/apps/web/src/pages/studio/steps/TopicStep.tsx b/apps/web/src/pages/studio/steps/TopicStep.tsx
index c13434e..72d1f5a 100644
--- a/apps/web/src/pages/studio/steps/TopicStep.tsx
+++ b/apps/web/src/pages/studio/steps/TopicStep.tsx
@@ -60,7 +60,7 @@ export function TopicStep({ draft, onChange }: Props) {
           ))}
         </Select>
         {!ready ? (
-          <p className="text-muted" style={{ fontSize: "0.875rem" }}>
+          <p className="text-muted" style={{ fontSize: "var(--hb-text-sm)" }}>
             {t("wizard.topic.personaNotReady")}
           </p>
         ) : null}
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
index 4fc7209..4d25e48 100644
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -36,7 +36,7 @@ body {
   color: var(--hb-ink);
   /* 星圖網格 + 潮汐法光，低對比避免干擾資訊。 */
   background:
-    radial-gradient(circle at 24px 24px, color-mix(in srgb, var(--hb-magic) 22%, transparent) 0 1px, transparent 1.4px) 0 0 / 56px 56px,
+    radial-gradient(circle at 24px 24px, color-mix(in srgb, var(--hb-brand) 16%, transparent) 0 1px, transparent 1.4px) 0 0 / 56px 56px,
     linear-gradient(color-mix(in srgb, var(--hb-brand) 4%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
     linear-gradient(90deg, color-mix(in srgb, var(--hb-brand) 4%, transparent) 1px, transparent 1px) 0 0 / 80px 80px,
     radial-gradient(ellipse 70% 50% at 0% -5%, var(--hb-aurora-1), transparent 55%),
@@ -76,7 +76,7 @@ a:hover {
 code,
 kbd,
 pre {
-  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-family: var(--hb-font-mono);
 }
 
 button,
@@ -152,10 +152,10 @@ svg {
   place-items: center;
   padding: var(--hb-space-6);
   background:
-    radial-gradient(circle at 28px 28px, color-mix(in srgb, var(--hb-magic) 28%, transparent) 0 1px, transparent 1.5px) 0 0 / 64px 64px,
-    radial-gradient(ellipse 70% 50% at 15% 0%, color-mix(in srgb, var(--hb-fun-lavender) 18%, transparent), transparent 55%),
-    radial-gradient(ellipse 60% 45% at 90% 10%, color-mix(in srgb, var(--hb-fun-mint) 13%, transparent), transparent 50%),
-    radial-gradient(ellipse 50% 40% at 50% 100%, color-mix(in srgb, var(--hb-fun-coral) 8%, transparent), transparent 50%),
+    radial-gradient(circle at 28px 28px, color-mix(in srgb, var(--hb-brand) 20%, transparent) 0 1px, transparent 1.5px) 0 0 / 64px 64px,
+    radial-gradient(ellipse 70% 50% at 15% 0%, color-mix(in srgb, var(--hb-brand-dim) 18%, transparent), transparent 55%),
+    radial-gradient(ellipse 60% 45% at 90% 10%, color-mix(in srgb, var(--hb-brand) 13%, transparent), transparent 50%),
+    radial-gradient(ellipse 50% 40% at 50% 100%, color-mix(in srgb, var(--hb-brand-dim) 10%, transparent), transparent 50%),
     var(--hb-bg);
 }
 
@@ -174,7 +174,7 @@ svg {
   box-shadow:
     0 0 0 1px color-mix(in srgb, var(--hb-brand) 24%, transparent),
     0 0 24px var(--hb-magic-glow),
-    0 8px 20px rgb(43 32 96 / 0.22);
+    0 8px 20px color-mix(in srgb, var(--hb-ink) 22%, transparent);
 }
 
 .hb-login-brand__text {
@@ -185,12 +185,12 @@ svg {
 }
 
 .hb-login-brand__text strong {
-  font-size: 1.05rem;
+  font-size: var(--hb-text-lg);
   letter-spacing: -0.02em;
 }
 
 .hb-login-brand__text span {
-  font-size: 0.72rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 600;
 }
 
@@ -215,9 +215,9 @@ svg {
 
 .hb-login-forgot {
   align-self: flex-end;
-  font-size: 0.82rem;
+  font-size: var(--hb-text-xs);
   font-weight: 600;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   text-decoration: none;
 }
 
@@ -227,10 +227,10 @@ svg {
 
 .hb-login-back {
   display: block;
-  font-size: 0.875rem;
+  font-size: var(--hb-text-sm);
   font-weight: 600;
   text-align: center;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   text-decoration: none;
 }
 
@@ -250,8 +250,8 @@ svg {
 
 .hb-login-mock-mail__link {
   font-weight: 650;
-  font-size: 0.9rem;
-  color: var(--hb-brand);
+  font-size: var(--hb-text-sm);
+  color: var(--hb-brand-deep);
 }
 
 /* —— 天地系統：堆疊／區段預設不貼死 —— */
@@ -279,7 +279,7 @@ svg {
 
 .hb-form-error {
   margin: 0;
-  color: var(--hb-danger);
+  color: var(--hb-danger-deep);
   font-size: var(--hb-text-sm);
   line-height: 1.5;
   padding: 0.15rem 0;
@@ -331,7 +331,7 @@ svg {
 
 .hb-stepper__item.is-active {
   border-color: var(--hb-brand);
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   background: var(--hb-brand-soft);
 }
 
@@ -346,7 +346,7 @@ svg {
   display: grid;
   place-items: center;
   background: var(--hb-surface-muted);
-  font-size: 0.7rem;
+  font-size: var(--hb-text-2xs);
 }
 
 .hb-choice {
@@ -382,27 +382,28 @@ svg {
 .hb-avatar--sm {
   width: 1.375rem;
   height: 1.375rem;
-  font-size: 0.55rem;
+  font-size: var(--hb-text-2xs);
   border-width: 1.5px;
 }
 
 .hb-avatar--lg {
   width: 2.85rem;
   height: 2.85rem;
-  font-size: 0.95rem;
+  font-size: var(--hb-text-base);
   box-shadow:
     0 0 0 1px color-mix(in srgb, var(--hb-line) 40%, transparent),
     0 3px 10px color-mix(in srgb, var(--hb-brand) 12%, transparent);
 }
 
+/* 底色由 avatar_color 帶入（後端配色皆為中間調），近黑字在那組上有 6:1 以上，
+   不再需要原本用來救白字的暗色陰影。 */
 .hb-avatar--initials {
-  color: #fff;
-  font-size: 0.72rem;
+  color: var(--hb-brand-on);
+  font-size: var(--hb-text-2xs);
   font-weight: 700;
   letter-spacing: 0.02em;
   line-height: 1;
   user-select: none;
-  text-shadow: 0 1px 1px rgb(0 0 0 / 0.12);
 }
 
 .hb-avatar--img {
@@ -550,13 +551,13 @@ svg {
 
 .hb-chip:hover {
   border-color: var(--hb-brand);
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-chip.is-active {
   background: var(--hb-brand-soft);
   border-color: var(--hb-brand);
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 /* —— 靈感：固定高度工作區（左右同高；左欄=上/訊息/底 三列 grid，底永不被裁） —— */
@@ -621,7 +622,7 @@ svg {
 }
 
 .hb-inspire-session-bar__label {
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 600;
   color: var(--hb-muted);
   flex-shrink: 0;
@@ -637,7 +638,7 @@ svg {
   background: var(--hb-surface-muted, var(--hb-surface));
   color: var(--hb-text);
   font: inherit;
-  font-size: 0.8125rem;
+  font-size: var(--hb-text-xs);
   padding: 0 0.5rem;
 }
 
@@ -673,21 +674,21 @@ svg {
 }
 
 .hb-inspire-trends__label {
-  font-size: 0.8125rem;
+  font-size: var(--hb-text-xs);
   font-weight: 600;
   color: var(--hb-muted);
   letter-spacing: 0.01em;
 }
 
 .hb-inspire-trends__hint {
-  font-size: 0.7rem;
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
   opacity: 0.85;
   line-height: 1.3;
 }
 
 .hb-inspire-trends__empty {
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
   padding: 0.25rem 0;
 }
@@ -705,7 +706,7 @@ svg {
   background: transparent;
   color: var(--hb-muted);
   font: inherit;
-  font-size: 0.8125rem;
+  font-size: var(--hb-text-xs);
   font-weight: 600;
   padding: 0.35rem 0.5rem;
   min-height: 2rem;
@@ -715,7 +716,7 @@ svg {
 }
 
 .hb-inspire-tool-btn:hover:not(:disabled) {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   background: var(--hb-surface-muted);
 }
 
@@ -752,7 +753,7 @@ svg {
   border-radius: var(--hb-radius-pill) 0 0 var(--hb-radius-pill);
   background: var(--hb-surface-muted);
   padding: 0 0.65rem 0 0.45rem;
-  font-size: 0.8125rem;
+  font-size: var(--hb-text-xs);
   cursor: pointer;
   color: var(--hb-text);
   line-height: 1.2;
@@ -775,7 +776,7 @@ svg {
   border-radius: 999px;
   background: color-mix(in srgb, var(--hb-brand) 18%, var(--hb-surface));
   color: var(--hb-muted);
-  font-size: 0.65rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 700;
   display: inline-flex;
   align-items: center;
@@ -783,13 +784,13 @@ svg {
 }
 
 .hb-inspire-trend-chip__seed {
-  font-size: 0.65rem;
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
   flex-shrink: 0;
 }
 
 .hb-inspire-trend-chip__heat {
-  font-size: 0.7rem;
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
 }
 
@@ -798,7 +799,7 @@ svg {
   border-radius: 0 var(--hb-radius-pill) var(--hb-radius-pill) 0;
   background: var(--hb-surface);
   padding: 0 0.55rem;
-  font-size: 0.95rem;
+  font-size: var(--hb-text-base);
   cursor: pointer;
   color: var(--hb-muted);
   height: 100%;
@@ -806,12 +807,12 @@ svg {
 }
 
 .hb-inspire-trend-chip__pin:hover {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-inspire-status {
   margin: 0.15rem 0 0;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   max-height: 2.6rem;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -853,7 +854,7 @@ svg {
 }
 
 .hb-inspire-msg__role {
-  font-size: 0.7rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 600;
   color: var(--hb-muted);
   margin-bottom: 0.2rem;
@@ -871,7 +872,7 @@ svg {
   }
 }
 .hb-inspire-msg__text {
-  font-size: 0.9rem;
+  font-size: var(--hb-text-sm);
   line-height: 1.55;
   white-space: pre-wrap;
   word-break: break-word;
@@ -880,7 +881,7 @@ svg {
 
 /* AI 氣泡：markdown + 逐行換行 */
 .hb-inspire-msg__md {
-  font-size: 0.9rem;
+  font-size: var(--hb-text-sm);
   line-height: 1.65;
   word-break: break-word;
   overflow-wrap: anywhere;
@@ -947,15 +948,15 @@ svg {
 }
 
 .hb-md__h--1 {
-  font-size: 1.05rem;
+  font-size: var(--hb-text-lg);
 }
 
 .hb-md__h--2 {
-  font-size: 0.98rem;
+  font-size: var(--hb-text-base);
 }
 
 .hb-md__h--3 {
-  font-size: 0.92rem;
+  font-size: var(--hb-text-sm);
 }
 
 .hb-md__ul,
@@ -1000,11 +1001,11 @@ svg {
   background: color-mix(in srgb, var(--hb-surface-muted) 80%, #000 6%);
   border: 1px solid var(--hb-line);
   overflow-x: auto;
-  font-size: 0.8125rem;
+  font-size: var(--hb-text-xs);
   line-height: 1.5;
   white-space: pre-wrap;
   word-break: break-word;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--hb-font-mono);
 }
 
 .hb-md__pre code {
@@ -1015,7 +1016,7 @@ svg {
 }
 
 .hb-md__code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-family: var(--hb-font-mono);
   font-size: 0.85em;
   padding: 0.1em 0.35em;
   border-radius: 0.3em;
@@ -1024,7 +1025,7 @@ svg {
 }
 
 .hb-md__a {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   text-decoration: underline;
   text-underline-offset: 2px;
   word-break: break-all;
@@ -1062,7 +1063,7 @@ svg {
 .hb-inspire-draft__body {
   margin: 0 0 0.5rem;
   font-family: inherit;
-  font-size: 0.9rem;
+  font-size: var(--hb-text-sm);
   line-height: 1.55;
   white-space: pre-wrap;
   word-break: break-word;
@@ -1108,12 +1109,12 @@ svg {
   min-height: 1.85rem;
   min-width: 1.85rem;
   padding: 0.2rem 0.5rem;
-  font-size: 0.8125rem;
+  font-size: var(--hb-text-xs);
 }
 
 .hb-inspire-composer__tools .hb-inspire-tool-btn--primary {
   font-weight: 700;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   background: color-mix(in srgb, var(--hb-brand) 12%, transparent);
   border-radius: var(--hb-radius);
 }
@@ -1149,7 +1150,7 @@ svg {
 
 .hb-inspire-material-modal__hint {
   margin: 0.35rem 0 0;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   color: var(--hb-muted);
   line-height: 1.45;
 }
@@ -1158,7 +1159,7 @@ svg {
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
-  font-size: 0.8125rem;
+  font-size: var(--hb-text-xs);
   font-weight: 600;
   color: var(--hb-muted);
 }
@@ -1202,7 +1203,7 @@ svg {
 }
 
 .hb-inspire-pinned__label {
-  font-size: 0.72rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 600;
   color: var(--hb-muted);
   flex-shrink: 0;
@@ -1217,7 +1218,7 @@ svg {
 }
 
 .hb-inspire-pinned__empty {
-  font-size: 0.72rem;
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
   opacity: 0.85;
 }
@@ -1228,7 +1229,7 @@ svg {
   border: 1px solid var(--hb-line);
   border-radius: var(--hb-radius-pill);
   background: var(--hb-surface-muted);
-  font-size: 0.72rem;
+  font-size: var(--hb-text-2xs);
   flex-shrink: 0;
   overflow: hidden;
 }
@@ -1253,7 +1254,7 @@ svg {
 }
 
 .hb-inspire-pin-chip__main:hover {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-inspire-pin-chip__x {
@@ -1262,7 +1263,7 @@ svg {
   background: transparent;
   color: var(--hb-muted);
   font: inherit;
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
   line-height: 1;
   padding: 0 0.4rem;
   cursor: pointer;
@@ -1276,7 +1277,7 @@ svg {
 .hb-inspire-flow-one-liner {
   margin: 0;
   padding: 0.35rem 0.15rem 0.15rem;
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
   flex-shrink: 0;
 }
@@ -1289,14 +1290,14 @@ svg {
 
 .hb-inspire-empty-guide__title {
   margin: 0 0 0.4rem;
-  font-size: 1rem;
+  font-size: var(--hb-text-base);
   font-weight: 700;
   color: var(--hb-text);
 }
 
 .hb-inspire-empty-guide__desc {
   margin: 0 0 1rem;
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
   color: var(--hb-muted);
   line-height: 1.5;
   max-width: 22rem;
@@ -1311,7 +1312,7 @@ svg {
 }
 
 .hb-inspire-tool-btn.is-on {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   background: color-mix(in srgb, var(--hb-brand) 12%, transparent);
 }
 
@@ -1332,7 +1333,7 @@ svg {
   border-radius: var(--hb-radius);
   border: 1px dashed color-mix(in srgb, var(--hb-brand) 40%, var(--hb-line));
   background: color-mix(in srgb, var(--hb-brand) 6%, var(--hb-surface));
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   color: var(--hb-text);
   flex-shrink: 0;
 }
@@ -1360,7 +1361,7 @@ svg {
   min-height: 2.75rem !important;
   max-height: 5.5rem;
   height: auto;
-  font-size: 0.875rem;
+  font-size: var(--hb-text-sm);
   line-height: 1.4;
   padding: 0.6rem 0.85rem;
   border-radius: 1.25rem;
@@ -1380,7 +1381,7 @@ svg {
   justify-content: center;
   align-self: flex-end;
   background: var(--hb-brand);
-  color: #fff;
+  color: var(--hb-brand-on);
   cursor: pointer;
   line-height: 0;
   box-shadow: 0 1px 2px color-mix(in srgb, #000 12%, transparent);
@@ -1408,7 +1409,7 @@ svg {
 
 .hb-inspire-send-btn__dots {
   display: block;
-  font-size: 1rem;
+  font-size: var(--hb-text-base);
   font-weight: 700;
   line-height: 1;
   width: 1em;
@@ -1416,12 +1417,12 @@ svg {
 }
 
 .hb-inspire-fp-bar__ok {
-  color: color-mix(in srgb, #1a7f37 80%, var(--hb-text));
+  color: var(--hb-success);
   font-weight: 600;
 }
 
 .hb-inspire-fp-bar__bad {
-  color: color-mix(in srgb, #c0392b 85%, var(--hb-text));
+  color: var(--hb-danger-deep);
   font-weight: 600;
 }
 
@@ -1430,7 +1431,7 @@ svg {
   position: fixed;
   inset: 0;
   z-index: 200;
-  background: color-mix(in srgb, #0b0d12 55%, transparent);
+  background: var(--hb-scrim);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1469,7 +1470,7 @@ svg {
 
 .hb-inspire-prompt-modal__fp {
   margin: 0.35rem 0 0;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   color: var(--hb-muted);
   word-break: break-all;
   line-height: 1.4;
@@ -1485,7 +1486,7 @@ svg {
   flex: 0 0 auto;
   margin: 0;
   padding: 0.55rem 1.15rem;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   color: var(--hb-muted);
   line-height: 1.45;
   border-bottom: 1px solid var(--hb-line);
@@ -1517,10 +1518,10 @@ svg {
   justify-content: space-between;
   gap: 0.75rem;
   padding: 0.45rem 0.7rem;
-  font-size: 0.82rem;
+  font-size: var(--hb-text-xs);
   font-weight: 600;
   border-bottom: 1px solid var(--hb-line);
-  background: color-mix(in srgb, var(--hb-surface) 70%, var(--hb-surface-muted, #f4f4f5));
+  background: color-mix(in srgb, var(--hb-surface) 70%, var(--hb-surface-muted));
 }
 
 .hb-inspire-prompt-block__body {
@@ -1528,9 +1529,9 @@ svg {
   padding: 0.7rem 0.8rem;
   white-space: pre-wrap;
   word-break: break-word;
-  font-size: 0.84rem;
+  font-size: var(--hb-text-xs);
   line-height: 1.55;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--hb-font-mono);
 }
 
 /* 右欄：吃 grid 欄寬，勿再寫死 16.5rem（會撐破雙欄） */
@@ -1565,7 +1566,7 @@ svg {
 }
 
 .hb-inspire-library__head strong {
-  font-size: 0.875rem;
+  font-size: var(--hb-text-sm);
 }
 
 .hb-inspire-library__scroll {
@@ -1590,7 +1591,7 @@ svg {
 
 .hb-inspire-lib-section__title {
   margin: 0 0 0.35rem;
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 600;
   color: var(--hb-muted);
   text-transform: none;
@@ -1633,13 +1634,13 @@ svg {
 
 .hb-inspire-el__title {
   display: block;
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
   font-weight: 600;
 }
 
 .hb-inspire-el__meta {
   display: block;
-  font-size: 0.72rem;
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
   margin-top: 0.15rem;
   overflow: hidden;
@@ -1822,7 +1823,7 @@ svg {
 
 .hb-scout-run-item__meta {
   color: var(--hb-muted);
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 600;
 }
 
@@ -1855,7 +1856,7 @@ svg {
 
 .hb-scout-now__stance {
   margin: 0;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   line-height: 1.4;
 }
 
@@ -1897,7 +1898,7 @@ svg {
 }
 
 .hb-scout-theme-group__title {
-  font-size: 0.95rem;
+  font-size: var(--hb-text-base);
   font-weight: 650;
   line-height: 1.35;
 }
@@ -1926,7 +1927,7 @@ svg {
 
 .hb-scout-now__text {
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--hb-text-base);
   line-height: 1.55;
 }
 
@@ -1957,13 +1958,13 @@ svg {
 }
 
 .hb-scout-queue-item__meta {
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
   font-weight: 600;
 }
 
 .hb-scout-queue-item__text {
-  font-size: 0.875rem;
+  font-size: var(--hb-text-sm);
   line-height: 1.45;
 }
 
@@ -2029,7 +2030,7 @@ svg {
 }
 
 .hb-brands__rail-label {
-  font-size: 0.95rem;
+  font-size: var(--hb-text-base);
   font-weight: 700;
   letter-spacing: -0.01em;
 }
@@ -2043,8 +2044,8 @@ svg {
   padding: 0 0.4rem;
   border-radius: var(--hb-radius-pill);
   background: var(--hb-brand-soft);
-  color: var(--hb-brand);
-  font-size: 0.75rem;
+  color: var(--hb-brand-deep);
+  font-size: var(--hb-text-2xs);
   font-weight: 700;
   font-variant-numeric: tabular-nums;
 }
@@ -2136,7 +2137,7 @@ svg {
 .hb-brands__chip.is-active {
   border-color: color-mix(in srgb, var(--hb-brand) 40%, var(--hb-line));
   background: var(--hb-brand-soft);
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-brands__chip-mark {
@@ -2147,19 +2148,18 @@ svg {
   border-radius: 50%;
   background: linear-gradient(
     145deg,
-    color-mix(in srgb, var(--hb-accent-warm) 70%, var(--hb-brand)),
+    var(--hb-accent-warm),
     var(--hb-brand)
   );
   color: var(--hb-brand-on);
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   font-weight: 700;
   flex-shrink: 0;
-  text-shadow: 0 1px 1px rgb(0 0 0 / 0.1);
 }
 
+/* 選中時只加深暖色那一端；漸層收到 --hb-brand-deep 會讓近黑字在深端看不見。 */
 .hb-brands__chip.is-active .hb-brands__chip-mark {
-  background: linear-gradient(145deg, var(--hb-accent-warm), var(--hb-brand-deep));
-  color: #fff;
+  background: linear-gradient(145deg, var(--hb-accent-warm), var(--hb-brand));
 }
 
 .hb-brands__chip-name {
@@ -2208,9 +2208,9 @@ svg {
   width: 3rem;
   height: 3rem;
   border-radius: 50%;
-  background: linear-gradient(145deg, var(--hb-accent-warm), var(--hb-brand-deep));
-  color: #fff;
-  font-size: 1.15rem;
+  background: linear-gradient(145deg, var(--hb-accent-warm), var(--hb-brand));
+  color: var(--hb-brand-on);
+  font-size: var(--hb-text-lg);
   font-weight: 700;
   flex-shrink: 0;
   box-shadow: var(--hb-shadow-soft);
@@ -2226,7 +2226,7 @@ svg {
 
 .hb-brands__panel-titles h2 {
   margin: 0;
-  font-size: 1.25rem;
+  font-size: var(--hb-text-xl);
   letter-spacing: -0.02em;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2235,7 +2235,7 @@ svg {
 
 .hb-brands__panel-titles p {
   margin: 0;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   line-height: 1.4;
 }
 
@@ -2336,7 +2336,7 @@ svg {
 }
 
 .hb-brands__product-name {
-  font-size: 1rem;
+  font-size: var(--hb-text-base);
   letter-spacing: -0.01em;
 }
 
@@ -2401,7 +2401,7 @@ svg {
 
 .hb-brands__product-form-head h3 {
   margin: 0;
-  font-size: 1.05rem;
+  font-size: var(--hb-text-lg);
   letter-spacing: -0.01em;
 }
 
@@ -2518,14 +2518,14 @@ svg {
 .hb-inspire-row__title {
   grid-column: 1;
   font-weight: 650;
-  font-size: 0.95rem;
+  font-size: var(--hb-text-base);
   line-height: 1.3;
 }
 
 .hb-inspire-row__meta {
   grid-column: 2;
   grid-row: 1;
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 600;
   color: var(--hb-ink-secondary);
   white-space: nowrap;
@@ -2533,13 +2533,13 @@ svg {
 }
 
 .hb-inspire-heat {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   font-variant-numeric: tabular-nums;
 }
 
 .hb-inspire-row__snip {
   grid-column: 1 / -1;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   color: var(--hb-muted);
   line-height: 1.4;
   display: -webkit-box;
@@ -2567,7 +2567,7 @@ svg {
 
 .hb-inspire-detail__title {
   margin: 0;
-  font-size: 1.2rem;
+  font-size: var(--hb-text-lg);
   font-weight: 700;
   line-height: 1.3;
 }
@@ -2580,12 +2580,12 @@ svg {
 
 .hb-inspire-detail__kw {
   margin: 0;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
 }
 
 .hb-inspire-detail__label {
   display: block;
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 650;
   color: var(--hb-muted);
   margin-bottom: var(--hb-space-2);
@@ -2607,7 +2607,7 @@ svg {
   border-bottom: none;
   background: var(--hb-surface-muted);
   border-radius: 0 var(--hb-radius) var(--hb-radius) 0;
-  font-size: 0.875rem;
+  font-size: var(--hb-text-sm);
   color: var(--hb-ink-secondary);
   line-height: 1.5;
   text-align: left;
@@ -2682,20 +2682,20 @@ svg {
 }
 
 .hb-progress__bar.is-warn {
-  background: color-mix(in srgb, var(--hb-warning, #d4a017) 85%, var(--hb-brand));
+  background: var(--hb-warning);
 }
 
 .hb-progress__bar.is-danger {
-  background: var(--hb-danger, #c44);
+  background: var(--hb-danger);
 }
 
 .hb-banner-warn {
   margin: 0;
   padding: 0.65rem 0.85rem;
   border-radius: var(--hb-radius);
-  border: 1px solid color-mix(in srgb, var(--hb-warning, #d4a017) 45%, var(--hb-line));
-  background: color-mix(in srgb, var(--hb-warning, #d4a017) 12%, var(--hb-surface));
-  font-size: 0.9rem;
+  border: 1px solid color-mix(in srgb, var(--hb-warning) 45%, var(--hb-line));
+  background: color-mix(in srgb, var(--hb-warning) 12%, var(--hb-surface));
+  font-size: var(--hb-text-sm);
   line-height: 1.45;
 }
 
@@ -2727,7 +2727,7 @@ svg {
 }
 
 .hb-usage-sub__plan strong {
-  font-size: 1.25rem;
+  font-size: var(--hb-text-xl);
   font-weight: 750;
   letter-spacing: -0.02em;
 }
@@ -2766,7 +2766,7 @@ svg {
 
 .hb-usage-status__big {
   margin: 0.2rem 0 0;
-  font-size: 1.75rem;
+  font-size: var(--hb-text-2xl);
   font-weight: 750;
   letter-spacing: -0.03em;
   font-variant-numeric: tabular-nums;
@@ -2774,7 +2774,7 @@ svg {
 }
 
 .hb-usage-status__remain .hb-usage-status__big {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-usage-status__foot {
@@ -2803,7 +2803,7 @@ svg {
 }
 
 .hb-usage-disclosure:hover {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 /* 三欄比價 */
@@ -2839,7 +2839,7 @@ svg {
 }
 
 .hb-plans-page__back:hover {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-pricing {
@@ -2884,7 +2884,7 @@ svg {
 
 .hb-pricing__name {
   margin: 0;
-  font-size: 1.15rem;
+  font-size: var(--hb-text-lg);
   font-weight: 750;
 }
 
@@ -2905,7 +2905,7 @@ svg {
 }
 
 .hb-pricing__price strong {
-  font-size: 1.5rem;
+  font-size: var(--hb-text-xl);
   font-weight: 750;
   letter-spacing: -0.03em;
 }
@@ -2988,7 +2988,7 @@ svg {
 
 .hb-checkout__big-price {
   margin: 0.15rem 0 0;
-  font-size: 1.65rem;
+  font-size: var(--hb-text-2xl);
   font-weight: 750;
   letter-spacing: -0.03em;
   font-variant-numeric: tabular-nums;
@@ -2997,7 +2997,7 @@ svg {
 
 .hb-checkout__period {
   margin-left: 0.2rem;
-  font-size: 0.95rem;
+  font-size: var(--hb-text-base);
   font-weight: 600;
   color: var(--hb-muted);
   letter-spacing: 0;
@@ -3021,7 +3021,7 @@ svg {
 }
 
 .hb-checkout__links a:hover {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-usage-ring {
@@ -3048,16 +3048,16 @@ svg {
 }
 
 .hb-usage-ring__fill {
-  stroke: color-mix(in srgb, var(--hb-brand) 35%, #e8a04a);
+  stroke: var(--hb-brand);
   transition: stroke-dasharray 0.25s ease;
 }
 
 .hb-usage-ring__visual.is-warn .hb-usage-ring__fill {
-  stroke: color-mix(in srgb, #e8a04a 70%, var(--hb-brand));
+  stroke: var(--hb-warning);
 }
 
 .hb-usage-ring__visual.is-over .hb-usage-ring__fill {
-  stroke: color-mix(in srgb, #d4524a 75%, var(--hb-brand));
+  stroke: var(--hb-danger);
 }
 
 .hb-usage-ring__center {
@@ -3072,7 +3072,7 @@ svg {
 }
 
 .hb-usage-ring__center strong {
-  font-size: 1.65rem;
+  font-size: var(--hb-text-2xl);
   font-weight: 750;
   letter-spacing: -0.03em;
   font-variant-numeric: tabular-nums;
@@ -3123,7 +3123,7 @@ svg {
 
 .hb-usage-ring__inf {
   font-weight: 750;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-usage-mbars {
@@ -3178,12 +3178,12 @@ svg {
   display: block;
   height: 100%;
   border-radius: inherit;
-  background: color-mix(in srgb, var(--hb-brand) 35%, #e8a04a);
+  background: var(--hb-brand);
   transition: width 0.2s ease;
 }
 
 .hb-usage-mbar.is-over .hb-usage-mbar__fill {
-  background: color-mix(in srgb, #d4524a 70%, var(--hb-brand));
+  background: var(--hb-danger);
 }
 
 .hb-usage-mbar__val {
@@ -3207,7 +3207,7 @@ svg {
 .hb-usage-mbar__inf {
   margin-left: 0.25rem;
   font-weight: 750;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-usage-mbar__unit {
@@ -3220,7 +3220,7 @@ svg {
   margin-left: 0.35rem;
   font-size: var(--hb-text-xs);
   font-weight: 700;
-  color: color-mix(in srgb, #d4524a 85%, var(--hb-text));
+  color: var(--hb-danger-deep);
 }
 
 .hb-usage-byok-list {
@@ -3296,7 +3296,7 @@ svg {
 }
 
 .hb-usage-ppick__credits strong {
-  font-size: 1.35rem;
+  font-size: var(--hb-text-xl);
   font-weight: 750;
   letter-spacing: -0.03em;
   font-variant-numeric: tabular-nums;
@@ -3309,7 +3309,7 @@ svg {
 }
 
 .hb-usage-ppick__item.is-active .hb-usage-ppick__price {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   font-weight: 700;
 }
 
@@ -3328,7 +3328,7 @@ svg {
 
 .hb-usage-checkout__headline {
   margin: 0;
-  font-size: 1rem;
+  font-size: var(--hb-text-base);
   font-weight: 650;
   line-height: 1.45;
   color: var(--hb-text);
@@ -3376,7 +3376,7 @@ svg {
 
 .hb-usage-checkout__name {
   margin: 0.2rem 0 0;
-  font-size: 1.15rem;
+  font-size: var(--hb-text-lg);
   font-weight: 750;
 }
 
@@ -3386,7 +3386,7 @@ svg {
 }
 
 .hb-usage-checkout__val strong {
-  font-size: 1.25rem;
+  font-size: var(--hb-text-xl);
   font-weight: 750;
 }
 
@@ -3397,7 +3397,7 @@ svg {
   border: 1px dashed color-mix(in srgb, var(--hb-brand) 40%, var(--hb-line));
   font-size: var(--hb-text-xs);
   font-weight: 700;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 /* 用量：AI / Search 次數 */
@@ -3445,7 +3445,7 @@ svg {
 }
 
 .hb-usage-call-stat--use {
-  border-color: color-mix(in srgb, var(--hb-warn, #d4a017) 40%, var(--hb-line));
+  border-color: color-mix(in srgb, var(--hb-warning) 40%, var(--hb-line));
 }
 
 .hb-usage-tenant {
@@ -3487,11 +3487,11 @@ svg {
 }
 
 .hb-progress__bar--buy {
-  background: color-mix(in srgb, var(--hb-brand) 75%, var(--hb-magic));
+  background: var(--hb-brand);
 }
 
 .hb-progress__bar--use {
-  background: color-mix(in srgb, var(--hb-brand) 40%, var(--hb-accent-warm));
+  background: var(--hb-accent-warm);
 }
 
 .hb-usage-chart {
@@ -3542,15 +3542,15 @@ svg {
 }
 
 .hb-usage-chart__metric--buy .hb-usage-chart__name {
-  color: color-mix(in srgb, var(--hb-brand) 50%, var(--hb-muted));
+  color: var(--hb-brand-deep);
 }
 
 .hb-usage-chart__metric--use .hb-usage-chart__name {
-  color: color-mix(in srgb, #c47a20 55%, var(--hb-muted));
+  color: var(--hb-warning-deep);
 }
 
 .hb-usage-chart__metric strong {
-  font-size: 1.35rem;
+  font-size: var(--hb-text-xl);
   font-weight: 750;
   letter-spacing: -0.03em;
   color: var(--hb-text);
@@ -3565,11 +3565,11 @@ svg {
 }
 
 .hb-usage-chart__metric--buy .hb-usage-chart__dot {
-  background: color-mix(in srgb, var(--hb-brand) 70%, var(--hb-magic));
+  background: var(--hb-brand);
 }
 
 .hb-usage-chart__metric--use .hb-usage-chart__dot {
-  background: color-mix(in srgb, var(--hb-brand) 35%, var(--hb-accent-warm));
+  background: var(--hb-accent-warm);
 }
 
 .hb-usage-chart__pct {
@@ -3596,7 +3596,7 @@ svg {
 
 .hb-usage-chart__axis {
   fill: var(--hb-muted);
-  font-size: 10px;
+  font-size: var(--hb-text-2xs);
 }
 
 .hb-usage-chart__hit {
@@ -3605,13 +3605,13 @@ svg {
 }
 
 .hb-usage-chart__bar--buy {
-  fill: color-mix(in srgb, var(--hb-brand) 70%, var(--hb-magic));
+  fill: var(--hb-brand);
   opacity: 0.72;
   transition: opacity 0.12s ease;
 }
 
 .hb-usage-chart__bar--use {
-  fill: color-mix(in srgb, var(--hb-brand) 35%, var(--hb-accent-warm));
+  fill: var(--hb-accent-warm);
   opacity: 0.88;
   transition: opacity 0.12s ease;
 }
@@ -3672,7 +3672,7 @@ svg {
 }
 
 .hb-usage-call-stat__value {
-  font-size: 1.75rem;
+  font-size: var(--hb-text-2xl);
   font-weight: 750;
   letter-spacing: -0.03em;
   line-height: 1.15;
@@ -3721,7 +3721,7 @@ svg {
 
 .hb-usage-member-row__uid {
   font-size: var(--hb-text-xs);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--hb-font-mono);
   word-break: break-all;
 }
 
@@ -3795,7 +3795,7 @@ svg {
   font-size: var(--hb-text-sm);
   font-weight: 750;
   font-variant-numeric: tabular-nums;
-  color: color-mix(in srgb, #c47a20 55%, var(--hb-text));
+  color: var(--hb-warning-deep);
 }
 
 /* —— 今日 dashboard —— */
@@ -3836,36 +3836,36 @@ a.hb-today-metric:hover {
 }
 
 .hb-today-metric.is-alert {
-  border-color: color-mix(in srgb, var(--hb-danger, #c44) 45%, var(--hb-line));
-  background: color-mix(in srgb, var(--hb-danger, #c44) 8%, var(--hb-surface));
+  border-color: color-mix(in srgb, var(--hb-danger) 45%, var(--hb-line));
+  background: color-mix(in srgb, var(--hb-danger) 8%, var(--hb-surface));
 }
 
 .hb-today-metric__label {
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 600;
   color: var(--hb-muted);
 }
 
 .hb-today-metric__value {
-  font-size: 1.45rem;
+  font-size: var(--hb-text-xl);
   font-weight: 700;
   line-height: 1.15;
   letter-spacing: -0.02em;
 }
 
 .hb-today-metric__den {
-  font-size: 0.95rem;
+  font-size: var(--hb-text-base);
   font-weight: 600;
   color: var(--hb-muted);
 }
 
 .hb-today-metric__hint {
-  font-size: 0.72rem;
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
 }
 
 .hb-today-alert-text {
-  color: var(--hb-danger, #c44);
+  color: var(--hb-danger-deep);
 }
 
 .hb-today-list {
@@ -3898,13 +3898,13 @@ a.hb-today-metric:hover {
   flex-wrap: wrap;
   align-items: center;
   gap: 0.35rem 0.5rem;
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 600;
   color: var(--hb-muted);
 }
 
 .hb-today-list__text {
-  font-size: 0.875rem;
+  font-size: var(--hb-text-sm);
   line-height: 1.45;
 }
 
@@ -3939,13 +3939,13 @@ a.hb-today-metric:hover {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem 1rem;
-  font-size: 0.82rem;
+  font-size: var(--hb-text-xs);
   color: var(--hb-ink-secondary, var(--hb-text));
 }
 
 .hb-today-account__insight {
   margin: 0;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   line-height: 1.45;
   color: var(--hb-muted);
 }
@@ -4081,20 +4081,20 @@ a.hb-today-metric:hover {
 }
 
 .hb-insights-bar__val {
-  font-size: 0.68rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 650;
   color: var(--hb-ink-secondary, var(--hb-text));
   line-height: 1.2;
 }
 
 .hb-insights-bar__lab {
-  font-size: 0.68rem;
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
 }
 
 .hb-insights-bar__lab.is-current {
   font-weight: 700;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-insights-bullets {
@@ -4103,12 +4103,12 @@ a.hb-today-metric:hover {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
-  font-size: 0.9rem;
+  font-size: var(--hb-text-sm);
   line-height: 1.5;
 }
 
 .hb-insights-bullets--action li {
-  color: color-mix(in srgb, var(--hb-brand) 70%, var(--hb-text));
+  color: var(--hb-brand-deep);
 }
 
 .hb-insights-snap-panel {
@@ -4133,7 +4133,7 @@ a.hb-today-metric:hover {
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem 0.85rem;
-  font-size: 0.82rem;
+  font-size: var(--hb-text-xs);
   align-items: center;
 }
 
@@ -4159,7 +4159,7 @@ a.hb-today-metric:hover {
 
 .hb-bell__trigger:hover,
 .hb-bell__trigger.is-open {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   border-color: color-mix(in srgb, var(--hb-brand) 45%, var(--hb-line));
 }
 
@@ -4177,9 +4177,9 @@ a.hb-today-metric:hover {
   height: 1.05rem;
   padding: 0 0.28rem;
   border-radius: 999px;
-  background: var(--hb-danger, #c44);
-  color: #fff;
-  font-size: 0.65rem;
+  background: var(--hb-danger);
+  color: var(--hb-danger-on);
+  font-size: var(--hb-text-2xs);
   font-weight: 700;
   line-height: 1.05rem;
   text-align: center;
@@ -4218,9 +4218,9 @@ a.hb-today-metric:hover {
 }
 
 .hb-bell__head-count {
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 600;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-bell__text-btn {
@@ -4228,20 +4228,20 @@ a.hb-today-metric:hover {
   background: transparent;
   color: var(--hb-muted);
   font: inherit;
-  font-size: 0.78rem;
+  font-size: var(--hb-text-xs);
   font-weight: 600;
   cursor: pointer;
   padding: 0.15rem 0.25rem;
 }
 
 .hb-bell__text-btn:hover {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-bell__empty {
   margin: 0;
   padding: 1.1rem 0.85rem;
-  font-size: 0.875rem;
+  font-size: var(--hb-text-sm);
   color: var(--hb-muted);
   text-align: center;
 }
@@ -4286,7 +4286,7 @@ a.hb-today-metric:hover {
 }
 
 .hb-bell__kind {
-  font-size: 0.68rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 700;
   letter-spacing: 0.02em;
   color: var(--hb-muted);
@@ -4294,13 +4294,13 @@ a.hb-today-metric:hover {
 }
 
 .hb-bell__time {
-  font-size: 0.7rem;
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
   flex-shrink: 0;
 }
 
 .hb-bell__item-title {
-  font-size: 0.875rem;
+  font-size: var(--hb-text-sm);
   font-weight: 650;
   line-height: 1.3;
   display: -webkit-box;
@@ -4310,7 +4310,7 @@ a.hb-today-metric:hover {
 }
 
 .hb-bell__item-body {
-  font-size: 0.78rem;
+  font-size: var(--hb-text-xs);
   line-height: 1.4;
   color: var(--hb-muted);
   display: -webkit-box;
@@ -4331,7 +4331,7 @@ a.hb-today-metric:hover {
 }
 
 .hb-bell__more {
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   padding-left: 0.25rem;
 }
 
@@ -4359,7 +4359,7 @@ a.hb-today-metric:hover {
 .hb-account__trigger:hover,
 .hb-account__trigger.is-open {
   border-color: color-mix(in srgb, var(--hb-brand) 45%, var(--hb-line));
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-account__avatar {
@@ -4370,13 +4370,13 @@ a.hb-today-metric:hover {
 
 .hb-account__avatar.hb-avatar--initials {
   background: var(--hb-brand-soft) !important;
-  color: var(--hb-brand);
-  font-size: 0.75rem;
+  color: var(--hb-brand-deep);
+  font-size: var(--hb-text-2xs);
   text-shadow: none;
 }
 
 .hb-account__name {
-  font-size: 0.78rem;
+  font-size: var(--hb-text-xs);
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -4386,7 +4386,7 @@ a.hb-today-metric:hover {
 }
 
 .hb-account__chev {
-  font-size: 0.6rem;
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
   flex-shrink: 0;
   line-height: 1;
@@ -4453,7 +4453,7 @@ a.hb-today-metric:hover {
   background: var(--hb-surface-muted);
   color: var(--hb-ink-secondary);
   font: inherit;
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
   font-weight: 650;
   cursor: pointer;
   transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
@@ -4479,12 +4479,14 @@ a.hb-today-metric:hover {
   border: 1px solid var(--hb-line);
 }
 
+/* 主題預覽色塊：唯一允許寫死色碼的地方 —— 它要在任何主題下都同時顯示
+   淺色與深色長什麼樣，所以不能吃會隨主題切換的 var()。 */
 .hb-theme-picker__swatch--light {
-  background: linear-gradient(90deg, #fcfdfd 40%, #20b49c 40%, #20b49c 70%, #ff7b73 70%);
+  background: linear-gradient(90deg, #fcfdfd 40%, #8bc5cd 40%, #8bc5cd 70%, #b96b1c 70%);
 }
 
 .hb-theme-picker__swatch--dark {
-  background: linear-gradient(90deg, #141a19 42%, #3cddc2 42%, #3cddc2 72%, #ff7c75 72%);
+  background: linear-gradient(90deg, #141a1a 42%, #89c5cd 42%, #89c5cd 72%, #e18c37 72%);
 }
 
 .hb-theme-picker__swatch--system {
@@ -4492,8 +4494,8 @@ a.hb-today-metric:hover {
     90deg,
     #fcfdfd 0%,
     #fcfdfd 48%,
-    #141a19 52%,
-    #141a19 100%
+    #141a1a 52%,
+    #141a1a 100%
   );
 }
 
@@ -4520,11 +4522,11 @@ a.hb-today-metric:hover {
 }
 
 .hb-account__meta strong {
-  font-size: 0.9rem;
+  font-size: var(--hb-text-sm);
 }
 
 .hb-account__meta .text-muted {
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -4550,7 +4552,7 @@ a.hb-today-metric:hover {
 .hb-profile-avatar__img {
   width: 4.5rem !important;
   height: 4.5rem !important;
-  font-size: 1.35rem !important;
+  font-size: var(--hb-text-xl) !important;
 }
 
 .hb-profile-avatar__actions {
@@ -4590,7 +4592,7 @@ a.hb-today-metric:hover {
   border-radius: var(--hb-radius-pill);
   border: 1px solid var(--hb-line);
   background: var(--hb-surface-muted);
-  font-size: 0.72rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 700;
   color: var(--hb-ink-secondary, var(--hb-text));
 }
@@ -4598,19 +4600,19 @@ a.hb-today-metric:hover {
 .hb-account__role.is-admin {
   border-color: color-mix(in srgb, var(--hb-brand) 45%, var(--hb-line));
   background: color-mix(in srgb, var(--hb-brand-soft, var(--hb-surface-muted)) 70%, var(--hb-surface));
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-account__role.is-verified {
-  border-color: color-mix(in srgb, var(--hb-success, #2a8f5b) 40%, var(--hb-line));
-  background: color-mix(in srgb, var(--hb-success, #2a8f5b) 12%, var(--hb-surface));
-  color: var(--hb-success, #2a8f5b);
+  border-color: color-mix(in srgb, var(--hb-success) 40%, var(--hb-line));
+  background: color-mix(in srgb, var(--hb-success) 12%, var(--hb-surface));
+  color: var(--hb-success);
 }
 
 .hb-account__role.is-unverified {
-  border-color: color-mix(in srgb, var(--hb-warning, #d4a017) 45%, var(--hb-line));
-  background: color-mix(in srgb, var(--hb-warning, #d4a017) 14%, var(--hb-surface));
-  color: color-mix(in srgb, var(--hb-warning, #b8860b) 80%, var(--hb-ink));
+  border-color: color-mix(in srgb, var(--hb-warning) 45%, var(--hb-line));
+  background: color-mix(in srgb, var(--hb-warning) 14%, var(--hb-surface));
+  color: var(--hb-warning-deep);
 }
 
 .hb-verify-status {
@@ -4623,23 +4625,23 @@ a.hb-today-metric:hover {
   align-self: flex-start;
   padding: 0.2rem 0.55rem;
   border-radius: var(--hb-radius-pill);
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 700;
 }
 
 .hb-verify-status__badge.is-pending {
-  border: 1px solid color-mix(in srgb, var(--hb-warning, #d4a017) 45%, var(--hb-line));
-  background: color-mix(in srgb, var(--hb-warning, #d4a017) 14%, var(--hb-surface));
-  color: color-mix(in srgb, var(--hb-warning, #b8860b) 80%, var(--hb-ink));
+  border: 1px solid color-mix(in srgb, var(--hb-warning) 45%, var(--hb-line));
+  background: color-mix(in srgb, var(--hb-warning) 14%, var(--hb-surface));
+  color: var(--hb-warning-deep);
 }
 
 .hb-verify-code-display {
   margin: 0;
-  font-size: 1.5rem;
+  font-size: var(--hb-text-xl);
   font-weight: 750;
   letter-spacing: 0.28em;
   font-variant-numeric: tabular-nums;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-profile-status {
@@ -4691,7 +4693,7 @@ a.hb-today-metric:hover {
 
 .hb-profile-role__meta {
   margin: 0;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   line-height: 1.45;
   color: var(--hb-muted);
   word-break: break-word;
@@ -4772,11 +4774,11 @@ a.hb-today-metric:hover {
 }
 
 .hb-admin-user-row__main strong {
-  font-size: 0.9rem;
+  font-size: var(--hb-text-sm);
 }
 
 .hb-admin-user-row__main .text-muted {
-  font-size: 0.78rem;
+  font-size: var(--hb-text-xs);
 }
 
 .hb-admin-user-row__tags {
@@ -4795,7 +4797,7 @@ a.hb-today-metric:hover {
 
 .hb-admin-detail-name {
   margin: 0;
-  font-size: 1.15rem;
+  font-size: var(--hb-text-lg);
   font-weight: 700;
 }
 
@@ -4819,14 +4821,14 @@ a.hb-today-metric:hover {
 }
 
 .hb-admin-dl dt {
-  font-size: 0.72rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 650;
   color: var(--hb-muted);
 }
 
 .hb-admin-dl dd {
   margin: 0;
-  font-size: 0.875rem;
+  font-size: var(--hb-text-sm);
   line-height: 1.4;
   word-break: break-word;
 }
@@ -4892,8 +4894,8 @@ a.hb-today-metric:hover {
 }
 
 .hb-admin-user-row__uid {
-  font-size: 0.72rem !important;
-  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  font-size: var(--hb-text-2xs) !important;
+  font-family: var(--hb-font-mono);
   word-break: break-all;
 }
 
@@ -4959,7 +4961,7 @@ a.hb-today-metric:hover {
 }
 
 .hb-admin-pager__page {
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
   font-weight: 650;
   min-width: 3.5rem;
   text-align: center;
@@ -5007,7 +5009,7 @@ a.hb-today-metric:hover {
   border-radius: var(--hb-radius);
   border: 1px solid var(--hb-line);
   background: var(--hb-surface);
-  font-size: 1.15rem;
+  font-size: var(--hb-text-lg);
   font-weight: 700;
   letter-spacing: 0.06em;
   font-variant-numeric: tabular-nums;
@@ -5029,7 +5031,7 @@ a.hb-today-metric:hover {
 
 .hb-account__link {
   padding: 0.55rem 0.85rem;
-  font-size: 0.875rem;
+  font-size: var(--hb-text-sm);
   font-weight: 600;
   color: inherit;
   text-decoration: none;
@@ -5037,7 +5039,7 @@ a.hb-today-metric:hover {
 
 .hb-account__link:hover {
   background: var(--hb-surface-muted);
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-account__logout {
@@ -5048,14 +5050,14 @@ a.hb-today-metric:hover {
   padding: 0.6rem 0.85rem;
   text-align: left;
   font: inherit;
-  font-size: 0.875rem;
+  font-size: var(--hb-text-sm);
   font-weight: 600;
-  color: var(--hb-danger, #c44);
+  color: var(--hb-danger-deep);
   cursor: pointer;
 }
 
 .hb-account__logout:hover {
-  background: color-mix(in srgb, var(--hb-danger, #c44) 8%, var(--hb-surface));
+  background: color-mix(in srgb, var(--hb-danger) 8%, var(--hb-surface));
 }
 
 /* Avoid mobile dock covering content — already in layout; ensure links ok */
@@ -5079,11 +5081,11 @@ a .hb-btn {
 
 .hb-invite-code__value,
 .hb-invite-code__inline {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 1.2rem;
+  font-family: var(--hb-font-mono);
+  font-size: var(--hb-text-lg);
   font-weight: 700;
   letter-spacing: 0.06em;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   background: color-mix(in srgb, var(--hb-brand) 10%, var(--hb-surface));
   padding: 0.35rem 0.75rem;
   border-radius: var(--hb-radius);
@@ -5091,7 +5093,7 @@ a .hb-btn {
 }
 
 .hb-invite-code__inline {
-  font-size: 1rem;
+  font-size: var(--hb-text-base);
   padding: 0.2rem 0.55rem;
 }
 
@@ -5104,13 +5106,13 @@ a .hb-btn {
 
 .hb-invite-stats {
   margin: 0;
-  font-size: 0.88rem;
+  font-size: var(--hb-text-sm);
   font-weight: 600;
 }
 
 .hb-invite-simple {
   margin: 0;
-  font-size: 0.92rem;
+  font-size: var(--hb-text-sm);
 }
 
 .hb-invite-plain {
@@ -5120,7 +5122,7 @@ a .hb-btn {
   display: flex;
   flex-direction: column;
   gap: 0.35rem;
-  font-size: 0.9rem;
+  font-size: var(--hb-text-sm);
 }
 
 .hb-invite-plain li {
@@ -5140,7 +5142,7 @@ a .hb-btn {
 
 .hb-invite-claim__hint {
   margin: 0;
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
 }
 
 .hb-invite-claim__actions {
@@ -5151,7 +5153,7 @@ a .hb-btn {
 
 .hb-invite-claim-note {
   margin: 0;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
 }
 
 /* 單篇寫作：預計發送時間 */
@@ -5175,7 +5177,7 @@ a .hb-btn {
 /* 設定：開發模式 + Chrome 擴充 */
 .hb-settings-dev-hint {
   margin: 0;
-  font-size: 0.82rem;
+  font-size: var(--hb-text-xs);
   line-height: 1.5;
 }
 
@@ -5202,7 +5204,7 @@ a .hb-btn {
 
 .hb-ext-card__desc {
   margin: 0.35rem 0 0;
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
   line-height: 1.5;
   max-width: 36rem;
 }
@@ -5210,7 +5212,7 @@ a .hb-btn {
 .hb-ext-card__steps {
   margin: 0;
   padding-left: 1.25rem;
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
   line-height: 1.55;
   color: var(--hb-ink-secondary, inherit);
 }
@@ -5224,9 +5226,9 @@ a .hb-btn {
 }
 
 .hb-admin-invite-line {
-  font-size: 0.88rem;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  color: var(--hb-brand);
+  font-size: var(--hb-text-sm);
+  font-family: var(--hb-font-mono);
+  color: var(--hb-brand-deep);
   letter-spacing: 0.04em;
 }
 
@@ -5259,7 +5261,7 @@ a .hb-btn {
 }
 
 .hb-org__meta {
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   white-space: nowrap;
 }
 
@@ -5294,12 +5296,12 @@ a .hb-btn {
 
 .hb-org-hits__name {
   font-weight: 700;
-  font-size: 0.9rem;
+  font-size: var(--hb-text-sm);
 }
 
 .hb-org-hits__code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 0.75rem;
+  font-family: var(--hb-font-mono);
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
   justify-self: end;
   align-self: center;
@@ -5308,7 +5310,7 @@ a .hb-btn {
 
 .hb-org-hits__path {
   grid-column: 1;
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -5321,7 +5323,7 @@ a .hb-btn {
 
 .hb-org-start__hint {
   margin: 0 0 0.75rem;
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
 }
 
 .hb-org-chips {
@@ -5372,7 +5374,7 @@ a .hb-btn {
 
 .hb-org-chip__name {
   font-weight: 700;
-  font-size: 0.88rem;
+  font-size: var(--hb-text-sm);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -5380,19 +5382,19 @@ a .hb-btn {
 }
 
 .hb-org-chip__code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 0.7rem;
+  font-family: var(--hb-font-mono);
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
 }
 
 .hb-org-chip__sub {
-  font-size: 0.72rem;
-  color: var(--hb-brand);
+  font-size: var(--hb-text-2xs);
+  color: var(--hb-brand-deep);
   font-weight: 600;
 }
 
 .hb-org-chip__flag {
-  color: var(--hb-warning, #c90);
+  color: var(--hb-warning-deep);
 }
 
 /* 焦點圖 */
@@ -5409,7 +5411,7 @@ a .hb-btn {
   gap: 0.15rem 0.2rem;
   padding: 0.55rem 0.85rem;
   border-bottom: 1px solid var(--hb-line);
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   background: color-mix(in srgb, var(--hb-surface-muted) 60%, var(--hb-surface));
 }
 
@@ -5418,7 +5420,7 @@ a .hb-btn {
   border: 0;
   background: transparent;
   font: inherit;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   cursor: pointer;
   padding: 0.15rem 0.25rem;
   border-radius: 4px;
@@ -5459,14 +5461,14 @@ a .hb-btn {
 
 .hb-org-graph__edge {
   color: var(--hb-muted);
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
   line-height: 1;
   opacity: 0.65;
   user-select: none;
 }
 
 .hb-org-graph__none {
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   padding: 0.4rem 0.6rem;
 }
 
@@ -5477,7 +5479,7 @@ a .hb-btn {
 
 .hb-org-graph__kids-label {
   margin: 0 0 0.45rem;
-  font-size: 0.78rem;
+  font-size: var(--hb-text-xs);
   font-weight: 650;
   color: var(--hb-muted);
   text-align: center;
@@ -5485,7 +5487,7 @@ a .hb-btn {
 
 .hb-org-graph__empty {
   margin: 0.5rem 0 0;
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
 }
 
 .hb-org-reassign {
diff --git a/apps/web/src/styles/layout.css b/apps/web/src/styles/layout.css
index 87bb522..7878904 100644
--- a/apps/web/src/styles/layout.css
+++ b/apps/web/src/styles/layout.css
@@ -20,7 +20,7 @@
   z-index: 40;
   display: flex;
   flex-direction: column;
-  background: color-mix(in srgb, var(--hb-surface-solid, #fff) 82%, transparent);
+  background: color-mix(in srgb, var(--hb-surface-solid) 82%, transparent);
   backdrop-filter: saturate(130%) blur(16px);
   -webkit-backdrop-filter: saturate(130%) blur(16px);
 }
@@ -40,7 +40,7 @@
 /* 進行中任務即時進度（有 job 才渲染） */
 .hb-job-strip {
   border-bottom: 1px solid color-mix(in srgb, var(--hb-brand) 28%, var(--hb-line));
-  background: color-mix(in srgb, var(--hb-brand) 8%, var(--hb-surface-solid, #fff));
+  background: color-mix(in srgb, var(--hb-brand) 8%, var(--hb-surface-solid));
 }
 
 .hb-job-strip__inner {
@@ -61,10 +61,10 @@
   padding: 0.35rem 0.55rem;
   border-radius: var(--hb-radius, 8px);
   border: 1px solid color-mix(in srgb, var(--hb-brand) 22%, var(--hb-line));
-  background: color-mix(in srgb, var(--hb-surface-solid, #fff) 88%, transparent);
+  background: color-mix(in srgb, var(--hb-surface-solid) 88%, transparent);
   color: inherit;
   text-decoration: none;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   line-height: 1.35;
 }
 
@@ -82,12 +82,12 @@
 
 .hb-job-strip__status {
   font-weight: 500;
-  color: var(--hb-brand);
-  font-size: 0.75rem;
+  color: var(--hb-brand-deep);
+  font-size: var(--hb-text-2xs);
 }
 
 .hb-job-strip__summary {
-  color: var(--hb-muted, #667);
+  color: var(--hb-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -100,8 +100,8 @@
 
 .hb-job-strip__more {
   align-self: center;
-  font-size: 0.78rem;
-  color: var(--hb-brand);
+  font-size: var(--hb-text-xs);
+  color: var(--hb-brand-deep);
   text-decoration: none;
   white-space: nowrap;
   padding: 0.25rem 0.4rem;
@@ -130,14 +130,14 @@
 
 .hb-persona-job__sum {
   margin: 0 0 0.4rem;
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
 }
 
 .hb-persona-job__link {
   display: inline-block;
   margin-top: 0.45rem;
-  font-size: 0.82rem;
-  color: var(--hb-brand);
+  font-size: var(--hb-text-xs);
+  color: var(--hb-brand-deep);
   text-decoration: none;
 }
 
@@ -157,7 +157,7 @@
 }
 
 .hb-topbar__brand:hover {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-topbar__mark,
@@ -171,7 +171,7 @@
   box-shadow:
     0 0 0 1px color-mix(in srgb, var(--hb-brand) 24%, transparent),
     0 0 16px var(--hb-magic-glow),
-    0 5px 14px rgb(43 32 96 / 0.24);
+    0 5px 14px color-mix(in srgb, var(--hb-ink) 24%, transparent);
   transition: transform 0.16s ease, box-shadow 0.16s ease;
 }
 
@@ -180,7 +180,7 @@
   box-shadow:
     0 0 0 1px color-mix(in srgb, var(--hb-magic) 52%, transparent),
     0 0 22px var(--hb-magic-glow),
-    0 7px 18px rgb(43 32 96 / 0.3);
+    0 7px 18px color-mix(in srgb, var(--hb-ink) 30%, transparent);
 }
 
 .hb-topbar__title {
@@ -192,7 +192,7 @@
 }
 
 .hb-topbar__name {
-  font-size: 0.9rem;
+  font-size: var(--hb-text-sm);
   font-weight: 700;
   letter-spacing: -0.01em;
   overflow: hidden;
@@ -201,7 +201,7 @@
 }
 
 .hb-topbar__en {
-  font-size: 0.62rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 600;
   color: var(--hb-muted);
   letter-spacing: 0.04em;
@@ -236,7 +236,7 @@
   border-radius: 0.55rem;
   background: color-mix(in srgb, var(--hb-surface) 92%, var(--hb-surface-muted));
   color: var(--hb-ink-secondary);
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   cursor: pointer;
   transition: border-color 0.14s ease, background 0.14s ease;
 }
@@ -316,17 +316,17 @@
 .hb-topbar__cluster .hb-account__trigger:hover,
 .hb-topbar__cluster .hb-account__trigger.is-open {
   background: color-mix(in srgb, var(--hb-brand-soft, var(--hb-surface-muted)) 70%, var(--hb-surface));
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   border-color: transparent;
 }
 
 .hb-topbar__cluster .hb-usage-widget__trigger.is-tight {
-  color: color-mix(in srgb, #b87a12 55%, var(--hb-ink));
+  color: var(--hb-warning-deep);
 }
 
 .hb-topbar__cluster .hb-usage-widget__trigger.is-tight:hover,
 .hb-topbar__cluster .hb-usage-widget__trigger.is-tight.is-open {
-  background: color-mix(in srgb, #e8a04a 16%, var(--hb-surface));
+  background: color-mix(in srgb, var(--hb-warning) 16%, var(--hb-surface));
 }
 
 .hb-topbar__cluster .hb-bell__badge {
@@ -348,7 +348,7 @@
 }
 
 a.hb-topbar__chip:hover {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   border-color: var(--hb-brand);
 }
 
@@ -382,7 +382,7 @@ a.hb-topbar__chip:hover {
 }
 
 .hb-usage-widget__badge {
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   font-weight: 750;
   letter-spacing: 0.01em;
   line-height: 1;
@@ -402,13 +402,13 @@ a.hb-topbar__chip:hover {
  * 比極簡版明顯、比整顆光暈小。
  */
 .hb-usage-widget__trigger.is-plan-starter .hb-usage-widget__badge {
-  color: color-mix(in srgb, var(--hb-brand) 88%, #fff 12%);
+  color: var(--hb-brand-deep);
   font-weight: 770;
   animation: hb-plan-text-breathe-starter 2.8s ease-in-out infinite;
 }
 
 .hb-usage-widget__trigger.is-plan-pro .hb-usage-widget__badge {
-  color: color-mix(in srgb, #e0bc4a 70%, #fff8e0 30%);
+  color: color-mix(in srgb, var(--hb-gold) 70%, var(--hb-gold-bright) 30%);
   font-weight: 790;
   animation: hb-plan-text-breathe-pro 2.8s ease-in-out infinite;
 }
@@ -433,15 +433,15 @@ a.hb-topbar__chip:hover {
   0%,
   100% {
     text-shadow:
-      0 0 3px color-mix(in srgb, #ffd700 40%, transparent),
-      0 0 8px color-mix(in srgb, #e8c76a 28%, transparent),
-      0 0 14px color-mix(in srgb, #daa520 14%, transparent);
+      0 0 3px color-mix(in srgb, var(--hb-gold-bright) 40%, transparent),
+      0 0 8px color-mix(in srgb, var(--hb-gold) 28%, transparent),
+      0 0 14px color-mix(in srgb, var(--hb-gold) 14%, transparent);
   }
   50% {
     text-shadow:
-      0 0 5px color-mix(in srgb, #fff1b0 75%, transparent),
-      0 0 12px color-mix(in srgb, #ffd700 55%, transparent),
-      0 0 20px color-mix(in srgb, #e8b923 28%, transparent);
+      0 0 5px color-mix(in srgb, var(--hb-gold-bright) 75%, transparent),
+      0 0 12px color-mix(in srgb, var(--hb-gold-bright) 55%, transparent),
+      0 0 20px color-mix(in srgb, var(--hb-gold) 28%, transparent);
   }
 }
 
@@ -455,13 +455,13 @@ a.hb-topbar__chip:hover {
   .hb-usage-widget__trigger.is-plan-pro .hb-usage-widget__badge {
     animation: none;
     text-shadow:
-      0 0 4px color-mix(in srgb, #ffd700 55%, transparent),
-      0 0 10px color-mix(in srgb, #e8c76a 30%, transparent);
+      0 0 4px color-mix(in srgb, var(--hb-gold-bright) 55%, transparent),
+      0 0 10px color-mix(in srgb, var(--hb-gold) 30%, transparent);
   }
 }
 
 .hb-usage-widget__sep {
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 600;
   opacity: 0.4;
   line-height: 1;
@@ -469,7 +469,7 @@ a.hb-topbar__chip:hover {
 }
 
 .hb-usage-widget__stat {
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 650;
   font-variant-numeric: tabular-nums;
   line-height: 1;
@@ -486,12 +486,12 @@ a.hb-topbar__chip:hover {
 }
 
 .hb-usage-widget__stat--cta {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   font-weight: 750;
 }
 
 .hb-usage-widget__stat--warn {
-  color: color-mix(in srgb, #b87a12 70%, var(--hb-ink));
+  color: var(--hb-warning-deep);
   font-weight: 750;
 }
 
@@ -521,7 +521,7 @@ a.hb-topbar__chip:hover {
 
 .hb-usage-widget__eyebrow {
   display: block;
-  font-size: 0.7rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 650;
   color: var(--hb-muted);
 }
@@ -529,20 +529,20 @@ a.hb-topbar__chip:hover {
 .hb-usage-widget__head-plan {
   display: block;
   margin-top: 0.2rem;
-  font-size: 1.05rem;
+  font-size: var(--hb-text-lg);
   font-weight: 750;
   letter-spacing: -0.02em;
 }
 
 .hb-usage-widget__inf {
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   font-weight: 750;
 }
 
 .hb-usage-widget__price {
   display: block;
   margin-top: 0.25rem;
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
   font-weight: 650;
   font-variant-numeric: tabular-nums;
   color: var(--hb-text);
@@ -562,7 +562,7 @@ a.hb-topbar__chip:hover {
 .hb-usage-widget__head-num {
   display: block;
   margin-top: 0.2rem;
-  font-size: 1.05rem;
+  font-size: var(--hb-text-lg);
   font-weight: 750;
   font-variant-numeric: tabular-nums;
   letter-spacing: -0.02em;
@@ -571,13 +571,13 @@ a.hb-topbar__chip:hover {
 .hb-usage-widget__cap {
   font-weight: 600;
   color: var(--hb-muted);
-  font-size: 0.9rem;
+  font-size: var(--hb-text-sm);
 }
 
 .hb-usage-widget__left {
   display: block;
   margin-top: 0.2rem;
-  font-size: 0.75rem;
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
 }
 
@@ -597,11 +597,11 @@ a.hb-topbar__chip:hover {
 }
 
 .hb-usage-widget__track-fill.is-warn {
-  background: color-mix(in srgb, #e8a04a 82%, var(--hb-brand));
+  background: var(--hb-warning);
 }
 
 .hb-usage-widget__track-fill.is-over {
-  background: color-mix(in srgb, #d4524a 78%, var(--hb-brand));
+  background: var(--hb-danger);
 }
 
 .hb-usage-widget__bullets {
@@ -610,14 +610,14 @@ a.hb-topbar__chip:hover {
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   line-height: 1.4;
   color: var(--hb-text);
 }
 
 .hb-usage-widget__caps {
   margin: 0;
-  font-size: 0.72rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 650;
   line-height: 1.4;
   color: var(--hb-text);
@@ -632,9 +632,9 @@ a.hb-topbar__chip:hover {
   margin: 0;
   padding: 0.45rem 0.55rem;
   border-radius: var(--hb-radius);
-  border: 1px solid color-mix(in srgb, #e8a04a 28%, var(--hb-line));
-  background: color-mix(in srgb, #e8a04a 10%, var(--hb-surface-muted));
-  font-size: 0.75rem;
+  border: 1px solid color-mix(in srgb, var(--hb-warning) 28%, var(--hb-line));
+  background: color-mix(in srgb, var(--hb-warning) 10%, var(--hb-surface-muted));
+  font-size: var(--hb-text-2xs);
   font-weight: 650;
   line-height: 1.4;
   color: var(--hb-text);
@@ -654,7 +654,7 @@ a.hb-topbar__chip:hover {
   justify-content: center;
   min-height: 2.15rem;
   padding: 0.35rem 0.5rem;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   text-decoration: none;
   text-align: center;
 }
@@ -666,7 +666,7 @@ a.hb-topbar__chip:hover {
   }
 
   .hb-usage-widget__stat {
-    font-size: 0.72rem;
+    font-size: var(--hb-text-2xs);
   }
 }
 
@@ -701,7 +701,7 @@ a.hb-topbar__chip:hover {
 .hb-sidebar {
   display: none;
   border-right: 1px solid color-mix(in srgb, var(--hb-line-strong, var(--hb-line)) 70%, transparent);
-  background: color-mix(in srgb, var(--hb-surface-solid, #fff) 84%, transparent);
+  background: color-mix(in srgb, var(--hb-surface-solid) 84%, transparent);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   padding: var(--hb-space-4) var(--hb-space-3);
@@ -709,7 +709,7 @@ a.hb-topbar__chip:hover {
 
 .hb-sidebar__label {
   margin: 0 0 var(--hb-space-3) var(--hb-space-2);
-  font-size: 0.7rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -729,7 +729,7 @@ a.hb-topbar__chip:hover {
 
 .hb-nav__group-label {
   margin: 0 0 var(--hb-space-1) var(--hb-space-2);
-  font-size: 0.68rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 700;
   letter-spacing: 0.06em;
   color: var(--hb-subtle);
@@ -768,20 +768,24 @@ a.hb-topbar__chip:hover {
   opacity: 0.88;
 }
 
-.hb-nav__item:hover {
-  background: var(--hb-brand-soft);
-  color: var(--hb-brand-deep);
-}
-
+.hb-nav__item:hover,
 .hb-nav__item:focus-visible {
   background: var(--hb-brand-soft);
   color: var(--hb-brand-deep);
 }
 
-.hb-nav__item--active {
-  background: var(--hb-brand-soft);
-  color: var(--hb-brand-deep);
-  box-shadow: inset 3px 0 0 var(--hb-brand);
+/*
+ * 選中 = 實心主色塊 + 近黑字（10.3:1）；hover 只是淡底。
+ * 兩者一眼分得出來，也不必再靠一條被圓角切掉的 inset 3px 直線來區別
+ * —— 原本 hover 與選中的底色、字色完全相同，只差那條線。
+ */
+.hb-nav__item--active,
+.hb-nav__item--active:hover,
+.hb-nav__item--active:focus-visible {
+  background: var(--hb-brand);
+  color: var(--hb-brand-on);
+  font-weight: 700;
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--hb-ink) 10%, transparent);
 }
 
 .hb-nav__item--active .hb-nav__ico {
@@ -868,7 +872,7 @@ a.hb-topbar__chip:hover {
   min-height: calc(var(--hb-dock-height) + env(safe-area-inset-bottom, 0px));
   padding: 0.4rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
   border-top: 1px solid color-mix(in srgb, var(--hb-line-strong, var(--hb-line)) 50%, transparent);
-  background: color-mix(in srgb, var(--hb-surface-solid, #fff) 84%, transparent);
+  background: color-mix(in srgb, var(--hb-surface-solid) 84%, transparent);
   backdrop-filter: saturate(160%) blur(22px);
   -webkit-backdrop-filter: saturate(160%) blur(22px);
 }
@@ -887,7 +891,7 @@ a.hb-topbar__chip:hover {
   color: var(--hb-muted);
   text-decoration: none;
   font: inherit;
-  font-size: 0.68rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 650;
   padding: 0.3rem 0.15rem;
   text-align: center;
@@ -906,10 +910,12 @@ a.hb-topbar__chip:hover {
   background: var(--hb-brand-soft);
 }
 
-.hb-dock__item--active {
-  color: var(--hb-brand-deep);
-  background: var(--hb-brand-soft);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hb-brand) 22%, transparent);
+/* 與側欄選單同一套：選中是實心主色塊。 */
+.hb-dock__item--active,
+.hb-dock__item--active:focus-visible {
+  color: var(--hb-brand-on);
+  background: var(--hb-brand);
+  font-weight: 700;
 }
 
 .hb-dock__icon {
@@ -961,7 +967,7 @@ a.hb-topbar__chip:hover {
   border: 0;
   padding: 0;
   margin: 0;
-  background: rgb(21 40 37 / 0.35);
+  background: color-mix(in srgb, var(--hb-ink) 35%, transparent);
   cursor: pointer;
 }
 
@@ -1000,7 +1006,7 @@ a.hb-topbar__chip:hover {
 
 .hb-dock-more__title {
   margin: 0 0 0.65rem;
-  font-size: 0.95rem;
+  font-size: var(--hb-text-base);
   font-weight: 700;
   letter-spacing: -0.01em;
   color: var(--hb-ink);
@@ -1013,7 +1019,7 @@ a.hb-topbar__chip:hover {
 
 .hb-dock-more__group-label {
   margin: 0 0 0.3rem 0.25rem;
-  font-size: 0.68rem;
+  font-size: var(--hb-text-2xs);
   font-weight: 700;
   letter-spacing: 0.06em;
   color: var(--hb-subtle);
@@ -1041,7 +1047,7 @@ a.hb-topbar__chip:hover {
   color: var(--hb-ink);
   font: inherit;
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: var(--hb-text-base);
   text-align: left;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
@@ -1053,10 +1059,12 @@ a.hb-topbar__chip:hover {
   background: var(--hb-brand-soft);
 }
 
-.hb-dock-more__row.is-active {
-  border-color: color-mix(in srgb, var(--hb-brand) 40%, var(--hb-line));
-  background: var(--hb-brand-soft);
-  color: var(--hb-brand-deep);
+.hb-dock-more__row.is-active,
+.hb-dock-more__row.is-active:hover {
+  border-color: transparent;
+  background: var(--hb-brand);
+  color: var(--hb-brand-on);
+  font-weight: 700;
 }
 
 .hb-dock-more__row .hb-dock__icon {
@@ -1071,7 +1079,7 @@ a.hb-topbar__chip:hover {
 }
 
 .hb-dock-more__check {
-  font-size: 0.9rem;
+  font-size: var(--hb-text-sm);
   font-weight: 700;
   color: var(--hb-brand-deep);
   flex-shrink: 0;
@@ -1091,7 +1099,7 @@ a.hb-topbar__chip:hover {
   }
 
   .hb-topbar__name {
-    font-size: 0.95rem;
+    font-size: var(--hb-text-base);
   }
 
   .hb-main {
diff --git a/apps/web/src/styles/tokens.css b/apps/web/src/styles/tokens.css
index 2eb3de8..4583710 100644
--- a/apps/web/src/styles/tokens.css
+++ b/apps/web/src/styles/tokens.css
@@ -1,64 +1,79 @@
 /**
  * 巡樓 · Lapras — Harbor Desk UI
- * 色：teal mint primary / soft cyan secondary / coral accent
- * （Pokémon Palette 衍生）
- * 字體：Inter + Taipei Sans TC（保留）
+ * 色：pale blue 主色 / cream 次色 / burnt orange 點綴（Pokémon Palette）
+ * 字體：Inter + Taipei Sans TC
+ *
+ * 唯一真相：顏色、字級、間距只在這個檔案定義。其他 css 與 tsx 一律吃 var()，
+ * 不寫死色碼與 font-size —— 否則深淺模式會有一半的畫面不跟著切。
+ * 由 `npm run check:tokens` 把關。
+ *
+ * 命名規則：
+ *   X        當填色、底色、邊框
+ *   X-on     疊在 X 底色上的文字
+ *   X-soft   hover／淡底
+ *   X-deep   把該色「當文字」放在頁面或卡片底色上的深一階；只有本身對比不足的
+ *            顏色才有（brand / danger / warning），success 自己就過 AA。
+ * 主色是淺藍，當文字只有 1.9:1，所以主色當文字一律走 --hb-brand-deep。
+ * --hb-subtle 只有 3.8:1，僅供裝飾與 18px 以上大字，勿用於內文。
+ *
+ * 兩條防髒規則：
+ * 1. 不要把兩個「有彩度」的顏色互相 color-mix。藍(H≈187)配橘(H≈32)是補色，
+ *    混出來一定是濁褐；要調淡就跟 surface／line／transparent 混。要一深一淺的
+ *    同一顏色就用 X 與 X-deep。
+ * 2. 中性色（bg / surface / line / muted / subtle）全部維持 H≈180-191 的冷青，
+ *    跟 ink 與主色同溫。palette 原本的 muted 是 H=44 的暖褐，疊在偏冷的白底上
+ *    會整片發黃發濁。暖色只出現在刻意的強調上：warning、accent、方案金標。
  */
 
 :root {
   color-scheme: light;
 
-  /* Brand source tokens */
-  --pp-primary: #20b49c;
-  --pp-secondary: #69d4c5;
-  --pp-ring: #22c3a8;
-  --pp-fg: #152825;
-  --pp-accent: #ff7b73;
-
   --hb-bg: #fcfdfd;
   --hb-surface: rgba(255, 255, 255, 0.9);
   --hb-surface-solid: #ffffff;
-  --hb-surface-muted: #f2f7f7;
-  --hb-ink: #152825;
-  --hb-text: #152825;
-  --hb-fg: #152825;
-  --hb-ink-secondary: #2a403c;
-  --hb-muted: #62847f;
-  --hb-subtle: #7a9a95;
-  --hb-line: color-mix(in srgb, #e0ebe9 88%, transparent);
-  --hb-line-strong: #e0ebe9;
+  --hb-surface-muted: #f2f6f6;
+  --hb-ink: #152628;
+  --hb-text: #152628;
+  --hb-fg: #152628;
+  --hb-ink-secondary: #33474a;
+  --hb-muted: #566869; /* 5.8:1 於 bg、5.4:1 於 surface-muted */
+  --hb-subtle: #748687; /* 3.8:1 — 裝飾／大字限定 */
+  --hb-line: color-mix(in srgb, #e0e9eb 88%, transparent);
+  --hb-line-strong: #e0e9eb;
+  --hb-scrim: rgb(21 38 40 / 0.55);
 
-  --hb-brand: #20b49c;
-  --hb-brand-hover: #1a9a86;
-  --hb-brand-soft: color-mix(in srgb, #20b49c 13%, #ffffff);
-  --hb-brand-on: #ffffff;
-  --hb-brand-deep: #178f7d;
-  --hb-magic: #69d4c5;
-  --hb-magic-glow: rgb(32 180 156 / 0.28);
-  --hb-focus: color-mix(in srgb, #22c3a8 78%, #69d4c5);
+  --hb-brand: #8bc5cd;
+  --hb-brand-hover: #76b8c1;
+  --hb-brand-soft: color-mix(in srgb, #8bc5cd 20%, #ffffff);
+  --hb-brand-on: #0a0a0a; /* 10.3:1 於 brand */
+  --hb-brand-deep: #2d5f66; /* 7.0:1 於 bg，主色當文字時用 */
+  --hb-magic: #fee5a1; /* 次色奶油黃：只當淡底與裝飾 */
+  --hb-magic-glow: rgb(139 197 205 / 0.2);
+  --hb-focus: #2d5f66;
 
-  --hb-success: #117d70;
-  --hb-success-soft: #e7f7f4;
+  --hb-success: #2f7d3f; /* 純綠 H=135，與 brand-deep 的青藍明顯分開 */
+  --hb-success-soft: #eaf4ec;
+  --hb-success-on: #ffffff; /* 5.2:1 */
   --hb-danger: #ef4444;
-  --hb-danger-soft: #fcecef;
-  --hb-warning: #9a7117;
-  --hb-warning-soft: #faf3df;
-  --hb-accent-warm: #ff7b73;
+  --hb-danger-soft: #fdecec;
+  --hb-danger-on: #0a0a0a; /* 5.3:1；白字只有 3.8:1 */
+  --hb-danger-deep: #c0392b; /* 5.3:1 於 bg */
+  --hb-warning: #b96b1c;
+  --hb-warning-soft: #fbf1e3;
+  --hb-warning-on: #0a0a0a; /* 4.9:1；白字只有 4.1:1 */
+  --hb-warning-deep: #a35d16; /* 5.1:1 於白卡 */
+  --hb-accent-warm: #b96b1c; /* 與 warning 同色：palette 只有這一個暖點綴 */
 
-  --hb-fun-mint: #20b49c;
-  --hb-fun-mint-soft: #e7f8f5;
-  --hb-fun-sky: #69d4c5;
-  --hb-fun-sky-soft: #e8faf7;
-  --hb-fun-coral: #ff7b73;
-  --hb-fun-coral-soft: #fff0ed;
-  --hb-fun-peach: #e8a878;
-  --hb-fun-peach-soft: #fef6e8;
-  --hb-fun-lavender: #3aa89a;
-  --hb-fun-lavender-soft: #e8f6f3;
-  --hb-fun-gold: #d19b34;
-  --hb-fun-gold-soft: #fbf4e5;
+  /* 畫布極光：主色的暗一階，只用來鋪背景 */
+  --hb-brand-dim: #6f9ba3;
+  --hb-aurora-1: color-mix(in srgb, #8bc5cd 20%, transparent);
+  --hb-aurora-2: color-mix(in srgb, #8bc5cd 11%, transparent);
+  --hb-aurora-3: color-mix(in srgb, #6f9ba3 12%, transparent);
+
+  /* 付費方案的金色字光（裝飾用，不當文字色） */
+  --hb-gold: #d9a531;
+  --hb-gold-bright: #fee5a1;
 
-  --hb-radius-sm: 0.55rem;
   --hb-radius: 0.8rem;
   --hb-radius-lg: 1rem;
   --hb-radius-xl: 1.15rem;
@@ -66,22 +81,26 @@
 
   --hb-shadow-card:
     0 0 0 1px color-mix(in srgb, var(--hb-line-strong) 70%, transparent),
-    0 1px 2px rgb(21 40 37 / 0.04),
-    0 9px 28px rgb(32 180 156 / 0.1);
+    0 1px 2px rgb(21 38 40 / 0.04),
+    0 9px 28px rgb(21 38 40 / 0.06);
   --hb-shadow-soft: 0 4px 18px var(--hb-magic-glow);
-  --hb-shadow-float: 0 16px 48px rgb(21 40 37 / 0.12);
-  --hb-shadow-glow: 0 0 24px rgb(34 195 168 / 0.3);
+  --hb-shadow-float: 0 16px 48px rgb(21 38 40 / 0.12);
+  --hb-shadow-glow: 0 0 24px rgb(139 197 205 / 0.4);
 
   --hb-font-sans: "Inter", "Taipei Sans TC", system-ui, -apple-system, "Segoe UI",
     "Noto Sans TC", sans-serif;
   --hb-font-en: "Inter", system-ui, -apple-system, sans-serif;
+  --hb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
 
-  /* 緊湊資訊層；輸入框維持 16px 避免 iOS 縮放。 */
+  /* 字階只有這 7 級，之間沒有中間值 —— 0.8 / 0.82 / 0.85 併存看不出差別，
+     只會讓整頁失去節奏。輸入框維持 16px 避免 iOS 聚焦時縮放。 */
+  --hb-text-2xs: 0.75rem; /* 12px · badge／極小 meta */
   --hb-text-xs: 0.8125rem; /* 13px · 次要 meta */
   --hb-text-sm: 0.875rem; /* 14px · 按鈕／輔助 */
   --hb-text-base: 1rem; /* 16px · 內文 */
   --hb-text-lg: 1.125rem; /* 18px · 卡片標題 */
   --hb-text-xl: 1.375rem; /* 22px · 頁標題 */
+  --hb-text-2xl: 1.75rem; /* 28px · 登入／定價大標 */
   --hb-text-input: 1rem; /* 16px · 表單 */
 
   --hb-space-1: 0.25rem;
@@ -103,69 +122,63 @@
   --hb-sidebar-width: 15rem;
   --hb-topbar-height: 3.6rem;
   --hb-dock-height: 3.85rem;
-
-  --hb-aurora-1: color-mix(in srgb, #20b49c 16%, transparent);
-  --hb-aurora-2: color-mix(in srgb, #69d4c5 12%, transparent);
-  --hb-aurora-3: color-mix(in srgb, #ff7b73 8%, transparent);
 }
 
 /**
- * Dark：深海綠畫布，mint 主色與 coral 點綴。
+ * Dark：冷灰藍畫布，暖褐色作為 muted 層（palette 的 --muted 就是暖色）。
+ * 深底下亮色本身對比就夠，所以 -deep 反而是更亮的一階。
  */
 [data-theme="dark"] {
   color-scheme: dark;
 
-  --hb-bg: #141a19;
-  --hb-surface: rgba(27, 39, 37, 0.9);
-  --hb-surface-solid: #1b2725;
-  --hb-surface-muted: #253735;
-  --hb-ink: #f4f6f5;
-  --hb-text: #f4f6f5;
-  --hb-fg: #f4f6f5;
-  --hb-ink-secondary: #d0dcd9;
-  --hb-muted: #98b3b0;
-  --hb-subtle: #7a9592;
-  --hb-line: color-mix(in srgb, #2d4340 92%, transparent);
-  --hb-line-strong: #2d4340;
+  --hb-bg: #141a1a;
+  --hb-surface: rgba(27, 38, 39, 0.9);
+  --hb-surface-solid: #1b2627;
+  --hb-surface-muted: #243132;
+  --hb-ink: #f4f6f6;
+  --hb-text: #f4f6f6;
+  --hb-fg: #f4f6f6;
+  --hb-ink-secondary: #d3dcdc;
+  --hb-muted: #a9b7b7; /* 8.5:1 */
+  --hb-subtle: #8b9a9a; /* 6.0:1 */
+  --hb-line: color-mix(in srgb, #2d4143 92%, transparent);
+  --hb-line-strong: #2d4143;
+  --hb-scrim: rgb(0 0 0 / 0.66);
 
-  --hb-brand: #3cddc2;
-  --hb-brand-hover: #55e5cd;
-  --hb-brand-soft: color-mix(in srgb, #3cddc2 14%, #1b2725);
-  --hb-brand-on: #0a0a0a;
-  --hb-brand-deep: #69e8d5;
-  --hb-magic: #69d3c5;
-  --hb-magic-glow: rgb(60 221 194 / 0.32);
-  --hb-focus: color-mix(in srgb, #3cddc2 78%, #69d3c5);
+  --hb-brand: #89c5cd;
+  --hb-brand-hover: #a3d4da;
+  --hb-brand-soft: color-mix(in srgb, #89c5cd 14%, #1b2627);
+  --hb-brand-on: #0a0a0a; /* 10.3:1 */
+  --hb-brand-deep: #b7e3e8;
+  --hb-magic: #fee59f;
+  --hb-magic-glow: rgb(137 197 205 / 0.18);
+  --hb-focus: #89c5cd;
 
+  --hb-success: #74d189; /* 9.4:1，純綠 */
+  --hb-success-soft: #16251a;
+  --hb-success-on: #0a0a0a;
   --hb-danger: #dc2626;
   --hb-danger-soft: #341919;
-  --hb-success: #3cddc2;
-  --hb-success-soft: #142a2b;
-  --hb-warning: #e0c060;
-  --hb-warning-soft: #2a2414;
-  --hb-accent-warm: #ff7c75;
+  --hb-danger-on: #ffffff; /* 4.8:1 —— 深底的紅維持白字 */
+  --hb-danger-deep: #f87171; /* 5.6:1 於卡片；#ef4444 只有 4.1:1 */
+  --hb-warning: #e18c37; /* 6.7:1 */
+  --hb-warning-soft: #2f2416;
+  --hb-warning-on: #0a0a0a;
+  --hb-warning-deep: #e18c37; /* 深底不必再加深 */
+  --hb-accent-warm: #e18c37;
 
-  --hb-fun-mint: #3cddc2;
-  --hb-fun-mint-soft: #172b2c;
-  --hb-fun-sky: #69d3c5;
-  --hb-fun-sky-soft: #1b2b31;
-  --hb-fun-coral: #ff7c75;
-  --hb-fun-coral-soft: #342020;
-  --hb-fun-peach: #e8c890;
-  --hb-fun-peach-soft: #2a2418;
-  --hb-fun-lavender: #69d3c5;
-  --hb-fun-lavender-soft: #1e2f2d;
-  --hb-fun-gold: #e0c060;
-  --hb-fun-gold-soft: #2a2418;
+  --hb-brand-dim: #7fb0b8;
+  --hb-aurora-1: color-mix(in srgb, #89c5cd 14%, transparent);
+  --hb-aurora-2: color-mix(in srgb, #89c5cd 7%, transparent);
+  --hb-aurora-3: color-mix(in srgb, #7fb0b8 8%, transparent);
+
+  --hb-gold: #e1b84f;
+  --hb-gold-bright: #fee59f;
 
   --hb-shadow-card:
-    0 0 0 1px color-mix(in srgb, #2d4340 90%, transparent),
+    0 0 0 1px color-mix(in srgb, #2d4143 90%, transparent),
     0 10px 36px rgb(0 0 0 / 0.45);
   --hb-shadow-soft: 0 4px 22px var(--hb-magic-glow);
   --hb-shadow-float: 0 20px 56px rgb(0 0 0 / 0.55);
-  --hb-shadow-glow: 0 0 32px rgb(60 221 194 / 0.28);
-
-  --hb-aurora-1: color-mix(in srgb, #3cddc2 12%, transparent);
-  --hb-aurora-2: color-mix(in srgb, #69d3c5 8%, transparent);
-  --hb-aurora-3: color-mix(in srgb, #ff7c75 5%, transparent);
+  --hb-shadow-glow: 0 0 32px rgb(137 197 205 / 0.28);
 }
diff --git a/apps/web/src/styles/ui.css b/apps/web/src/styles/ui.css
index 4436048..78a99c6 100644
--- a/apps/web/src/styles/ui.css
+++ b/apps/web/src/styles/ui.css
@@ -33,54 +33,38 @@
   cursor: not-allowed;
 }
 
+/*
+ * 主按鈕、選中的 tab、側欄與 dock 的選中項共用同一個配方：實心 --hb-brand +
+ * --hb-brand-on。主色是淺藍，漸層到 --hb-brand-deep 會讓近黑字在深端失去對比，
+ * 所以這裡不用漸層，深淺兩個主題也不需要各寫一份。
+ */
 .hb-btn--primary {
-  background: linear-gradient(
-    165deg,
-    var(--hb-brand-hover) 0%,
-    var(--hb-brand) 55%,
-    var(--hb-brand-deep) 100%
-  );
+  background: var(--hb-brand);
   color: var(--hb-brand-on);
-  box-shadow:
-    0 1px 0 rgb(255 255 255 / 0.4) inset,
-    0 0 0 1px color-mix(in srgb, var(--hb-magic) 24%, transparent),
-    var(--hb-shadow-soft);
+  box-shadow: var(--hb-shadow-soft);
   border-color: transparent;
 }
 
-/* 深色主按鈕以秘儀紫為底、薄荷法光收邊。 */
-[data-theme="dark"] .hb-btn--primary {
-  background: linear-gradient(
-    165deg,
-    color-mix(in srgb, var(--hb-magic) 55%, var(--hb-brand)) 0%,
-    var(--hb-brand) 100%
-  );
-  color: var(--hb-brand-on);
-  box-shadow:
-    0 1px 0 rgb(255 255 255 / 0.18) inset,
-    0 0 0 1px color-mix(in srgb, var(--hb-brand) 25%, transparent),
-    var(--hb-shadow-soft);
-}
-
 .hb-btn--primary:hover:not(:disabled) {
   transform: translateY(-0.5px);
+  background: var(--hb-brand-hover);
   box-shadow: var(--hb-shadow-glow), var(--hb-shadow-soft);
 }
 
 .hb-btn--secondary {
-  background: color-mix(in srgb, var(--hb-brand) 10%, var(--hb-surface-solid, #fff));
+  background: color-mix(in srgb, var(--hb-brand) 10%, var(--hb-surface-solid));
   color: var(--hb-ink);
   border-color: transparent;
-  box-shadow: 0 1px 2px rgb(21 40 37 / 0.04);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--hb-ink) 6%, transparent);
 }
 
 .hb-btn--secondary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--hb-magic) 22%, var(--hb-surface-solid, #fff));
+  background: color-mix(in srgb, var(--hb-magic) 22%, var(--hb-surface-solid));
   color: var(--hb-ink);
 }
 
 .hb-btn--ghost {
-  background: color-mix(in srgb, var(--hb-surface-solid, #fff) 70%, transparent);
+  background: color-mix(in srgb, var(--hb-surface-solid) 70%, transparent);
   color: var(--hb-ink-secondary);
   border-color: var(--hb-line-strong, var(--hb-line));
   backdrop-filter: blur(8px);
@@ -94,7 +78,7 @@
 
 .hb-btn--danger {
   background: var(--hb-danger);
-  color: #fff;
+  color: var(--hb-danger-on);
 }
 
 .hb-btn--danger:hover:not(:disabled) {
@@ -125,7 +109,7 @@
 
 .hb-field__error {
   font-size: var(--hb-text-sm);
-  color: var(--hb-danger);
+  color: var(--hb-danger-deep);
   line-height: 1.5;
   margin: 0;
 }
@@ -268,13 +252,13 @@
 
 .hb-badge--danger {
   background: var(--hb-danger-soft);
-  color: var(--hb-danger);
+  color: var(--hb-danger-deep);
   border-color: color-mix(in srgb, var(--hb-danger) 16%, transparent);
 }
 
 .hb-badge--warning {
   background: var(--hb-warning-soft);
-  color: color-mix(in srgb, var(--hb-warning) 88%, var(--hb-ink));
+  color: var(--hb-warning-deep);
   border-color: color-mix(in srgb, var(--hb-warning) 18%, transparent);
 }
 
@@ -314,7 +298,7 @@
   background: color-mix(in srgb, var(--hb-surface) 70%, var(--hb-brand-soft));
   width: 100%;
   max-width: 100%;
-  box-shadow: 0 1px 2px rgb(65 164 230 / 0.06);
+  box-shadow: 0 1px 2px color-mix(in srgb, var(--hb-brand) 8%, transparent);
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
@@ -379,26 +363,18 @@
   background: color-mix(in srgb, var(--hb-surface) 60%, transparent);
 }
 
+/* segment 樣式的 tab 是「白片浮起」，選中只換字色。 */
 .hb-tab.is-active {
   background: var(--hb-surface);
   color: var(--hb-brand-deep);
-  box-shadow: 0 1px 4px rgb(8 127 116 / 0.18);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--hb-brand-deep) 18%, transparent);
 }
 
-/* 選中 tab使用深海 teal，維持白字對比。 */
+/* 一般 tab 走與側欄選單相同的實心主色塊。 */
 .hb-tabs:not(.hb-tabs--segment) .hb-tab.is-active {
-  background: linear-gradient(
-    180deg,
-    var(--hb-brand),
-    var(--hb-brand-deep)
-  );
+  background: var(--hb-brand);
   color: var(--hb-brand-on);
-  box-shadow: 0 2px 8px rgb(8 127 116 / 0.28);
-}
-
-[data-theme="dark"] .hb-tabs:not(.hb-tabs--segment) .hb-tab.is-active {
-  color: var(--hb-brand-on);
-  box-shadow: 0 0 16px rgb(60 221 194 / 0.22), 0 2px 8px rgb(0 0 0 / 0.3);
+  box-shadow: 0 2px 8px color-mix(in srgb, var(--hb-brand-deep) 24%, transparent);
 }
 
 [data-theme="dark"] .hb-badge--brand {
@@ -457,7 +433,7 @@
 .hb-banner-error {
   border-color: color-mix(in srgb, var(--hb-danger) 40%, var(--hb-line));
   background: color-mix(in srgb, var(--hb-danger) 10%, var(--hb-surface));
-  color: var(--hb-danger);
+  color: var(--hb-danger-deep);
 }
 
 .hb-check-row {
@@ -587,7 +563,7 @@
   border: 0;
   background: none;
   padding: 0;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   font: inherit;
   font-size: inherit;
   font-weight: 600;
@@ -600,7 +576,7 @@
   border: 0;
   background: none;
   padding: 0;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   font: inherit;
   font-size: inherit;
   font-weight: 600;
@@ -627,7 +603,7 @@
   border-radius: var(--hb-radius);
   border: 1px solid var(--hb-line);
   background: var(--hb-surface);
-  font-size: 0.9rem;
+  font-size: var(--hb-text-sm);
 }
 
 .hb-reply-child.is-mine {
@@ -688,7 +664,7 @@
 }
 
 .hb-metrics-chip {
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   color: var(--hb-ink-secondary);
   white-space: nowrap;
 }
@@ -726,11 +702,11 @@
 .hb-metrics-cell__val {
   font-weight: 700;
   font-variant-numeric: tabular-nums;
-  font-size: 1rem;
+  font-size: var(--hb-text-base);
 }
 
 .hb-metrics-cell__label {
-  font-size: 0.7rem;
+  font-size: var(--hb-text-2xs);
   color: var(--hb-muted);
 }
 
@@ -770,7 +746,7 @@
   border: 1px solid var(--hb-line);
   background: var(--hb-surface);
   color: var(--hb-text);
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
   line-height: 1;
   padding: 0;
   cursor: pointer;
@@ -784,10 +760,10 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  font-size: 0.85rem;
+  font-size: var(--hb-text-sm);
   font-weight: 600;
-  color: var(--hb-fg, #111);
-  background: rgba(255, 255, 255, 0.85);
+  color: var(--hb-fg);
+  background: color-mix(in srgb, var(--hb-surface-solid) 85%, transparent);
   border-radius: 999px;
   padding: 0.1rem 0.4rem;
   pointer-events: none;
@@ -799,11 +775,11 @@
   z-index: 1;
   border: none;
   border-radius: 4px;
-  font-size: 0.65rem;
+  font-size: var(--hb-text-2xs);
   padding: 0.1rem 0.3rem;
   cursor: pointer;
-  background: var(--hb-danger, #c0392b);
-  color: #fff;
+  background: var(--hb-danger);
+  color: var(--hb-danger-on);
 }
 .hb-thumb-item__retry:disabled {
   opacity: 0.5;
@@ -934,7 +910,7 @@
 
 .hb-compact-row__meta {
   margin: 0.3rem 0 0;
-  font-size: 0.78rem;
+  font-size: var(--hb-text-xs);
   line-height: 1.45;
   word-break: break-word;
 }
@@ -943,7 +919,7 @@
   min-height: 2.4rem;
   padding: 0.35rem 0.65rem;
   white-space: nowrap;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
   width: 100%;
 }
 
@@ -1012,7 +988,7 @@
   display: none;
   border: 0;
   background: transparent;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
   font: inherit;
   font-size: var(--hb-text-sm);
   font-weight: 600;
@@ -1023,7 +999,7 @@
 
 .hb-tabs--sm .hb-tab {
   padding: 0.35rem 0.75rem;
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
 }
 
 .hb-persona-list {
@@ -1122,7 +1098,7 @@
   display: block;
   font-size: var(--hb-text-sm);
   margin-bottom: 0.35rem;
-  color: var(--hb-brand);
+  color: var(--hb-brand-deep);
 }
 
 .hb-dim-card p {
@@ -1135,5 +1111,5 @@
   margin: 0.4rem 0 0;
   padding-left: 1rem;
   color: var(--hb-muted);
-  font-size: 0.8rem;
+  font-size: var(--hb-text-xs);
 }