diff --git a/src/assets/global.css b/src/assets/global.css
index f055081..20e203f 100644
--- a/src/assets/global.css
+++ b/src/assets/global.css
@@ -15,6 +15,15 @@
   --c-brand: #2db96d;
   --c-brand-light: #eaf8f0;
   --c-brand-dark: #1e9a55;
+  /** 渐变 / 描边用辅色（与主色同系，业务页请用 var 引用） */
+  --c-brand-soft: #86efac;
+  --c-brand-mid: #22c55e;
+  --c-brand-accent: #16a34a;
+  --c-brand-glow: #3dd68c;
+  --c-brand-bright: #32c877;
+  /** 浅底上的深绿标题字（Tailwind green-800 / green-700 系） */
+  --c-brand-heading: #166534;
+  --c-brand-heading-2: #15803d;
   --c-orange: #f5913e;
   --c-orange-light: #fef5ec;
   --c-red: #e5534b;
@@ -63,50 +72,50 @@ page {
   display: block;
   font-size: 13px;
   font-weight: 600;
-  color: #666660;
+  color: var(--c-text-2);
   margin-bottom: 6px;
 }
 .app-form-input {
-  background: #f5f5f2;
+  background: var(--c-surface-alt);
   border: 1.5px solid transparent;
   border-radius: 12px;
   padding: 11px 14px;
   font-size: 15px;
-  color: #1a1a1a;
+  color: var(--c-text);
   width: 100%;
   box-sizing: border-box;
   min-height: 44px;
 }
 .app-form-input:focus {
-  border-color: #2db96d;
-  background: #ffffff;
+  border-color: var(--c-brand);
+  background: var(--c-surface);
 }
 .app-form-picker {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.app-form-placeholder { color: #bbbbb5; }
+.app-form-placeholder { color: var(--c-text-4); }
 .app-form-arrow {
-  color: #bbbbb5;
+  color: var(--c-text-4);
   font-size: 18px;
   font-weight: 300;
 }
 .app-form-textarea {
-  background: #f5f5f2;
+  background: var(--c-surface-alt);
   border: 1.5px solid transparent;
   border-radius: 12px;
   padding: 12px 14px;
   font-size: 14px;
-  color: #1a1a1a;
+  color: var(--c-text);
   width: 100%;
   box-sizing: border-box;
   min-height: 100px;
   line-height: 1.6;
 }
 .app-form-textarea:focus {
-  border-color: #2db96d;
-  background: #fff;
+  border-color: var(--c-brand);
+  background: var(--c-surface);
 }
 
 /* ---- 按钮 ----
@@ -127,8 +136,8 @@ page {
 .van-button:active { opacity: 0.85; transform: scale(0.98); }
 .van-button--primary,
 button.van-button--primary {
-  background-color: #2db96d !important;
-  background: #2db96d !important;
+  background-color: var(--c-brand) !important;
+  background: var(--c-brand) !important;
   border: none !important;
   color: #ffffff !important;
   box-shadow: none !important;
@@ -147,8 +156,8 @@ button.van-button--primary {
 }
 .van-button--small.van-button--primary,
 button.van-button--small.van-button--primary {
-  background-color: #2db96d !important;
-  background: #2db96d !important;
+  background-color: var(--c-brand) !important;
+  background: var(--c-brand) !important;
   color: #ffffff !important;
   border: none !important;
 }
@@ -195,15 +204,15 @@ button.app-btn-sm {
 }
 .app-btn-primary,
 button.app-btn-primary {
-  background: linear-gradient(135deg, #32c877 0%, #2db96d 100%) !important;
+  background: linear-gradient(135deg, var(--c-brand-bright) 0%, var(--c-brand) 100%) !important;
   color: #ffffff !important;
   box-shadow: 0 4px 12px rgba(45, 185, 109, 0.28);
 }
 .app-btn-outline,
 button.app-btn-outline {
   background: transparent !important;
-  color: #999993 !important;
-  border: 1.5px solid #ebebea !important;
+  color: var(--c-text-3) !important;
+  border: 1.5px solid var(--c-border) !important;
 }
 .app-btn-danger-outline,
 button.app-btn-danger-outline {
@@ -279,14 +288,14 @@ button.app-btn-code {
 }
 .app-btn-code--neutral,
 button.app-btn-code--neutral {
-  background: #f5f5f2 !important;
-  color: #2db96d !important;
+  background: var(--c-surface-alt) !important;
+  color: var(--c-brand) !important;
   border: none !important;
 }
 .app-btn-code--brand,
 button.app-btn-code--brand {
   background: #f0fcf5 !important;
-  color: #2db96d !important;
+  color: var(--c-brand) !important;
   border: 1.5px solid #c0f0d8 !important;
 }
 .app-btn-code--neutral[disabled],
@@ -450,8 +459,8 @@ button.app-btn-code--neutral[disabled] {
 }
 .nav-back:active { opacity: 0.7; }
 .nav-gradient {
-  background-color: #2db96d !important;
-  background: #2db96d !important;
+  background-color: var(--c-brand) !important;
+  background: var(--c-brand) !important;
 }
 
 /* ---- 空状态 ---- */
diff --git a/src/components/AppPageState.vue b/src/components/AppPageState.vue
index 76b83e2..c361e3f 100644
--- a/src/components/AppPageState.vue
+++ b/src/components/AppPageState.vue
@@ -69,7 +69,7 @@ defineEmits(['retry'])
   width: 36px;
   height: 36px;
   border: 3px solid #e8edf4;
-  border-top-color: #2db96d;
+  border-top-color: var(--c-brand);
   border-radius: 50%;
   animation: aps-spin 0.75s linear infinite;
 }
@@ -116,7 +116,7 @@ defineEmits(['retry'])
   font-size: 15px;
   font-weight: 600;
   color: #fff;
-  background: linear-gradient(135deg, #3dd68c, #2db96d);
+  background: linear-gradient(135deg, var(--c-brand-glow), var(--c-brand));
   border-radius: 999px;
   border: none;
 }
diff --git a/src/components/TabBar.vue b/src/components/TabBar.vue
index 1ca0669..d44dc26 100644
--- a/src/components/TabBar.vue
+++ b/src/components/TabBar.vue
@@ -8,7 +8,7 @@
       @click="switchTab(tab.key)"
     >
       <view class="tabbar-icon-wrap">
-        <AppIcon :name="tab.icon" :size="20" :color="props.currentPage === tab.key ? '#2db96d' : '#999993'" />
+        <AppIcon :name="tab.icon" :size="20" :color="props.currentPage === tab.key ? 'var(--c-brand)' : 'var(--c-text-3)'" />
       </view>
       <text class="tabbar-label">{{ tab.label }}</text>
     </view>
@@ -58,11 +58,11 @@ function switchTab(pageName) {
   align-items: center;
   justify-content: center;
   gap: 2px;
-  color: #999993;
+  color: var(--c-text-3);
   transition: color 0.2s;
 }
 .tabbar-item.active {
-  color: #2db96d;
+  color: var(--c-brand);
 }
 .tabbar-icon-wrap {
   width: 24px;
diff --git a/src/components/report/BeforeAfterSlider.vue b/src/components/report/BeforeAfterSlider.vue
index f3e6782..38ac9d4 100644
--- a/src/components/report/BeforeAfterSlider.vue
+++ b/src/components/report/BeforeAfterSlider.vue
@@ -194,7 +194,7 @@ function onMouseDown(e) {
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.95);
   box-shadow: 0 2px 12px rgba(15, 23, 42, 0.2);
-  border: 2px solid #16a34a;
+  border: 2px solid var(--c-brand-accent);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -204,7 +204,7 @@ function onMouseDown(e) {
 .ba-arrows {
   font-size: 14px;
   font-weight: 700;
-  color: #15803d;
+  color: var(--c-brand-heading-2);
   letter-spacing: -2px;
 }
 .ba-tags {
diff --git a/src/components/report/DuringMediaGrid.vue b/src/components/report/DuringMediaGrid.vue
index 7bc9809..5d15b0e 100644
--- a/src/components/report/DuringMediaGrid.vue
+++ b/src/components/report/DuringMediaGrid.vue
@@ -154,7 +154,7 @@ function closeVideo() {
   text-align: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.95);
-  color: #16a34a;
+  color: var(--c-brand-accent);
   font-size: 14px;
   padding-left: 3px;
 }
diff --git a/src/components/report/ReminderCard.vue b/src/components/report/ReminderCard.vue
index 1785575..83c7d8d 100644
--- a/src/components/report/ReminderCard.vue
+++ b/src/components/report/ReminderCard.vue
@@ -245,9 +245,15 @@ async function onSubmit() {
     if (res && res.code === 200 && res.data && res.data.ok) {
       savedDate.value = res.data.remindDate || suggestion.value.remindDate
       wechatBound.value = !!res.data.wechatBound
-      repeatSubmit.value = !!res.data.repeatSubmit
+      const dup =
+        !!res.data.repeatSubmit ||
+        !!res.data.alreadySubmitted
+      repeatSubmit.value = dup
       submitted.value = true
       persistToStorage()
+      if (dup && res.message) {
+        uni.showToast({ title: res.message, icon: 'none', duration: 2200 })
+      }
     } else {
       errorMsg.value = (res && res.message) || '提交失败，请稍后再试'
     }
@@ -267,7 +273,7 @@ onMounted(async () => {
 <style scoped>
 .reminder-card {
   margin: 4px 16px 16px;
-  background: linear-gradient(140deg, #ecfdf5 0%, #ffffff 60%);
+  background: linear-gradient(140deg, var(--c-brand-light) 0%, #ffffff 60%);
   border: 1px solid #bbf7d0;
   border-radius: 16px;
   padding: 18px 16px 16px;
@@ -279,7 +285,7 @@ onMounted(async () => {
   align-items: center;
   gap: 6px;
   font-size: 14px;
-  color: #15803d;
+  color: var(--c-brand-heading-2);
 }
 .rc-title-emoji { font-size: 16px; }
 .rc-title-text { font-weight: 600; }
@@ -288,20 +294,20 @@ onMounted(async () => {
   margin-top: 10px;
   padding: 14px 16px;
   background: #ffffff;
-  border: 1px dashed #86efac;
+  border: 1px dashed var(--c-brand-soft);
   border-radius: 12px;
   text-align: center;
 }
 .rc-date-main {
   font-size: 22px;
   font-weight: 700;
-  color: #166534;
+  color: var(--c-brand-heading);
   letter-spacing: 0.5px;
 }
 .rc-date-sub {
   margin-top: 4px;
   font-size: 12px;
-  color: #16a34a;
+  color: var(--c-brand-accent);
 }
 
 .rc-form { margin-top: 14px; }
@@ -345,8 +351,8 @@ onMounted(async () => {
   transition: all .15s;
 }
 .rc-checkbox.checked {
-  background: #16a34a;
-  border-color: #16a34a;
+  background: var(--c-brand-accent);
+  border-color: var(--c-brand-accent);
 }
 .rc-check {
   color: #fff;
@@ -368,7 +374,7 @@ onMounted(async () => {
   line-height: 44px;
   border: none;
   border-radius: 10px;
-  background: linear-gradient(135deg, #22c55e, #16a34a);
+  background: linear-gradient(135deg, var(--c-brand-mid), var(--c-brand-accent));
   color: #fff;
   font-size: 15px;
   font-weight: 600;
@@ -397,7 +403,7 @@ onMounted(async () => {
   line-height: 44px;
   margin: 0 auto 10px;
   border-radius: 50%;
-  background: #16a34a;
+  background: var(--c-brand-accent);
   color: #fff;
   font-size: 24px;
   font-weight: 700;
@@ -405,13 +411,13 @@ onMounted(async () => {
 .rc-success-title {
   font-size: 16px;
   font-weight: 700;
-  color: #166534;
+  color: var(--c-brand-heading);
 }
 .rc-success-date {
   margin-top: 6px;
   font-size: 18px;
   font-weight: 700;
-  color: #15803d;
+  color: var(--c-brand-heading-2);
 }
 .rc-success-desc {
   margin-top: 8px;
@@ -426,8 +432,8 @@ onMounted(async () => {
   text-align: left;
 }
 .rc-bind--ok {
-  background: #ecfdf5;
-  border: 1px solid #86efac;
+  background: var(--c-brand-light);
+  border: 1px solid var(--c-brand-soft);
 }
 .rc-bind--hint {
   background: #f8fafc;
@@ -437,7 +443,7 @@ onMounted(async () => {
   display: block;
   font-size: 13px;
   font-weight: 700;
-  color: #166534;
+  color: var(--c-brand-heading);
   margin-bottom: 6px;
 }
 .rc-bind--hint .rc-bind-title {
@@ -456,9 +462,9 @@ onMounted(async () => {
   height: 42px;
   line-height: 42px;
   border-radius: 10px;
-  border: 1px solid #16a34a;
+  border: 1px solid var(--c-brand-accent);
   background: #ffffff;
-  color: #15803d;
+  color: var(--c-brand-heading-2);
   font-size: 14px;
   font-weight: 600;
 }
@@ -487,9 +493,9 @@ onMounted(async () => {
   height: 40px;
   line-height: 40px;
   font-size: 14px;
-  color: #15803d;
+  color: var(--c-brand-heading-2);
   background: #fff;
-  border: 1px solid #86efac;
+  border: 1px solid var(--c-brand-soft);
   border-radius: 10px;
 }
 .rc-change-phone-hint {
diff --git a/src/components/report/ReportHighlightBlock.vue b/src/components/report/ReportHighlightBlock.vue
index df6d24d..97fdfee 100644
--- a/src/components/report/ReportHighlightBlock.vue
+++ b/src/components/report/ReportHighlightBlock.vue
@@ -352,7 +352,7 @@ onUnmounted(() => {
 <style scoped>
 .highlight-card {
   margin: 4px 16px 16px;
-  background: linear-gradient(140deg, #ecfdf5 0%, #ffffff 55%);
+  background: linear-gradient(140deg, var(--c-brand-light) 0%, #ffffff 55%);
   border: 1px solid #bbf7d0;
   border-radius: 16px;
   padding: 18px 16px 16px;
@@ -368,11 +368,11 @@ onUnmounted(() => {
 .highlight-title {
   font-size: 16px;
   font-weight: 700;
-  color: #166534;
+  color: var(--c-brand-heading);
 }
 .highlight-badge {
   font-size: 11px;
-  color: #15803d;
+  color: var(--c-brand-heading-2);
   background: rgba(45, 185, 109, 0.15);
   padding: 2px 8px;
   border-radius: 999px;
@@ -384,7 +384,7 @@ onUnmounted(() => {
   display: block;
 }
 .highlight-em {
-  color: #166534;
+  color: var(--c-brand-heading);
   font-weight: 600;
 }
 .highlight-desc-ops {
@@ -410,14 +410,14 @@ onUnmounted(() => {
 }
 .highlight-status--busy {
   background: #f0fdf4;
-  border: 1px solid #86efac;
-  color: #166534;
+  border: 1px solid var(--c-brand-soft);
+  color: var(--c-brand-heading);
 }
 .highlight-processing-hint {
   display: block;
   margin-top: 6px;
   font-size: 11px;
-  color: #15803d;
+  color: var(--c-brand-heading-2);
   opacity: 0.9;
 }
 .highlight-status--err {
@@ -446,7 +446,7 @@ onUnmounted(() => {
   margin-top: 12px;
 }
 .highlight-btn--album {
-  background: linear-gradient(135deg, #22c55e, #16a34a);
+  background: linear-gradient(135deg, var(--c-brand-mid), var(--c-brand-accent));
   color: #fff;
 }
 .highlight-mp-hint {
@@ -471,7 +471,7 @@ onUnmounted(() => {
 .highlight-mode-title {
   font-size: 13px;
   font-weight: 700;
-  color: #166534;
+  color: var(--c-brand-heading);
 }
 .highlight-mode-sub {
   font-size: 11px;
@@ -495,9 +495,9 @@ onUnmounted(() => {
   color: #475569;
 }
 .highlight-mode-item.is-on {
-  border-color: #16a34a;
-  background: #ecfdf5;
-  color: #166534;
+  border-color: var(--c-brand-accent);
+  background: var(--c-brand-light);
+  color: var(--c-brand-heading);
 }
 .highlight-player {
   width: 100%;
diff --git a/src/components/report/ReportShareModal.vue b/src/components/report/ReportShareModal.vue
index d552207..3935a81 100644
--- a/src/components/report/ReportShareModal.vue
+++ b/src/components/report/ReportShareModal.vue
@@ -285,13 +285,13 @@ function previewReport() {
 .rsm-template-text {
   flex: 1;
   font-size: 13px;
-  color: #166534;
+  color: var(--c-brand-heading);
   line-height: 1.45;
 }
 .rsm-template-action {
   flex-shrink: 0;
   font-size: 12px;
-  color: #15803d;
+  color: var(--c-brand-heading-2);
   font-weight: 600;
 }
 .rsm-qr-wrap {
@@ -331,7 +331,7 @@ function previewReport() {
   border: none;
 }
 .rsm-btn--primary {
-  background: linear-gradient(135deg, #22c55e, #16a34a);
+  background: linear-gradient(135deg, var(--c-brand-mid), var(--c-brand-accent));
   color: #fff;
 }
 .rsm-btn--ghost {
diff --git a/src/components/report/TestimonialModal.vue b/src/components/report/TestimonialModal.vue
index 13f1d64..300587a 100644
--- a/src/components/report/TestimonialModal.vue
+++ b/src/components/report/TestimonialModal.vue
@@ -141,7 +141,7 @@ defineExpose({ close })
   color: #475569;
 }
 .tm-btn-primary {
-  background: linear-gradient(135deg, #22c55e, #16a34a);
+  background: linear-gradient(135deg, var(--c-brand-mid), var(--c-brand-accent));
   color: #fff;
 }
 .tm-btn[disabled] {
diff --git a/src/constants/designTokens.js b/src/constants/designTokens.js
new file mode 100644
index 0000000..b8fa560
--- /dev/null
+++ b/src/constants/designTokens.js
@@ -0,0 +1,6 @@
+/**
+ * Canvas / AppIcon(data URI SVG) 等无法用 var() 的场景。
+ * 色值须与 `assets/global.css` 中 `--c-brand-heading*` 保持一致。
+ */
+export const BRAND_HEADING = '#166534'
+export const BRAND_HEADING_2 = '#15803d'
diff --git a/src/pages/appointment/AppointmentDetail.vue b/src/pages/appointment/AppointmentDetail.vue
index a82be28..4cef46c 100644
--- a/src/pages/appointment/AppointmentDetail.vue
+++ b/src/pages/appointment/AppointmentDetail.vue
@@ -203,7 +203,7 @@ onLoad((options) => {
   padding: 2px 8px;
   border-radius: 10px;
   background: #e8f7ef;
-  color: #2db96d;
+  color: var(--c-brand);
   font-weight: 500;
 }
 .tag-success {
diff --git a/src/pages/appointment/CustAppointmentCreate.vue b/src/pages/appointment/CustAppointmentCreate.vue
index 6f18459..edf1a45 100644
--- a/src/pages/appointment/CustAppointmentCreate.vue
+++ b/src/pages/appointment/CustAppointmentCreate.vue
@@ -719,7 +719,7 @@ onMounted(async () => {
 .c-hero-sub {
   display: block;
   font-size: 14px;
-  color: #999993;
+  color: var(--c-text-3);
   margin-top: 4px;
 }
 .c-form-card {
@@ -748,7 +748,7 @@ onMounted(async () => {
 .pet-switch-btn {
   width: 68px !important;
   padding: 0 !important;
-  color: #2db96d !important;
+  color: var(--c-brand) !important;
   flex-shrink: 0;
 }
 .c-store-hint {
@@ -778,7 +778,7 @@ onMounted(async () => {
   flex-shrink: 0;
   font-size: 14px;
   font-weight: 600;
-  color: #2db96d;
+  color: var(--c-brand);
   padding: 6px 0 6px 8px;
 }
 .c-store-collapse {
@@ -786,7 +786,7 @@ onMounted(async () => {
   margin-top: 8px;
   font-size: 13px;
   font-weight: 600;
-  color: #2db96d;
+  color: var(--c-brand);
 }
 .c-try-tomorrow {
   margin-top: 12px;
diff --git a/src/pages/home/Home.vue b/src/pages/home/Home.vue
index 56d442c..41bed8c 100644
--- a/src/pages/home/Home.vue
+++ b/src/pages/home/Home.vue
@@ -56,7 +56,7 @@
 
       <view v-if="listMode === 'tab' && currentStatus === 'done'" class="done-filter-row">
         <text class="done-filter-label">包含已取消</text>
-        <switch :checked="includeCancelledInDone" color="#2db96d" @change="onIncludeCancelledChange" />
+        <switch :checked="includeCancelledInDone" color="var(--c-brand)" @change="onIncludeCancelledChange" />
       </view>
 
       <AppPageState
@@ -151,7 +151,7 @@
 
       <view v-if="listMode === 'tab' && currentStatus === 'done'" class="done-filter-row">
         <text class="done-filter-label">包含已取消</text>
-        <switch :checked="includeCancelledInDone" color="#2db96d" @change="onIncludeCancelledChange" />
+        <switch :checked="includeCancelledInDone" color="var(--c-brand)" @change="onIncludeCancelledChange" />
       </view>
 
       <!-- 列表 -->
@@ -735,7 +735,7 @@ onShow(() => {
   width: 56px;
   height: 56px;
   border-radius: 28px;
-  background: #2db96d;
+  background: var(--c-brand);
   box-shadow: 0 6px 20px rgba(45, 185, 109, 0.42);
   display: flex;
   align-items: center;
@@ -867,7 +867,7 @@ onShow(() => {
   display: block;
   margin-top: 6px;
   font-size: 11px;
-  color: #999993;
+  color: var(--c-text-3);
   line-height: 1.4;
 }
 .c-time-row { display: flex; gap: 10px; }
@@ -893,7 +893,7 @@ onShow(() => {
   border: 1.5px solid transparent;
 }
 .dash-card--active {
-  border-color: #2db96d;
+  border-color: var(--c-brand);
   background: linear-gradient(145deg, #f0fdf4 0%, #ffffff 55%);
 }
 .dash-card-value {
@@ -924,20 +924,20 @@ onShow(() => {
   justify-content: space-between;
   margin: 0 16px 8px;
   padding: 10px 12px;
-  background: #ecfdf5;
+  background: var(--c-brand-light);
   border-radius: 12px;
   border: 1px solid #bbf7d0;
 }
 .list-mode-back {
   font-size: 15px;
   font-weight: 600;
-  color: #15803d;
+  color: var(--c-brand-heading-2);
   padding: 4px 0;
 }
 .list-mode-title {
   font-size: 15px;
   font-weight: 700;
-  color: #166534;
+  color: var(--c-brand-heading);
 }
 .list-mode-placeholder {
   width: 56px;
@@ -976,7 +976,7 @@ onShow(() => {
 .tab-text {
   font-size: 14px;
   font-weight: 600;
-  color: #999993;
+  color: var(--c-text-3);
 }
 .tab-active .tab-text { color: #fff; }
 .tab-badge {
@@ -996,7 +996,7 @@ onShow(() => {
   box-sizing: border-box;
 }
 .tab-badge--doing {
-  background: #2db96d;
+  background: var(--c-brand);
 }
 
 /* B端列表（底部留白，避免最后一条被悬浮钮挡住） */
@@ -1025,7 +1025,7 @@ onShow(() => {
 .order-svc {
   display: block;
   font-size: 12px;
-  color: #999993;
+  color: var(--c-text-3);
   margin-top: 2px;
 }
 .order-status {
@@ -1036,8 +1036,8 @@ onShow(() => {
   flex-shrink: 0;
 }
 .status-new { background: #fef5ec; color: #f5913e; }
-.status-doing { background: #eaf8f0; color: #2db96d; }
-.status-done { background: #f5f5f2; color: #999993; }
+.status-doing { background: var(--c-brand-light); color: var(--c-brand); }
+.status-done { background: #f5f5f2; color: var(--c-text-3); }
 .status-cancel { background: #f5f5f2; color: #bbbbb5; }
 
 .order-time {
diff --git a/src/pages/login/Login.vue b/src/pages/login/Login.vue
index 95e31cc..059fbd0 100644
--- a/src/pages/login/Login.vue
+++ b/src/pages/login/Login.vue
@@ -479,7 +479,7 @@ onUnmounted(() => {
 .brand-sub {
   display: block;
   font-size: 13px;
-  color: #999993;
+  color: var(--c-text-3);
   margin-top: 6px;
 }
 
@@ -515,7 +515,7 @@ onUnmounted(() => {
   min-height: 48px;
   line-height: 48px;
 }
-.field:focus { border-color: #2db96d; background: #fff; }
+.field:focus { border-color: var(--c-brand); background: #fff; }
 
 /* 验证码行 */
 .sms-row {
@@ -547,11 +547,11 @@ onUnmounted(() => {
 }
 .wx-verified-hint {
   font-size: 13px;
-  color: #2db96d;
+  color: var(--c-brand);
   font-weight: 600;
   margin-bottom: 12px;
   padding: 8px 12px;
-  background: #eaf8f0;
+  background: var(--c-brand-light);
   border-radius: 10px;
 }
 
@@ -579,7 +579,7 @@ onUnmounted(() => {
 }
 .link-btn {
   font-size: 14px;
-  color: #2db96d;
+  color: var(--c-brand);
   font-weight: 600;
   padding: 8px 4px;
 }
@@ -596,17 +596,17 @@ onUnmounted(() => {
   text-align: center;
   margin-top: 20px;
   font-size: 14px;
-  color: #999993;
+  color: var(--c-text-3);
   padding: 8px;
 }
 
 /* 提示框 */
 .hint-box {
-  background: #eaf8f0;
+  background: var(--c-brand-light);
   border-radius: 10px;
   padding: 10px 14px;
   font-size: 13px;
-  color: #2db96d;
+  color: var(--c-brand);
   margin-bottom: 14px;
 }
 </style>
diff --git a/src/pages/mine/Leads.vue b/src/pages/mine/Leads.vue
index 12577a4..73ee24b 100644
--- a/src/pages/mine/Leads.vue
+++ b/src/pages/mine/Leads.vue
@@ -302,7 +302,7 @@ onShow(() => {
   line-height: 1.6;
 }
 .hero-count {
-  color: #16a34a;
+  color: var(--c-brand-accent);
   font-weight: 700;
   font-size: 18px;
   margin: 0 2px;
@@ -327,8 +327,8 @@ onShow(() => {
   font-weight: 600;
 }
 .tab-item.active {
-  background: #ecfdf5;
-  color: #16a34a;
+  background: var(--c-brand-light);
+  color: var(--c-brand-accent);
 }
 
 .list { padding: 0 16px; }
@@ -361,7 +361,7 @@ onShow(() => {
   color: #2563eb;
   font-weight: 600;
 }
-.lead-status.sent { background: #ecfdf5; color: #16a34a; }
+.lead-status.sent { background: var(--c-brand-light); color: var(--c-brand-accent); }
 .lead-status.unsub { background: #f3f4f6; color: #94a3b8; }
 
 .lead-body { padding: 8px 0; border-top: 1px solid #f1f5f9; }
@@ -400,7 +400,7 @@ onShow(() => {
   font-weight: 600;
 }
 .lead-btn.primary {
-  background: linear-gradient(135deg, #22c55e, #16a34a);
+  background: linear-gradient(135deg, var(--c-brand-mid), var(--c-brand-accent));
   color: #fff;
 }
 .lead-btn.ghost {
diff --git a/src/pages/mine/Mine.vue b/src/pages/mine/Mine.vue
index 63d1e78..cae1a16 100644
--- a/src/pages/mine/Mine.vue
+++ b/src/pages/mine/Mine.vue
@@ -140,7 +140,7 @@ const initials = computed(() => {
 
 const avatarBg = computed(() => {
   if (userInfo.avatar) return {}
-  const colors = ['#f5913e', '#2db96d', '#5090d0', '#e06050', '#8b6914']
+  const colors = ['#f5913e', 'var(--c-brand)', '#5090d0', '#e06050', '#8b6914']
   const idx = (userInfo.name?.charCodeAt(0) || 0) % colors.length
   return { background: colors[idx] }
 })
@@ -207,7 +207,7 @@ const logout = () => {
 }
 .user-phone {
   font-size: 13px;
-  color: #999993;
+  color: var(--c-text-3);
   margin-top: 2px;
 }
 .role-tag {
@@ -215,8 +215,8 @@ const logout = () => {
   border-radius: 8px;
   font-size: 12px;
   font-weight: 700;
-  background: #eaf8f0;
-  color: #2db96d;
+  background: var(--c-brand-light);
+  color: var(--c-brand);
   flex-shrink: 0;
 }
 
diff --git a/src/pages/mine/MyOrders.vue b/src/pages/mine/MyOrders.vue
index 71e3d3f..331e89a 100644
--- a/src/pages/mine/MyOrders.vue
+++ b/src/pages/mine/MyOrders.vue
@@ -206,7 +206,7 @@ onMounted(() => fetchOrders())
   border-radius: 14px;
   background: linear-gradient(135deg, #f3fff7 0%, #ecfbf3 100%);
 }
-.hero-title { font-size: 16px; font-weight: 700; color: #166534; }
+.hero-title { font-size: 16px; font-weight: 700; color: var(--c-brand-heading); }
 .hero-sub { margin-top: 4px; font-size: 12px; color: #4b5563; line-height: 1.45; }
 .orders-nav {
   padding: 14px 16px;
diff --git a/src/pages/mine/MyPets.vue b/src/pages/mine/MyPets.vue
index eb2ae50..82f852d 100644
--- a/src/pages/mine/MyPets.vue
+++ b/src/pages/mine/MyPets.vue
@@ -411,7 +411,7 @@ onShow(() => loadPets())
   border: 1px solid #dcefe3;
   background: linear-gradient(135deg, #f3fff7 0%, #ecfbf3 100%);
 }
-.hero-title { font-size: 16px; font-weight: 700; color: #166534; display: block; }
+.hero-title { font-size: 16px; font-weight: 700; color: var(--c-brand-heading); display: block; }
 .hero-sub {
   display: block;
   margin-top: 6px;
@@ -482,7 +482,7 @@ onShow(() => loadPets())
 }
 .pet-avatar-ph {
   background: #e8f5ef;
-  color: #2db96d;
+  color: var(--c-brand);
   font-size: 22px;
   font-weight: 700;
   display: flex;
@@ -491,14 +491,14 @@ onShow(() => loadPets())
 }
 .pet-info { flex: 1; min-width: 0; }
 .pet-name { font-size: 16px; font-weight: 700; color: #1a1a1a; display: block; }
-.pet-meta { font-size: 12px; color: #999993; display: block; margin-top: 4px; }
+.pet-meta { font-size: 12px; color: var(--c-text-3); display: block; margin-top: 4px; }
 .pet-remark { font-size: 12px; color: #666660; display: block; margin-top: 6px; }
 .pet-history-link {
   display: block;
   margin-top: 8px;
   font-size: 13px;
   font-weight: 600;
-  color: #2db96d;
+  color: var(--c-brand);
 }
 
 .fab-pet {
@@ -508,7 +508,7 @@ onShow(() => loadPets())
   width: 56px;
   height: 56px;
   border-radius: 28px;
-  background: #2db96d;
+  background: var(--c-brand);
   box-shadow: 0 6px 20px rgba(45, 185, 109, 0.42);
   display: flex;
   align-items: center;
@@ -562,5 +562,5 @@ onShow(() => loadPets())
   overflow: hidden;
 }
 .avatar-prev { width: 100%; height: 100%; }
-.avatar-tap-text { font-size: 12px; color: #999993; }
+.avatar-tap-text { font-size: 12px; color: var(--c-text-3); }
 </style>
diff --git a/src/pages/mine/MyReports.vue b/src/pages/mine/MyReports.vue
index 784fe77..439be89 100644
--- a/src/pages/mine/MyReports.vue
+++ b/src/pages/mine/MyReports.vue
@@ -152,9 +152,9 @@ onShow(() => loadReports())
   border-radius: 14px;
   background: linear-gradient(135deg, #f3fff7 0%, #ecfbf3 100%);
 }
-.hero-title { font-size: 16px; font-weight: 700; color: #166534; }
+.hero-title { font-size: 16px; font-weight: 700; color: var(--c-brand-heading); }
 .hero-sub { margin-top: 4px; font-size: 12px; color: #4b5563; line-height: 1.45; }
-.hero-count { font-weight: 700; color: #2db96d; }
+.hero-count { font-weight: 700; color: var(--c-brand); }
 .placeholder-icon {
   width: 36px;
   height: 36px;
@@ -245,7 +245,7 @@ onShow(() => loadReports())
   width: 56px;
   height: 56px;
   border-radius: 28px;
-  background: #2db96d;
+  background: var(--c-brand);
   box-shadow: 0 6px 20px rgba(45, 185, 109, 0.42);
   display: flex;
   align-items: center;
diff --git a/src/pages/mine/PetHistory.vue b/src/pages/mine/PetHistory.vue
index 559f62e..e50137c 100644
--- a/src/pages/mine/PetHistory.vue
+++ b/src/pages/mine/PetHistory.vue
@@ -196,7 +196,7 @@ onLoad((options) => {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background: #2db96d;
+  background: var(--c-brand);
   margin-top: 8px;
 }
 .ph-line {
@@ -237,8 +237,8 @@ onLoad((options) => {
   color: #f5913e;
 }
 .ph-tag--doing {
-  background: #ecfdf5;
-  color: #16a34a;
+  background: var(--c-brand-light);
+  color: var(--c-brand-accent);
 }
 .ph-tag--done {
   background: #f1f5f9;
@@ -267,6 +267,6 @@ onLoad((options) => {
 .ph-link {
   font-size: 14px;
   font-weight: 600;
-  color: #2db96d;
+  color: var(--c-brand);
 }
 </style>
diff --git a/src/pages/mine/Profile.vue b/src/pages/mine/Profile.vue
index 4467f61..e413df5 100644
--- a/src/pages/mine/Profile.vue
+++ b/src/pages/mine/Profile.vue
@@ -178,7 +178,7 @@ const initials = computed(() => {
   return userInfo.value.name.slice(0, 1).toUpperCase()
 })
 
-const COLORS = ['#f5913e', '#2db96d', '#8b6914', '#e06050', '#5090d0']
+const COLORS = ['#f5913e', 'var(--c-brand)', '#8b6914', '#e06050', '#5090d0']
 const avatarBg = computed(() => {
   const idx = (userInfo.value.name?.charCodeAt(0) || 0) % COLORS.length
   return { background: COLORS[idx] }
@@ -402,7 +402,7 @@ onUnmounted(() => {
 .role-pill.hero-role.role-staff,
 .role-pill.role-staff {
   background: #ecfdf3;
-  color: #166534;
+  color: var(--c-brand-heading);
 }
 .role-pill.hero-role.role-customer,
 .role-pill.role-pill-compact.role-customer {
diff --git a/src/pages/mine/Schedule.vue b/src/pages/mine/Schedule.vue
index 3a83ec1..65ed7d0 100644
--- a/src/pages/mine/Schedule.vue
+++ b/src/pages/mine/Schedule.vue
@@ -13,7 +13,7 @@
     <view v-else class="sched-body">
       <view class="sched-hero">
         <view class="sched-hero-icon" aria-hidden="true">
-          <AppIcon name="calendar" :size="22" color="#15803d" />
+          <AppIcon name="calendar" :size="22" :color="BRAND_HEADING_2" />
         </view>
         <view class="sched-hero-text">
           <text class="sched-hero-title">时段一览</text>
@@ -68,6 +68,7 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
+import { BRAND_HEADING_2 } from '../../constants/designTokens.js'
 import AppIcon from '../../components/AppIcon.vue'
 import { getScheduleDay, createScheduleBlock, deleteScheduleBlock } from '../../api/index.js'
 import { getStoreSession, getUserSession } from '../../utils/session.js'
@@ -337,7 +338,7 @@ onMounted(() => {
   text-align: center;
   font-size: 22px;
   font-weight: 700;
-  color: #2db96d;
+  color: var(--c-brand);
   line-height: 40px;
 }
 .sched-date-mid {
@@ -431,7 +432,7 @@ onMounted(() => {
 }
 .sched-empty {
   font-size: 14px;
-  color: #2db96d;
+  color: var(--c-brand);
   font-weight: 600;
 }
 .sched-empty--past {
diff --git a/src/pages/mine/Staff.vue b/src/pages/mine/Staff.vue
index 7124aaa..8ee6321 100644
--- a/src/pages/mine/Staff.vue
+++ b/src/pages/mine/Staff.vue
@@ -140,7 +140,7 @@ const swipedId = ref(null)
 const touchStartX = ref(0)
 const touchCurrentX = ref(0)
 
-const COLORS = ['#f5913e', '#2db96d', '#8b6914', '#e06050', '#5090d0', '#9b59b6']
+const COLORS = ['#f5913e', 'var(--c-brand)', '#8b6914', '#e06050', '#5090d0', '#9b59b6']
 const avatarStyle = (s) => {
   if (s.avatar) return { background: 'transparent' }
   const idx = (s.name?.charCodeAt(0) || 0) % COLORS.length
@@ -251,7 +251,7 @@ onMounted(() => loadStaff())
   display: block;
   font-size: 12px;
   font-weight: 700;
-  color: #999993;
+  color: var(--c-text-3);
   letter-spacing: 0.5px;
   margin-bottom: 10px;
 }
@@ -281,8 +281,8 @@ onMounted(() => loadStaff())
   line-height: 36px;
   font-size: 14px;
   font-weight: 600;
-  color: #2db96d;
-  background: #eaf8f0;
+  color: var(--c-brand);
+  background: var(--c-brand-light);
   border: none;
   border-radius: 10px;
   box-sizing: border-box;
diff --git a/src/pages/mine/Store.vue b/src/pages/mine/Store.vue
index 2e4347a..e767e36 100644
--- a/src/pages/mine/Store.vue
+++ b/src/pages/mine/Store.vue
@@ -9,7 +9,7 @@
     <view class="store-body">
       <view class="store-hero">
         <view class="store-hero-icon" aria-hidden="true">
-          <AppIcon name="store" :size="22" color="#15803d" />
+          <AppIcon name="store" :size="22" :color="BRAND_HEADING_2" />
         </view>
         <view class="store-hero-text">
           <text class="store-hero-title">门店资料</text>
@@ -117,6 +117,7 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue'
+import { BRAND_HEADING_2 } from '../../constants/designTokens.js'
 import AppIcon from '../../components/AppIcon.vue'
 import { navigateTo } from '../../utils/globalState.js'
 import { updateStore, getStoreDetail } from '../../api/index.js'
@@ -339,7 +340,7 @@ onMounted(async () => {
   overflow: hidden;
 }
 .store-card--hours {
-  border-color: #86efac;
+  border-color: var(--c-brand-soft);
   box-shadow: 0 8px 22px rgba(34, 197, 94, 0.12);
 }
 .store-card--after-basic {
@@ -421,9 +422,9 @@ onMounted(async () => {
   padding: 0 14px;
   min-height: 44px;
   border-radius: 12px;
-  border: 1px solid #2db96d;
+  border: 1px solid var(--c-brand);
   background: #f0fdf4;
-  color: #15803d;
+  color: var(--c-brand-heading-2);
   font-size: 14px;
   font-weight: 600;
   line-height: 44px;
@@ -439,7 +440,7 @@ onMounted(async () => {
 .geo-hint {
   margin-top: 8px;
   font-size: 12px;
-  color: #2db96d;
+  color: var(--c-brand);
   line-height: 1.4;
 }
 
diff --git a/src/pages/report-view/reportView.vue b/src/pages/report-view/reportView.vue
index bcbf99b..762f739 100644
--- a/src/pages/report-view/reportView.vue
+++ b/src/pages/report-view/reportView.vue
@@ -733,7 +733,7 @@ onMounted(() => loadReport())
 
 /* 品牌栏（含 Logo，与 H5 对齐） */
 .brand-bar {
-  background: #2db96d;
+  background: var(--c-brand);
   padding: 12px 16px 14px;
   border-bottom-left-radius: 14px;
   border-bottom-right-radius: 14px;
@@ -815,7 +815,7 @@ onMounted(() => loadReport())
   border: 3px solid rgba(45, 185, 109, 0.35);
 }
 .staff-avatar-mp--ph {
-  background: linear-gradient(145deg, #86efac, #22c55e);
+  background: linear-gradient(145deg, var(--c-brand-soft), var(--c-brand-mid));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -902,7 +902,7 @@ onMounted(() => loadReport())
 }
 .photo-group-count {
   font-size: 12px;
-  color: #999993;
+  color: var(--c-text-3);
 }
 .photo-grid-extra {
   display: grid;
@@ -966,7 +966,7 @@ onMounted(() => loadReport())
 .info-title {
   font-size: 13px;
   font-weight: 700;
-  color: #999993;
+  color: var(--c-text-3);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 14px;
@@ -982,7 +982,7 @@ onMounted(() => loadReport())
 }
 .info-key {
   font-size: 14px;
-  color: #999993;
+  color: var(--c-text-3);
 }
 .info-val {
   font-size: 14px;
@@ -1001,7 +1001,7 @@ onMounted(() => loadReport())
   display: block;
   font-size: 13px;
   font-weight: 700;
-  color: #999993;
+  color: var(--c-text-3);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 8px;
diff --git a/src/pages/report/Report.vue b/src/pages/report/Report.vue
index 34569d3..cfec8d4 100644
--- a/src/pages/report/Report.vue
+++ b/src/pages/report/Report.vue
@@ -845,7 +845,7 @@ const onRemarkBlur = () => {
 .section-toggle {
   font-size: 13px;
   font-weight: 600;
-  color: #2db96d;
+  color: var(--c-brand);
 }
 .section-label {
   font-size: 16px;
@@ -855,7 +855,7 @@ const onRemarkBlur = () => {
 .section-hint {
   display: block;
   font-size: 12px;
-  color: #999993;
+  color: var(--c-text-3);
   margin-top: 2px;
 }
 
@@ -900,7 +900,7 @@ const onRemarkBlur = () => {
   border-radius: 50%;
 }
 .dot-before { background: #f5913e; }
-.dot-after { background: #2db96d; }
+.dot-after { background: var(--c-brand); }
 
 .photo-grid {
   display: flex;
@@ -980,7 +980,7 @@ const onRemarkBlur = () => {
   justify-content: center;
   gap: 6px;
   font-size: 14px;
-  color: #999993;
+  color: var(--c-text-3);
 }
 .during-add-btn:active {
   background: #f0f0ee;
@@ -1064,7 +1064,7 @@ const onRemarkBlur = () => {
   width: 28px;
   height: 28px;
   border: 2.5px solid #ebebea;
-  border-top-color: #2db96d;
+  border-top-color: var(--c-brand);
   border-radius: 50%;
   animation: spin 0.7s linear infinite;
 }
diff --git a/src/pages/unsubscribe/Unsubscribe.vue b/src/pages/unsubscribe/Unsubscribe.vue
index 06687c3..f7ab206 100644
--- a/src/pages/unsubscribe/Unsubscribe.vue
+++ b/src/pages/unsubscribe/Unsubscribe.vue
@@ -115,7 +115,7 @@ onMounted(doUnsubscribe)
 .unsub-spinner {
   width: 32px; height: 32px;
   border: 3px solid #e2e8f0;
-  border-top-color: #16a34a;
+  border-top-color: var(--c-brand-accent);
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   margin-bottom: 12px;
@@ -129,7 +129,7 @@ onMounted(doUnsubscribe)
   justify-content: center;
   margin-bottom: 14px;
 }
-.unsub-icon.success { background: #16a34a; }
+.unsub-icon.success { background: var(--c-brand-accent); }
 .unsub-icon.error { background: #f59e0b; }
 .unsub-icon-char { color: #fff; font-size: 28px; font-weight: 700; line-height: 1; }
 .unsub-title {
@@ -152,7 +152,7 @@ onMounted(doUnsubscribe)
   padding: 0 24px;
   border: none;
   border-radius: 8px;
-  background: #16a34a;
+  background: var(--c-brand-accent);
   color: #fff;
   font-size: 14px;
 }
diff --git a/src/utils/reportPosterDraw.js b/src/utils/reportPosterDraw.js
index b39d8a3..0a1f85b 100644
--- a/src/utils/reportPosterDraw.js
+++ b/src/utils/reportPosterDraw.js
@@ -3,6 +3,8 @@
  * H5 / 小程序 canvas 2d 共用
  */
 
+import { BRAND_HEADING, BRAND_HEADING_2 } from '../constants/designTokens.js'
+
 export const POSTER_W = 750
 /** 兼容旧引用：实际高度请用 computePosterLogicalHeight */
 export const POSTER_H = 1180
@@ -228,12 +230,12 @@ export function drawReportPoster(ctx, data) {
   roundRect(ctx, cx - badgeR, cy - badgeR, badgeR * 2, badgeR * 2, badgeR)
   ctx.stroke()
 
-  ctx.fillStyle = '#15803d'
+  ctx.fillStyle = BRAND_HEADING_2
   ctx.font = `bold 20px ${FONT}`
   ctx.textAlign = 'center'
   ctx.fillText('✨', cx, cy - 2)
   ctx.font = `bold 12px ${FONT}`
-  ctx.fillStyle = '#166534'
+  ctx.fillStyle = BRAND_HEADING
   ctx.fillText('蜕变', cx, cy + 14)
 
   const tagW = 100
diff --git a/src/views/ReportView.vue b/src/views/ReportView.vue
index 8b62197..4005bfd 100644
--- a/src/views/ReportView.vue
+++ b/src/views/ReportView.vue
@@ -358,7 +358,7 @@ onMounted(() => loadReport())
 .report-h5-state { min-height: 50vh; }
 .report-content { max-width: 430px; margin: 0 auto; background: #f8fafc; min-height: 100vh; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06); }
 .brand-header {
-  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
+  background: linear-gradient(135deg, var(--c-brand-mid) 0%, var(--c-brand-accent) 100%);
   padding: 20px 20px 18px;
   text-align: center; color: #fff;
   border-radius: 0 0 16px 16px;
@@ -428,7 +428,7 @@ onMounted(() => loadReport())
   box-shadow: 0 4px 14px rgba(22, 163, 74, 0.15);
 }
 .staff-avatar--ph {
-  background: linear-gradient(145deg, #86efac, #22c55e);
+  background: linear-gradient(145deg, var(--c-brand-soft), var(--c-brand-mid));
   display: flex;
   align-items: center;
   justify-content: center;