From e0809f25162f5b0f368883c29d4fe6d2230236d4 Mon Sep 17 00:00:00 2001
From: OoO <ooo@MacBook-Pro.local>
Date: Tue, 12 May 2026 21:59:00 +0800
Subject: [PATCH] Align daily sales typography with V3 tokens

---
 .../components/_analysis_report_tabs.html     |  15 +-
 web/static/css/ewoooc-tokens-v2-alias.css     |  49 ++-
 web/static/css/page-daily-sales.css           | 330 +++++++++---------
 3 files changed, 216 insertions(+), 178 deletions(-)

diff --git a/templates/components/_analysis_report_tabs.html b/templates/components/_analysis_report_tabs.html
index 60aca1a..1b3cc76 100644
--- a/templates/components/_analysis_report_tabs.html
+++ b/templates/components/_analysis_report_tabs.html
@@ -10,8 +10,8 @@
         padding: 8px;
         border: 1px solid var(--momo-border-light, rgba(42, 37, 32, 0.16));
         border-radius: 8px;
-        background: rgba(250, 247, 240, 0.84);
-        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36);
+        background: var(--momo-bg-elevated, #fdfaf2);
+        box-shadow: var(--momo-shadow-md, 0 0 0 1px rgba(42, 37, 32, 0.10));
     }
     .analysis-report-tabs-spacer {
         flex: 1 1 auto;
@@ -27,8 +27,9 @@
         border-radius: 7px;
         color: var(--momo-text-secondary, #645c52);
         text-decoration: none;
-        font-size: 0.86rem;
-        font-weight: 800;
+        font-family: var(--momo-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+        font-size: var(--momo-text-body-sm, 13px);
+        font-weight: 700;
         transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
     }
     .analysis-report-tab:hover {
@@ -38,12 +39,12 @@
     }
     .analysis-report-tab.is-active {
         border-color: var(--momo-page-accent-dark, #a95846);
-        background: linear-gradient(135deg, var(--momo-page-accent, #d96f52), var(--momo-page-accent-dark, #a95846));
-        color: var(--momo-page-inverse, #fff8ee);
+        background: var(--momo-page-accent, #c89043);
+        color: var(--momo-page-inverse, #fff8ef);
     }
     .analysis-report-tab.is-external {
         border-color: var(--momo-border-light, rgba(42, 37, 32, 0.16));
-        background: rgba(255, 252, 246, 0.62);
+        background: var(--momo-bg-surface, #faf6ec);
         font-family: var(--momo-font-family-mono, "SF Mono", Menlo, Consolas, monospace);
         font-size: 0.78rem;
     }
diff --git a/web/static/css/ewoooc-tokens-v2-alias.css b/web/static/css/ewoooc-tokens-v2-alias.css
index a3179f7..f0930eb 100644
--- a/web/static/css/ewoooc-tokens-v2-alias.css
+++ b/web/static/css/ewoooc-tokens-v2-alias.css
@@ -15,24 +15,51 @@
 :root {
   /* ── 暖色主軸（最常用，~30+ 處 inline 引用）── */
   --momo-warm-caramel:   var(--momo-page-accent);       /* 焦糖橘主色 */
-  --momo-warm-rust:      var(--momo-tag-rust);          /* 鐵鏽紅 */
-  --momo-warm-mahogany:  var(--momo-tag-clay);          /* 桃花心木 */
-  --momo-warm-honey:     var(--momo-tag-honey);         /* 蜂蜜黃 */
-  --momo-warm-earth:     var(--momo-tag-olive);         /* 大地綠 */
-  --momo-warm-sand:      var(--momo-tag-sand);          /* 沙色 */
+  --momo-warm-rust:      var(--momo-danger-text);       /* 鐵鏽紅 */
+  --momo-warm-mahogany:  var(--momo-tag-clay-text);     /* 桃花心木 */
+  --momo-warm-honey:     var(--momo-warning-text);      /* 蜂蜜黃 */
+  --momo-warm-earth:     var(--momo-tag-olive-text);    /* 大地綠 */
+  --momo-warm-sand:      var(--momo-tag-muted-text);    /* 沙色 */
+
+  /* ── 舊頁直接引用的單色 tag 名稱 ── */
+  --momo-tag-rust:       var(--momo-tag-rust-text);
+  --momo-tag-olive:      var(--momo-tag-olive-text);
+  --momo-tag-honey:      var(--momo-tag-honey-text);
+  --momo-tag-clay:       var(--momo-tag-clay-text);
+  --momo-tag-mahogany:   var(--momo-danger-text);
+  --momo-tag-sand:       var(--momo-tag-muted-text);
 
   /* ── 背景與紙張 ── */
-  --momo-bg-canvas:      var(--momo-canvas);
-  --momo-bg-paper:       var(--momo-paper);
+  --momo-canvas:         var(--momo-bg-body);
+  --momo-paper:          var(--momo-bg-surface);
+  --momo-surface:        var(--momo-bg-surface);
+  --momo-surface-raised: var(--momo-bg-elevated);
+  --momo-surface-sunken: var(--momo-bg-subtle);
+  --momo-surface-0:      var(--momo-bg-surface);
+  --momo-surface-1:      var(--momo-bg-paper);
+  --momo-surface-2:      var(--momo-bg-elevated);
+  --momo-page-bg:        var(--momo-bg-body);
+  --momo-bg-canvas:      var(--momo-bg-body);
+  --momo-bg-paper:       var(--momo-bg-surface);
   --momo-bg-soft:        var(--momo-page-accent-soft);
 
   /* ── 文字色 ── */
+  --momo-text-strong:    var(--momo-text-primary);
   --momo-text-primary:   var(--momo-ink);
   --momo-text-secondary: var(--momo-ink-soft);
-  --momo-text-muted:     var(--momo-ink-mute);
+  --momo-text-muted:     var(--momo-text-secondary);
+  --momo-text-faint:     var(--momo-text-tertiary);
+  --momo-ink-mute:       var(--momo-text-tertiary);
 
   /* ── 線條與陰影 ── */
-  --momo-border:         var(--momo-rule);
-  --momo-shadow-soft:    var(--momo-shadow-card);
-  --momo-shadow-deep:    var(--momo-shadow-elev);
+  --momo-rule:           var(--momo-border-light);
+  --momo-border-subtle:  var(--momo-border-light);
+  --momo-border:         var(--momo-border-light);
+  --momo-shadow-card:    var(--momo-shadow-md);
+  --momo-shadow-elev:    var(--momo-shadow-lg);
+  --momo-shadow-soft:    var(--momo-shadow-md);
+  --momo-shadow-deep:    var(--momo-shadow-lg);
+
+  /* ── 互動文字 ── */
+  --momo-on-accent:      var(--momo-page-inverse);
 }
diff --git a/web/static/css/page-daily-sales.css b/web/static/css/page-daily-sales.css
index 1ef8b1c..211e207 100644
--- a/web/static/css/page-daily-sales.css
+++ b/web/static/css/page-daily-sales.css
@@ -8,6 +8,10 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  color: var(--momo-text-primary);
+  font-family: var(--momo-font-family);
+  font-size: var(--momo-text-body);
+  line-height: var(--momo-line-height-base);
 }
 
 /* ---------- Hero ---------- */
@@ -19,7 +23,7 @@
   padding: 14px 16px;
   border: 1px solid var(--momo-border-strong);
   border-radius: 8px;
-  background: var(--momo-surface-raised);
+  background: var(--momo-bg-elevated);
 }
 
 .daily-hero__title {
@@ -27,10 +31,11 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  font-family: var(--momo-font-display);
-  font-size: 1.55rem;
+  font-family: var(--momo-font-family);
+  font-size: 26px;
   font-weight: 800;
-  color: var(--momo-text-strong);
+  color: var(--momo-page-ink, var(--momo-text-primary));
+  line-height: var(--momo-line-height-tight);
   letter-spacing: 0;
 }
 
@@ -40,16 +45,16 @@
 
 .daily-hero__subtitle {
   margin: 4px 0 0;
-  color: var(--momo-text-muted);
-  font-size: 0.86rem;
+  color: var(--momo-text-secondary);
+  font-size: var(--momo-text-body);
 }
 
 .daily-hero__subtitle code {
   padding: 2px 6px;
-  background: color-mix(in srgb, var(--momo-page-accent) 12%, transparent);
+  background: var(--momo-page-accent-soft);
   border-radius: 4px;
-  color: var(--momo-tag-mahogany);
-  font-size: 0.85em;
+  color: var(--momo-page-accent-dark);
+  font-size: var(--momo-text-meta);
 }
 
 .daily-hero__controls {
@@ -61,16 +66,16 @@
 }
 
 .daily-hero__label {
-  font-size: 0.78rem;
-  color: var(--momo-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
+  font-size: var(--momo-text-label);
+  color: var(--momo-text-secondary);
+  font-weight: 600;
+  letter-spacing: 0;
 }
 
 .daily-hero__controls .form-select {
   border: 1px solid var(--momo-border-strong);
-  background: var(--momo-surface);
-  color: var(--momo-text-strong);
+  background: var(--momo-bg-surface);
+  color: var(--momo-text-primary);
   font-weight: 600;
 }
 
@@ -91,8 +96,8 @@
 
 /* ---------- Empty / Error ---------- */
 .empty-state {
-  background: color-mix(in srgb, var(--momo-tag-honey) 14%, var(--momo-surface));
-  border: 1px solid color-mix(in srgb, var(--momo-tag-honey) 40%, var(--momo-border-strong));
+  background: var(--momo-warning-bg);
+  border: 1px solid var(--momo-warning-border);
   border-radius: 8px;
   padding: 2.4rem 2rem;
   text-align: center;
@@ -100,29 +105,29 @@
 
 .empty-state__icon {
   font-size: 2.4rem;
-  color: var(--momo-tag-honey);
+  color: var(--momo-warning-text);
   margin-bottom: 0.8rem;
 }
 
 .empty-state__title {
-  color: var(--momo-text-strong);
+  color: var(--momo-text-primary);
   font-weight: 700;
   margin-bottom: 0.4rem;
 }
 
 .empty-state__hint {
-  color: var(--momo-text-muted);
+  color: var(--momo-text-secondary);
   margin: 0;
 }
 
 .empty-state a {
-  color: var(--momo-tag-mahogany);
+  color: var(--momo-danger-text);
   font-weight: 700;
 }
 
 /* ---------- Calendar ---------- */
 .daily-calendar {
-  background: var(--momo-surface-raised);
+  background: var(--momo-bg-elevated);
   border: 1px solid var(--momo-border-strong);
   border-radius: 8px;
   padding: 12px;
@@ -136,7 +141,7 @@
   gap: 12px;
   margin-bottom: 10px;
   padding-bottom: 10px;
-  border-bottom: 1px solid var(--momo-border-subtle);
+  border-bottom: 1px solid var(--momo-border-light);
 }
 
 .daily-calendar__title {
@@ -144,10 +149,10 @@
   display: flex;
   align-items: center;
   gap: 0.6rem;
-  font-family: var(--momo-font-display);
-  font-size: 1rem;
+  font-family: var(--momo-font-family);
+  font-size: var(--momo-text-title);
   font-weight: 700;
-  color: var(--momo-text-strong);
+  color: var(--momo-page-ink, var(--momo-text-primary));
   cursor: pointer;
   transition: color 180ms ease;
 }
@@ -169,8 +174,8 @@
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
-  background: var(--momo-surface);
-  color: var(--momo-text-strong);
+  background: var(--momo-bg-surface);
+  color: var(--momo-text-primary);
   border: 1px solid var(--momo-border-strong);
   border-radius: 6px;
   padding: 6px 10px;
@@ -181,7 +186,7 @@
 }
 
 .btn-month:hover {
-  background: color-mix(in srgb, var(--momo-page-accent) 10%, var(--momo-surface));
+  background: var(--momo-page-accent-soft);
   border-color: var(--momo-page-accent);
   color: var(--momo-page-accent-dark);
 }
@@ -190,21 +195,21 @@
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 0;
-  border-top: 1px solid var(--momo-border-subtle);
-  border-left: 1px solid var(--momo-border-subtle);
+  border-top: 1px solid var(--momo-border-light);
+  border-left: 1px solid var(--momo-border-light);
 }
 
 .daily-calendar__weekday {
   text-align: center;
-  font-size: 0.72rem;
+  font-size: var(--momo-text-label);
   font-weight: 700;
-  color: var(--momo-text-muted);
+  color: var(--momo-text-secondary);
   padding: 8px 6px;
   text-transform: uppercase;
   letter-spacing: 0;
-  background: var(--momo-surface);
-  border-right: 1px solid var(--momo-border-subtle);
-  border-bottom: 1px solid var(--momo-border-subtle);
+  background: var(--momo-bg-surface);
+  border-right: 1px solid var(--momo-border-light);
+  border-bottom: 1px solid var(--momo-border-light);
 }
 
 /* ---- 行事曆方格 ---- */
@@ -213,24 +218,24 @@
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto auto;
   gap: 5px;
-  background: var(--momo-surface);
+  background: var(--momo-bg-surface);
   border: 0;
-  border-right: 1px solid var(--momo-border-subtle);
-  border-bottom: 1px solid var(--momo-border-subtle);
+  border-right: 1px solid var(--momo-border-light);
+  border-bottom: 1px solid var(--momo-border-light);
   border-radius: 0;
   padding: 10px;
-  min-height: 132px;
+  min-height: 124px;
   cursor: default;
   transition: background 160ms ease, box-shadow 160ms ease;
 }
 
 .cal-day.has-data {
   cursor: pointer;
-  background: var(--momo-surface-raised);
+  background: var(--momo-bg-elevated);
 }
 
 .cal-day.has-data:hover {
-  background: color-mix(in srgb, var(--momo-page-accent) 7%, var(--momo-surface-raised));
+  background: color-mix(in srgb, var(--momo-page-accent) 7%, var(--momo-bg-elevated));
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--momo-page-accent) 45%, transparent);
 }
 
@@ -240,21 +245,21 @@
 }
 
 .cal-day.is-weekend:not(.has-data) {
-  background: color-mix(in srgb, var(--momo-text-strong) 4%, var(--momo-surface));
+  background: color-mix(in srgb, var(--momo-text-primary) 4%, var(--momo-bg-surface));
 }
 
 .cal-day.is-holiday {
-  border-color: color-mix(in srgb, var(--momo-tag-rust) 35%, var(--momo-border-strong));
-  background: color-mix(in srgb, var(--momo-tag-rust) 8%, var(--momo-surface));
+  border-color: var(--momo-tag-rust-border);
+  background: var(--momo-tag-rust-bg);
 }
 
 .cal-day.is-holiday .cal-day__num {
-  color: var(--momo-tag-rust);
+  color: var(--momo-tag-rust-text);
 }
 
 .cal-day.is-selected {
-  border-color: var(--momo-border-subtle) !important;
-  background: color-mix(in srgb, var(--momo-page-accent) 12%, var(--momo-surface)) !important;
+  border-color: var(--momo-border-light) !important;
+  background: color-mix(in srgb, var(--momo-page-accent) 12%, var(--momo-bg-surface)) !important;
   box-shadow: inset 0 0 0 2px var(--momo-page-accent) !important;
 }
 
@@ -266,9 +271,9 @@
   width: 20px;
   height: 20px;
   background: var(--momo-page-accent);
-  border: 1px solid var(--momo-surface);
+  border: 1px solid var(--momo-bg-surface);
   border-radius: 6px;
-  color: var(--momo-surface);
+  color: var(--momo-bg-surface);
   display: grid;
   place-items: center;
   font-size: 0.7rem;
@@ -289,15 +294,15 @@
 .cal-day__num {
   font-size: 1.08rem;
   font-weight: 800;
-  color: var(--momo-text-strong);
+  color: var(--momo-text-primary);
   font-family: var(--momo-font-display);
 }
 
 .cal-day__holiday {
   font-size: 0.65rem;
   font-weight: 700;
-  color: var(--momo-tag-rust);
-  background: color-mix(in srgb, var(--momo-tag-rust) 14%, transparent);
+  color: var(--momo-tag-rust-text);
+  background: var(--momo-tag-rust-bg);
   padding: 1px 5px;
   border-radius: 3px;
   white-space: nowrap;
@@ -312,7 +317,7 @@
   border-radius: 6px;
   font-size: 0.66rem;
   font-weight: 700;
-  letter-spacing: 0.02em;
+  letter-spacing: 0;
   display: inline-flex;
   align-items: center;
   gap: 3px;
@@ -320,18 +325,21 @@
 }
 
 .cal-day.dod-up .cal-day__badge {
-  background: var(--momo-tag-rust);
-  color: var(--momo-surface);
+  background: var(--momo-tag-rust-bg);
+  color: var(--momo-tag-rust-text);
+  border: 1px solid var(--momo-tag-rust-border);
 }
 
 .cal-day.dod-down .cal-day__badge {
-  background: var(--momo-tag-olive);
-  color: var(--momo-surface);
+  background: var(--momo-tag-olive-bg);
+  color: var(--momo-tag-olive-text);
+  border: 1px solid var(--momo-tag-olive-border);
 }
 
 .cal-day.dod-flat .cal-day__badge {
-  background: color-mix(in srgb, var(--momo-text-muted) 30%, var(--momo-surface));
-  color: var(--momo-text-strong);
+  background: var(--momo-tag-muted-bg);
+  color: var(--momo-tag-muted-text);
+  border: 1px solid var(--momo-tag-muted-border);
 }
 
 .cal-day__metric {
@@ -342,15 +350,15 @@
 }
 
 .cal-day__metric-label {
-  color: var(--momo-text-muted);
-  font-size: 0.64rem;
+  color: var(--momo-text-secondary);
+  font-size: var(--momo-text-label);
   font-weight: 700;
 }
 
 .cal-day__metric strong {
-  color: var(--momo-text-strong);
+  color: var(--momo-text-primary);
   font-family: var(--momo-font-mono, ui-monospace, monospace);
-  font-size: 0.92rem;
+  font-size: var(--momo-text-body-sm);
   font-weight: 800;
   line-height: 1.15;
 }
@@ -360,7 +368,7 @@
   align-items: baseline;
   gap: 5px;
   padding-top: 4px;
-  border-top: 1px dashed var(--momo-border-subtle);
+  border-top: 1px dashed var(--momo-border-light);
 }
 
 .cal-day__metric--sub strong,
@@ -369,7 +377,7 @@
 }
 
 .cal-day__metric--sub span:last-child {
-  color: var(--momo-text-muted);
+  color: var(--momo-text-secondary);
   font-family: var(--momo-font-mono, ui-monospace, monospace);
 }
 
@@ -384,9 +392,9 @@
   max-width: 100%;
   padding: 2px 5px;
   overflow: hidden;
-  color: var(--momo-text-muted);
-  background: color-mix(in srgb, var(--momo-text-strong) 4%, var(--momo-surface));
-  border: 1px solid var(--momo-border-subtle);
+  color: var(--momo-text-secondary);
+  background: var(--momo-bg-paper);
+  border: 1px solid var(--momo-border-light);
   border-radius: 4px;
   font-family: var(--momo-font-mono, ui-monospace, monospace);
   font-size: 0.64rem;
@@ -401,9 +409,9 @@
 
 .daily-mobile-day,
 .daily-mobile-empty {
-  color: var(--momo-text-strong);
-  background: var(--momo-surface);
-  border: 1px solid var(--momo-border-subtle);
+  color: var(--momo-text-primary);
+  background: var(--momo-bg-surface);
+  border: 1px solid var(--momo-border-light);
   border-radius: 8px;
 }
 
@@ -416,9 +424,9 @@
 }
 
 .daily-mobile-day:hover {
-  color: var(--momo-text-strong);
+  color: var(--momo-text-primary);
   border-color: var(--momo-page-accent);
-  background: color-mix(in srgb, var(--momo-page-accent) 6%, var(--momo-surface));
+  background: color-mix(in srgb, var(--momo-page-accent) 6%, var(--momo-bg-surface));
 }
 
 .daily-mobile-day.is-selected {
@@ -434,7 +442,7 @@
 }
 
 .daily-mobile-day__date strong {
-  color: var(--momo-text-strong);
+  color: var(--momo-text-primary);
   font-family: var(--momo-font-display);
   font-size: 1.25rem;
   font-weight: 800;
@@ -443,7 +451,7 @@
 
 .daily-mobile-day__date span {
   overflow: hidden;
-  color: var(--momo-text-muted);
+  color: var(--momo-text-secondary);
   font-size: 0.76rem;
   font-weight: 700;
   text-overflow: ellipsis;
@@ -463,19 +471,21 @@
 }
 
 .daily-mobile-day__trend.dod-up {
-  color: var(--momo-surface);
-  background: var(--momo-tag-rust);
+  color: var(--momo-tag-rust-text);
+  background: var(--momo-tag-rust-bg);
+  border: 1px solid var(--momo-tag-rust-border);
 }
 
 .daily-mobile-day__trend.dod-down {
-  color: var(--momo-surface);
-  background: var(--momo-tag-olive);
+  color: var(--momo-tag-olive-text);
+  background: var(--momo-tag-olive-bg);
+  border: 1px solid var(--momo-tag-olive-border);
 }
 
 .daily-mobile-day__trend.dod-flat {
-  color: var(--momo-text-strong);
-  background: color-mix(in srgb, var(--momo-text-muted) 24%, var(--momo-surface));
-  border: 1px solid var(--momo-border-subtle);
+  color: var(--momo-tag-muted-text);
+  background: var(--momo-tag-muted-bg);
+  border: 1px solid var(--momo-tag-muted-border);
 }
 
 .daily-mobile-day__metric {
@@ -487,7 +497,7 @@
 
 .daily-mobile-day__metric span,
 .daily-mobile-day__metric em {
-  color: var(--momo-text-muted);
+  color: var(--momo-text-secondary);
   font-size: 0.68rem;
   font-style: normal;
   font-weight: 700;
@@ -495,7 +505,7 @@
 
 .daily-mobile-day__metric strong {
   overflow: hidden;
-  color: var(--momo-text-strong);
+  color: var(--momo-text-primary);
   font-family: var(--momo-font-mono, ui-monospace, monospace);
   font-size: 0.95rem;
   font-weight: 800;
@@ -514,9 +524,9 @@
   max-width: 100%;
   padding: 3px 6px;
   overflow: hidden;
-  color: var(--momo-text-muted);
-  background: color-mix(in srgb, var(--momo-text-strong) 4%, var(--momo-surface));
-  border: 1px solid var(--momo-border-subtle);
+  color: var(--momo-text-secondary);
+  background: var(--momo-bg-paper);
+  border: 1px solid var(--momo-border-light);
   border-radius: 4px;
   font-family: var(--momo-font-mono, ui-monospace, monospace);
   font-size: 0.66rem;
@@ -527,8 +537,8 @@
 
 .daily-mobile-empty {
   padding: 14px;
-  color: var(--momo-text-muted);
-  font-size: 0.82rem;
+  color: var(--momo-text-secondary);
+  font-size: var(--momo-text-body-sm);
   text-align: center;
 }
 
@@ -562,8 +572,8 @@
     margin-top: 0.4rem;
     padding: 0.4rem;
     font-size: 0.7rem;
-    color: var(--momo-text-muted);
-    background: color-mix(in srgb, var(--momo-text-strong) 5%, var(--momo-surface));
+    color: var(--momo-text-secondary);
+    background: color-mix(in srgb, var(--momo-text-primary) 5%, var(--momo-bg-surface));
     border-radius: 4px;
   }
 }
@@ -603,36 +613,37 @@
   gap: 0.35rem;
   padding: 0.3rem 0.7rem;
   border-radius: 6px;
-  font-size: 0.78rem;
+  font-size: var(--momo-text-body-sm);
   font-weight: 700;
-  letter-spacing: 0.02em;
+  letter-spacing: 0;
 }
 
 .badge-mode--month {
   background: var(--momo-page-accent);
-  color: var(--momo-surface);
+  color: var(--momo-page-inverse);
 }
 
 .badge-mode--single {
-  background: var(--momo-tag-honey);
-  color: var(--momo-surface);
+  background: var(--momo-warning-bg);
+  color: var(--momo-warning-text);
+  border: 1px solid var(--momo-warning-border);
 }
 
 .badge-mode--ghost {
-  background: color-mix(in srgb, var(--momo-text-strong) 8%, var(--momo-surface));
-  color: var(--momo-text-strong);
+  background: var(--momo-bg-paper);
+  color: var(--momo-text-primary);
   border: 1px solid var(--momo-border-strong);
 }
 
 .daily-mode-banner__hint {
-  color: var(--momo-text-muted);
-  font-size: 0.85rem;
+  color: var(--momo-text-secondary);
+  font-size: var(--momo-text-body-sm);
 }
 
 .daily-mode-banner__link {
-  color: var(--momo-tag-mahogany);
+  color: var(--momo-page-accent-dark);
   font-weight: 700;
-  font-size: 0.85rem;
+  font-size: var(--momo-text-body-sm);
   text-decoration: none;
   border-bottom: 1px dashed currentColor;
 }
@@ -657,18 +668,18 @@
   position: relative;
   overflow: hidden;
   border-radius: 8px;
-  background: var(--momo-surface);
+  background: var(--momo-bg-surface);
   border: 1px solid var(--momo-border-strong);
-  box-shadow: var(--momo-shadow-soft);
-  transition: transform 200ms ease, box-shadow 200ms ease;
+  box-shadow: var(--momo-shadow-md);
+  transition: background 160ms ease, border-color 160ms ease;
   height: 100%;
   /* 左側 4px accent 條 */
   border-left-width: 4px;
 }
 
 .kpi-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 24px color-mix(in srgb, var(--momo-text-strong) 12%, transparent);
+  border-color: var(--momo-page-accent-line);
+  background: var(--momo-bg-elevated);
 }
 
 .kpi-card__body {
@@ -678,20 +689,19 @@
 }
 
 .kpi-card__label {
-  font-size: 0.78rem;
+  font-size: var(--momo-text-label);
   font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--momo-text-muted);
+  letter-spacing: 0;
+  color: var(--momo-text-secondary);
   margin-bottom: 0.4rem;
 }
 
 .kpi-card__value {
   font-family: var(--momo-font-mono, ui-monospace, monospace);
-  font-size: 1.38rem;
+  font-size: var(--momo-text-headline);
   font-weight: 800;
   letter-spacing: 0;
-  color: var(--momo-text-strong);
+  color: var(--momo-page-ink, var(--momo-text-primary));
   line-height: 1.1;
   margin-bottom: 0.6rem;
 }
@@ -706,7 +716,7 @@
   position: absolute;
   right: -12px;
   bottom: -12px;
-  font-size: 5rem;
+  font-size: 4.6rem;
   color: currentColor;
   opacity: 0.08;
   transform: rotate(-12deg);
@@ -716,17 +726,17 @@
 /* variants：每張卡片用對應 token 著色，左 border + label + icon 同色 */
 .kpi--revenue { border-left-color: var(--momo-page-accent); color: var(--momo-page-accent); }
 .kpi--cost    { border-left-color: var(--momo-tag-honey);   color: var(--momo-tag-honey); }
-.kpi--profit  { border-left-color: var(--momo-tag-olive);   color: var(--momo-tag-olive); }
-.kpi--sku     { border-left-color: var(--momo-tag-sand);    color: var(--momo-tag-sand); }
-.kpi--aov     { border-left-color: var(--momo-tag-mahogany);color: var(--momo-tag-mahogany); }
-.kpi--qty     { border-left-color: var(--momo-tag-clay);    color: var(--momo-tag-clay); }
+.kpi--profit  { border-left-color: var(--momo-tag-olive-text);   color: var(--momo-tag-olive-text); }
+.kpi--sku     { border-left-color: var(--momo-tag-muted-text);   color: var(--momo-tag-muted-text); }
+.kpi--aov     { border-left-color: var(--momo-danger-text);      color: var(--momo-danger-text); }
+.kpi--qty     { border-left-color: var(--momo-tag-clay-text);    color: var(--momo-tag-clay-text); }
 
 .kpi-card .kpi-card__label,
 .kpi-card .kpi-card__value {
   color: inherit;
 }
-.kpi-card__label { color: var(--momo-text-muted); }
-.kpi-card__value { color: var(--momo-text-strong); }
+.kpi-card__label { color: var(--momo-text-secondary); }
+.kpi-card__value { color: var(--momo-page-ink, var(--momo-text-primary)); }
 
 /* DoD/WoW pill */
 .kpi-delta {
@@ -735,31 +745,31 @@
   gap: 0.3rem;
   padding: 0.25rem 0.55rem;
   border-radius: 6px;
-  font-size: 0.75rem;
+  font-size: var(--momo-text-meta);
   font-weight: 700;
   font-family: var(--momo-font-mono, ui-monospace, monospace);
-  background: color-mix(in srgb, var(--momo-text-strong) 5%, var(--momo-surface));
-  border: 1px solid var(--momo-border-subtle);
+  background: var(--momo-bg-paper);
+  border: 1px solid var(--momo-border-light);
 }
 
 .kpi-delta__label {
   font-family: var(--momo-font-display);
-  font-size: 0.68rem;
-  letter-spacing: 0.06em;
-  color: var(--momo-text-muted);
+  font-size: var(--momo-text-label-tiny);
+  letter-spacing: 0;
+  color: var(--momo-text-secondary);
   text-transform: uppercase;
 }
 
 .kpi-delta.is-up {
-  color: var(--momo-tag-rust);
-  border-color: color-mix(in srgb, var(--momo-tag-rust) 30%, var(--momo-border-subtle));
-  background: color-mix(in srgb, var(--momo-tag-rust) 8%, var(--momo-surface));
+  color: var(--momo-tag-rust-text);
+  border-color: var(--momo-tag-rust-border);
+  background: var(--momo-tag-rust-bg);
 }
 
 .kpi-delta.is-down {
-  color: var(--momo-tag-olive);
-  border-color: color-mix(in srgb, var(--momo-tag-olive) 30%, var(--momo-border-subtle));
-  background: color-mix(in srgb, var(--momo-tag-olive) 8%, var(--momo-surface));
+  color: var(--momo-tag-olive-text);
+  border-color: var(--momo-tag-olive-border);
+  background: var(--momo-tag-olive-bg);
 }
 
 .kpi-tag {
@@ -767,32 +777,32 @@
   align-items: center;
   padding: 0.2rem 0.55rem;
   border-radius: 5px;
-  font-size: 0.72rem;
+  font-size: var(--momo-text-meta);
   font-weight: 700;
-  background: color-mix(in srgb, var(--momo-text-strong) 6%, var(--momo-surface));
-  color: var(--momo-text-strong);
-  border: 1px solid var(--momo-border-subtle);
+  background: var(--momo-bg-paper);
+  color: var(--momo-text-primary);
+  border: 1px solid var(--momo-border-light);
 }
 
 .kpi-tag--ghost {
   background: transparent;
-  color: var(--momo-text-muted);
+  color: var(--momo-text-secondary);
 }
 
 /* ---------- Chart cards ---------- */
 .chart-card {
   border-radius: 8px;
   border: 1px solid var(--momo-border-strong);
-  background: var(--momo-surface);
-  box-shadow: var(--momo-shadow-soft);
+  background: var(--momo-bg-surface);
+  box-shadow: var(--momo-shadow-md);
   height: 100%;
 }
 
 .chart-card .card-header {
-  background: color-mix(in srgb, var(--momo-page-accent) 6%, var(--momo-surface));
-  border-bottom: 1px solid var(--momo-border-subtle);
+  background: color-mix(in srgb, var(--momo-page-accent) 6%, var(--momo-bg-surface));
+  border-bottom: 1px solid var(--momo-border-light);
   font-weight: 700;
-  color: var(--momo-text-strong);
+  color: var(--momo-text-primary);
   padding: 0.85rem 1.2rem;
   font-size: 0.98rem;
   border-radius: 8px 8px 0 0;
@@ -810,9 +820,9 @@
 }
 
 .btn-export {
-  background: var(--momo-tag-olive);
-  color: var(--momo-surface);
-  border: 1px solid color-mix(in srgb, var(--momo-tag-olive) 80%, var(--momo-text-strong));
+  background: var(--momo-success-bg);
+  color: var(--momo-success-text);
+  border: 1px solid var(--momo-success-border);
   border-radius: 6px;
   padding: 0.35rem 0.85rem;
   font-weight: 600;
@@ -823,8 +833,8 @@
 }
 
 .btn-export:hover {
-  background: color-mix(in srgb, var(--momo-tag-olive) 90%, var(--momo-text-strong));
-  color: var(--momo-surface);
+  background: color-mix(in srgb, var(--momo-success) 14%, var(--momo-bg-surface));
+  color: var(--momo-success-text);
 }
 
 .chart-container {
@@ -842,9 +852,9 @@
 #top10ChartContainer { min-width: 400px; }
 
 .chart-mobile-hint {
-  background: color-mix(in srgb, var(--momo-page-accent) 10%, var(--momo-surface));
-  border: 1px solid color-mix(in srgb, var(--momo-page-accent) 25%, var(--momo-border-subtle));
-  color: var(--momo-tag-mahogany);
+  background: var(--momo-page-accent-soft);
+  border: 1px solid var(--momo-page-accent-line);
+  color: var(--momo-page-accent-dark);
   padding: 0.4rem 0.7rem;
   border-radius: 6px;
   font-size: 0.8rem;
@@ -854,19 +864,19 @@
 .chart-empty {
   text-align: center;
   padding: 3rem 1rem;
-  color: var(--momo-text-muted);
+  color: var(--momo-text-secondary);
 }
 
 .chart-empty i {
   font-size: 1.8rem;
   margin-bottom: 0.6rem;
   display: block;
-  color: color-mix(in srgb, var(--momo-text-muted) 60%, transparent);
+  color: color-mix(in srgb, var(--momo-text-secondary) 60%, transparent);
 }
 
 .marketing-subhead {
   font-weight: 700;
-  color: var(--momo-text-strong);
+  color: var(--momo-text-primary);
   margin-bottom: 0.8rem;
   font-size: 0.95rem;
 }
@@ -883,7 +893,7 @@
 }
 
 #categoryTable thead {
-  background: color-mix(in srgb, var(--momo-page-accent) 14%, var(--momo-surface));
+  background: color-mix(in srgb, var(--momo-page-accent) 10%, var(--momo-bg-surface));
 }
 
 #categoryTable thead th {
@@ -891,9 +901,9 @@
   padding: 0.85rem 0.9rem;
   font-size: 0.78rem;
   font-weight: 800;
-  letter-spacing: 0.08em;
+  letter-spacing: 0;
   text-transform: uppercase;
-  color: var(--momo-text-strong);
+  color: var(--momo-text-primary);
   border-bottom: 2px solid var(--momo-page-accent);
 }
 
@@ -902,14 +912,14 @@
 }
 
 #categoryTable tbody tr:hover {
-  background: color-mix(in srgb, var(--momo-page-accent) 6%, var(--momo-surface));
+  background: color-mix(in srgb, var(--momo-page-accent) 6%, var(--momo-bg-surface));
 }
 
 #categoryTable tbody td {
   padding: 0.7rem 0.9rem;
   vertical-align: middle;
-  color: var(--momo-text-strong);
-  border-bottom: 1px solid var(--momo-border-subtle);
+  color: var(--momo-text-primary);
+  border-bottom: 1px solid var(--momo-border-light);
 }
 
 #categoryTable td.num {