refactor(beautify): A批二轮 高频色令牌化 (3979->1851处)

- uni.scss 新增 §17 补充令牌（Material + tailwind 灰阶补档）：
  \-blue-base/#2196F3, \-orange-base/#FF9800,
  \-text-gray-800/#1F2937, \-text-slate-700/#334155,
  \-fill-slate-50/#F8FAFC, \-fill-blue-ghost/#F5FAFE
- replace-hex-to-token.js 扩展 77 组第二轮等值映射（Material 状态色 / tailwind 灰阶 / 维度亮档 / 品牌深阶）
- 新增 scripts/analyze-hex-distribution.js 剩余色值分布分析工具
- 硬编码色 3979 -> 1851；P0 债务页 16 -> 5

债务曲线：8529 -> 3979 (A批首轮) -> 1851 (A批二轮)

cfc-frontend/components/ArticleBookshelf.vue

@@ -183,7 +183,7 @@ import { primaryPale } from '@/utils/brand-colors.js'
 }
 .bs-empty-text {
   font-size: 24rpx;
-  color: #9CA3AF;
+  color: $facade-text-gray-400;
 }
 
 /* ---- Skeleton ---- */
@@ -208,7 +208,7 @@ import { primaryPale } from '@/utils/brand-colors.js'
   height: 0;
   padding-top: 133.33%; /* 3:4 书封比例 */
   border-radius: 12rpx;
-  background: linear-gradient(180deg, #e8e8e8 0%, $facade-fill 50%, #e8e8e8 100%);
+  background: linear-gradient(180deg, $facade-fill-4 0%, $facade-fill 50%, $facade-fill-4 100%);
   background-size: 200% 100%;
   animation: skeleton-wave 1.4s ease-in-out infinite;
 }
@@ -216,7 +216,7 @@ import { primaryPale } from '@/utils/brand-colors.js'
   height: 24rpx;
   margin-top: 10rpx;
   border-radius: 6rpx;
-  background: linear-gradient(180deg, #e8e8e8 0%, $facade-fill 50%, #e8e8e8 100%);
+  background: linear-gradient(180deg, $facade-fill-4 0%, $facade-fill 50%, $facade-fill-4 100%);
   background-size: 200% 100%;
   animation: skeleton-wave 1.4s ease-in-out infinite;
 }

cfc-frontend/components/BadgeGrid.vue

@@ -44,13 +44,13 @@ export default {
   width: 80rpx;
   height: 80rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #FFD700, #FFA500);
+  background: linear-gradient(135deg, $accent-gold, #FFA500);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 8rpx;
 }
-.badge-icon-wrap--locked { background: #E2E8F0; }
+.badge-icon-wrap--locked { background: $uni-border-color-light; }
 .badge-icon { font-size: 36rpx; }
 .badge-name { font-size: 22rpx; color: $facade-text-strong; text-align: center; }
 </style>

cfc-frontend/components/BaseBadge.vue

@@ -40,11 +40,11 @@ export default {
 }
 .base-badge--success {
   background: rgba(34, 197, 94, 0.12);
-  color: var(--color-success, #22C55E);
+  color: var(--color-success, $status-success-2);
 }
 .base-badge--warning {
   background: rgba(245, 158, 11, 0.12);
-  color: var(--color-warning, #F59E0B);
+  color: var(--color-warning, $dim-wealth);
 }
 .base-badge--error {
   background: rgba(239, 68, 68, 0.12);
@@ -52,10 +52,10 @@ export default {
 }
 .base-badge--accent {
   background: rgba(14, 165, 233, 0.12);
-  color: var(--color-accent, #0EA5E9);
+  color: var(--color-accent, $uni-info);
 }
 .base-badge--muted {
   background: rgba(148, 163, 184, 0.12);
-  color: var(--muted, #94A3B8);
+  color: var(--muted, $app-text-subtle);
 }
 </style>

cfc-frontend/components/BaseLoading.vue

@@ -58,7 +58,7 @@ export default {
 
 .base-loading__text {
   font-size: 24rpx;
-  color: var(--muted, #94A3B8);
+  color: var(--muted, $app-text-subtle);
 }
 </style>
 

cfc-frontend/components/ConfigurableGuide.vue

@@ -139,7 +139,7 @@ export default {
 .cg-title {
   font-size: 36rpx;
   font-weight: 700;
-  color: #1E293B;
+  color: $uni-text-color;
   text-align: center;
   margin-bottom: 20rpx;
   display: block;
@@ -148,14 +148,14 @@ export default {
 .cg-title--intro { font-size: 32rpx; font-weight: 800; }
 .cg-desc {
   font-size: 28rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
   text-align: center;
   line-height: 1.6;
   display: block;
   padding: 0 16rpx;
 }
 .cg-dots { display: flex; align-items: center; justify-content: center; padding: 0 56rpx 32rpx; }
-.cg-dot { width: 14rpx; height: 14rpx; border-radius: 50%; background: #CBD5E1; margin: 0 8rpx; }
+.cg-dot { width: 14rpx; height: 14rpx; border-radius: 50%; background: $uni-border-color; margin: 0 8rpx; }
 .cg-dot--active { background: $brand-primary; transform: scale(1.3); }
 .cg-action { width: 100%; padding: 0 56rpx 48rpx; box-sizing: border-box; }
 .cg-btn {

cfc-frontend/components/DimensionActivities.vue

@@ -253,7 +253,7 @@ export default {
 .section-title {
   font-size: 32rpx;
   font-weight: 700;
-  color: #1E293B;
+  color: $uni-text-color;
   letter-spacing: 1rpx;
 }
 .section-more {
@@ -261,17 +261,17 @@ export default {
   flex-direction: row;
   align-items: center;
   padding: 8rpx 20rpx;
-  background: #F1F5F9;
+  background: $facade-fill-slate;
   border-radius: 24rpx;
 }
 .section-more-text {
   font-size: 24rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
   margin-right: 4rpx;
 }
 .section-more-arrow {
   font-size: 20rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
 }
 
 /* ===== 空状态 ===== */
@@ -287,7 +287,7 @@ export default {
 }
 .empty-tip {
   font-size: 26rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
 }
 
 /* ===== 活动轮播 ===== */
@@ -348,7 +348,7 @@ export default {
   width: 33.33%;
   height: 100%;
   flex-shrink: 0;
-  background: #F1F5F9;
+  background: $facade-fill-slate;
 }
 
 /* 右侧信息区 — 文字右对齐 */
@@ -399,7 +399,7 @@ export default {
 
 .meta-text {
   font-size: 24rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
 }
 
 .card-badges {
@@ -438,12 +438,12 @@ export default {
   font-size: 20rpx;
   padding: 2rpx 10rpx;
   border-radius: 8rpx;
-  background: #E8F5E9;
-  color: #2E7D32;
+  background: $mat-green-tint;
+  color: $mat-green-strong;
 }
 .card-status.status-upcoming {
-  background: #E3F2FD;
-  color: #1565C0;
+  background: $mat-blue-tint;
+  color: $mat-blue-strong;
 }
 .card-status.status-ended {
   background: $facade-fill-2;
@@ -464,6 +464,6 @@ export default {
 .card-price-free {
   font-size: 24rpx;
   font-weight: 600;
-  color: #22C55E;
+  color: $status-success-2;
 }
 </style>

cfc-frontend/components/DimensionArticles.vue

@@ -205,7 +205,7 @@ export default {
 }
 .article-summary {
   font-size: 24rpx;
-  color: #888;
+  color: $facade-text-faint;
   line-height: 1.5;
   display: block;
   margin-bottom: 20rpx;

cfc-frontend/components/DimensionTasks.vue

@@ -108,8 +108,8 @@ export default {
   background: #f9f9f9;
 }
 .task-check.checked {
-  background: #22C55E;
-  border-color: #22C55E;
+  background: $status-success-2;
+  border-color: $status-success-2;
 }
 .task-check-icon {
   font-size: 24rpx;
@@ -138,7 +138,7 @@ export default {
 }
 .task-points {
   font-size: 24rpx;
-  color: #22C55E;
+  color: $status-success-2;
   margin-right: 12rpx;
 }
 .task-penalty {

cfc-frontend/components/DimensionVisitorCard.vue

@@ -115,7 +115,7 @@ export default {
 .dvc-title {
   font-size: 30rpx;
   font-weight: 600;
-  color: #1f2937;
+  color: $facade-text-gray-800;
   display: block;
   line-height: 1.4;
 }
@@ -181,7 +181,7 @@ export default {
 .dvc-preview {
   margin-top: 24rpx;
   background: $app-surface;
-  border: 1rpx dashed #e5e7eb;
+  border: 1rpx dashed $facade-gray-200;
   border-radius: 20rpx;
   padding: 40rpx 28rpx;
   display: flex;

cfc-frontend/components/FamilyChallengeCard.vue

@@ -197,19 +197,19 @@ export default {
 .card-title {
   font-size: 26rpx;
   font-weight: 700;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 .card-status {
   font-size: 20rpx;
   padding: 2rpx 10rpx;
   border-radius: 999rpx;
 }
-.status-active { background: #DCFCE7; color: #16A34A; }
-.status-completed { background: #F1F5F9; color: #64748B; }
-.status-cancelled { background: #FEE2E2; color: #DC2626; }
+.status-active { background: $status-success-soft-2; color: $status-success-strong-2; }
+.status-completed { background: $facade-fill-slate; color: $uni-text-color-secondary; }
+.status-cancelled { background: $status-danger-soft; color: $status-danger-deep; }
 .card-desc {
   font-size: 22rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
   line-height: 1.4;
   margin-bottom: 8rpx;
   display: block;
@@ -217,7 +217,7 @@ export default {
 
 /* 待同意提示区 */
 .pending-section {
-  background: #FEF3C7;
+  background: $status-warning-soft;
   border-radius: 10rpx;
   padding: 10rpx 12rpx;
   margin-bottom: 6rpx;
@@ -241,13 +241,13 @@ export default {
   border-radius: 999rpx;
 }
 .member-rejected {
-  background: #FEE2E2;
-  color: #DC2626;
+  background: $status-danger-soft;
+  color: $status-danger-deep;
 }
 
 /* 目标区 */
 .target-section {
-  background: #F8FAFC;
+  background: $facade-fill-slate-50;
   border-radius: 10rpx;
   padding: 10rpx 12rpx;
   margin-bottom: 6rpx;
@@ -258,7 +258,7 @@ export default {
   align-items: center;
   margin-bottom: 6rpx;
 }
-.target-label { font-size: 22rpx; color: #475569; font-weight: 600; }
+.target-label { font-size: 22rpx; color: $facade-text-slate-deep; font-weight: 600; }
 .target-value { font-size: 26rpx; color: $status-success; font-weight: 700; }
 
 .card-progress {
@@ -270,13 +270,13 @@ export default {
 .progress-bar-bg {
   flex: 1;
   height: 10rpx;
-  background: #E2E8F0;
+  background: $uni-border-color-light;
   border-radius: 999rpx;
   overflow: hidden;
 }
 .progress-bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, $status-success, #34D399);
+  background: linear-gradient(90deg, $status-success, $status-success-light-3);
   border-radius: 999rpx;
   transition: width 0.5s ease;
 }
@@ -300,7 +300,7 @@ export default {
 }
 .member-name {
   font-size: 20rpx;
-  color: #475569;
+  color: $facade-text-slate-deep;
   width: 90rpx;
   overflow: hidden;
   white-space: nowrap;
@@ -309,18 +309,18 @@ export default {
 .member-bar-wrap { flex: 1; }
 .member-bar-bg {
   height: 8rpx;
-  background: #E2E8F0;
+  background: $uni-border-color-light;
   border-radius: 999rpx;
   overflow: hidden;
 }
 .member-bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, $dim-wisdom, #8B5CF6);
+  background: linear-gradient(90deg, $dim-wisdom, $facade-violet);
   border-radius: 999rpx;
 }
 .member-val {
   font-size: 18rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
   min-width: 80rpx;
   text-align: right;
 }
@@ -338,8 +338,8 @@ export default {
   margin-top: 6rpx;
   flex-wrap: wrap;
 }
-.detail-label { font-size: 20rpx; color: #94A3B8; }
-.detail-val { font-size: 20rpx; color: #334155; }
+.detail-label { font-size: 20rpx; color: $app-text-subtle; }
+.detail-val { font-size: 20rpx; color: $facade-text-slate-700; }
 .detail-val.reward { color: $brand-primary; font-weight: 600; }
 .detail-val.badge { color: $dim-wisdom; }
 
@@ -369,7 +369,7 @@ export default {
 }
 .respond-reject {
   background: $app-surface;
-  color: #DC2626;
+  color: $status-danger-deep;
   border: 2rpx solid #FCA5A5;
 }
 </style>

cfc-frontend/components/FamilyMemberCard.vue

@@ -127,7 +127,7 @@ export default {
   width: 64rpx;
   height: 64rpx;
   border-radius: 50%;
-  background: #F3F4F6;
+  background: $facade-fill-gray-100;
 }
 .card-relation-badge {
   position: absolute;
@@ -173,7 +173,7 @@ export default {
 }
 .card-nickname {
   font-size: 22rpx;
-  color: #374151;
+  color: $facade-text-gray-700;
   font-weight: 600;
   text-align: center;
   line-height: 1.3;
@@ -187,7 +187,7 @@ export default {
 }
 .card-generation-text {
   font-size: 14rpx;
-  color: #9CA3AF;
+  color: $facade-text-gray-400;
 }
 .card-contact-row {
   display: flex;
@@ -200,7 +200,7 @@ export default {
 }
 .contact-phone {
   font-size: 16rpx;
-  color: #3B82F6;
+  color: $status-info;
   margin-left: 2rpx;
 }
 .card-energy {
@@ -216,7 +216,7 @@ export default {
 }
 .energy-unit {
   font-size: 16rpx;
-  color: #9CA3AF;
+  color: $facade-text-gray-400;
   margin-left: 2rpx;
 }
 .card-selected-mark {

cfc-frontend/components/FamilyMemberStrip.vue

@@ -401,11 +401,11 @@ export default {
 .action-title {
   font-size: 30rpx;
   font-weight: 600;
-  color: #1F2937;
+  color: $facade-text-gray-800;
 }
 .action-relation {
   font-size: 24rpx;
-  color: #9CA3AF;
+  color: $facade-text-gray-400;
   margin-top: 4rpx;
 }
 .action-item {
@@ -415,7 +415,7 @@ export default {
   border-bottom: 1rpx solid $facade-fill-gray-50;
 }
 .action-item:active {
-  background: #F3F4F6;
+  background: $facade-fill-gray-100;
 }
 .action-item-icon {
   font-size: 32rpx;
@@ -423,7 +423,7 @@ export default {
 }
 .action-item-text {
   font-size: 28rpx;
-  color: #374151;
+  color: $facade-text-gray-700;
 }
 .action-danger .action-item-text {
   color: $status-danger;
@@ -434,11 +434,11 @@ export default {
   border-bottom: none;
 }
 .action-cancel .action-item-text {
-  color: #6B7280;
+  color: $facade-text-slate;
 }
 .action-time {
   font-size: 22rpx;
-  color: #9CA3AF;
+  color: $facade-text-gray-400;
   margin-left: 4rpx;
 }
 /* 空状态 */
@@ -456,8 +456,8 @@ export default {
   align-items: center;
 }
 .empty-icon { font-size: 56rpx; }
-.empty-title { font-size: 30rpx; font-weight: 600; color: #1F2937; margin-top: 12rpx; }
-.empty-desc { font-size: 24rpx; color: #9CA3AF; margin-top: 8rpx; }
+.empty-title { font-size: 30rpx; font-weight: 600; color: $facade-text-gray-800; margin-top: 12rpx; }
+.empty-desc { font-size: 24rpx; color: $facade-text-gray-400; margin-top: 8rpx; }
 .empty-btn {
   margin-top: 24rpx;
   padding: 16rpx 48rpx;
@@ -472,14 +472,14 @@ export default {
   flex-direction: row;
   align-items: center;
   padding: 24rpx 30rpx;
-  border-bottom: 1rpx solid #F3F4F6;
+  border-bottom: 1rpx solid $facade-fill-gray-100;
 }
 .action-avatar {
   width: 88rpx;
   height: 88rpx;
   border-radius: 50%;
   margin-right: 20rpx;
-  background: #F3F4F6;
+  background: $facade-fill-gray-100;
 }
 .action-header-info {
   display: flex;
@@ -498,12 +498,12 @@ export default {
 .score-label {
   width: 110rpx;
   font-size: 24rpx;
-  color: #6B7280;
+  color: $facade-text-slate;
 }
 .score-bar-track {
   flex: 1;
   height: 14rpx;
-  background: #F3F4F6;
+  background: $facade-fill-gray-100;
   border-radius: 7rpx;
   overflow: hidden;
 }
@@ -512,18 +512,18 @@ export default {
   border-radius: 7rpx;
 }
 .score-bar-fill.trust { background: $status-success; }
-.score-bar-fill.intimacy { background: #3B82F6; }
-.score-bar-fill.communication { background: #F59E0B; }
+.score-bar-fill.intimacy { background: $status-info; }
+.score-bar-fill.communication { background: $dim-wealth; }
 .score-value {
   width: 70rpx;
   text-align: right;
   font-size: 24rpx;
-  color: #1F2937;
+  color: $facade-text-gray-800;
   font-weight: 600;
 }
 .action-divider {
   height: 1rpx;
-  background: #F3F4F6;
+  background: $facade-fill-gray-100;
   margin: 0 30rpx;
 }
 </style>

cfc-frontend/components/FamilyRelationGraph.vue

@@ -948,7 +948,7 @@ simulationTick: function() {
 }
 .gear-text {
   font-size: 32rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
 }
 /* ⚙ 维护页提示 */
 .add-hint {
@@ -987,6 +987,6 @@ simulationTick: function() {
 }
 .empty-text {
   font-size: 28rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
 }
 </style>

cfc-frontend/components/HealthBadge.vue

@@ -40,7 +40,7 @@ export default {
   align-items: center;
   gap: 16rpx;
   padding: 20rpx 24rpx;
-  background: linear-gradient(135deg, #F0FDF4, #ECFDF5);
+  background: linear-gradient(135deg, $status-success-tint-2, #ECFDF5);
   border-radius: 20rpx;
   margin: 0 20rpx 16rpx 20rpx;
 }
@@ -53,10 +53,10 @@ export default {
   justify-content: center;
   flex-shrink: 0;
 }
-.badge-lv-1 { background: #D1FAE5; }
+.badge-lv-1 { background: $status-success-soft; }
 .badge-lv-2 { background: #A7F3D0; }
-.badge-lv-3 { background: #FEF3C7; }
-.badge-lv-4 { background: #FED7AA; }
+.badge-lv-3 { background: $status-warning-soft; }
+.badge-lv-4 { background: $brand-primary-light-2; }
 .badge-lv-5 { background: #FECDD3; }
 .badge-icon { font-size: 40rpx; }
 .badge-info { flex: 1; min-width: 0; }
@@ -78,24 +78,24 @@ export default {
 }
 .badge-score {
   font-size: 22rpx;
-  color: #6B7280;
+  color: $facade-text-slate;
 }
 .badge-progress-bar {
   height: 8rpx;
-  background: #D1FAE5;
+  background: $status-success-soft;
   border-radius: 999rpx;
   overflow: hidden;
   margin-top: 8rpx;
 }
 .badge-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, $status-success, #34D399);
+  background: linear-gradient(90deg, $status-success, $status-success-light-3);
   border-radius: 999rpx;
   transition: width 0.5s ease;
 }
 .badge-next {
   font-size: 20rpx;
-  color: #6B7280;
+  color: $facade-text-slate;
   margin-top: 4rpx;
   display: block;
 }

cfc-frontend/components/HealthTimeline.vue

@@ -36,7 +36,7 @@ export default {
 .timeline-title {
   font-size: 28rpx;
   font-weight: 700;
-  color: #1E293B;
+  color: $uni-text-color;
   margin-bottom: 16rpx;
 }
 .timeline-list { position: relative; padding-left: 20rpx; }
@@ -56,7 +56,7 @@ export default {
   z-index: 1;
 }
 .dot-0 { background: $status-success; }
-.dot-1 { background: #F59E0B; }
+.dot-1 { background: $dim-wealth; }
 .dot-2 { background: $dim-wisdom; }
 .dot-3 { background: $brand-primary; }
 .dot-4 { background: #FF6B9D; }
@@ -66,17 +66,17 @@ export default {
   top: 26rpx;
   bottom: 0;
   width: 2rpx;
-  background: #E2E8F0;
+  background: $uni-border-color-light;
 }
 .timeline-content { flex: 1; min-width: 0; }
 .timeline-text {
   font-size: 26rpx;
-  color: #334155;
+  color: $facade-text-slate-700;
   line-height: 1.5;
 }
 .timeline-date {
   font-size: 20rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
   margin-top: 4rpx;
   display: block;
 }

cfc-frontend/components/OnboardingGuide.vue

@@ -203,7 +203,7 @@ export default {
 .onboarding-title {
   font-size: 36rpx;
   font-weight: 700;
-  color: var(--text, #1E293B);
+  color: var(--text, $uni-text-color);
   text-align: center;
   margin-bottom: 20rpx;
   display: block;
@@ -212,7 +212,7 @@ export default {
 
 .onboarding-desc {
   font-size: 28rpx;
-  color: var(--text-secondary, #64748B);
+  color: var(--text-secondary, $uni-text-color-secondary);
   text-align: center;
   line-height: 1.6;
   display: block;
@@ -249,7 +249,7 @@ export default {
   width: 14rpx;
   height: 14rpx;
   border-radius: 50%;
-  background: var(--border, #CBD5E1);
+  background: var(--border, $uni-border-color);
   transition: background 0.3s ease, transform 0.3s ease;
 }
 

cfc-frontend/components/OnboardingProgressBar.vue

@@ -76,7 +76,7 @@ export default {
   margin: 20rpx 24rpx;
   padding: 24rpx 28rpx;
   background: linear-gradient(135deg, $uni-primary-pale, #FFEDD5);
-  border: 2rpx solid #FED7AA;
+  border: 2rpx solid $brand-primary-light-2;
   border-radius: 20rpx;
 }
 .opb-head {
@@ -92,11 +92,11 @@ export default {
 }
 .opb-count {
   font-size: 24rpx;
-  color: #C2410C;
+  color: $brand-primary-deep;
 }
 .opb-bar {
   height: 16rpx;
-  background: #FED7AA;
+  background: $brand-primary-light-2;
   border-radius: 8rpx;
   overflow: hidden;
 }
@@ -108,6 +108,6 @@ export default {
 .opb-tip {
   margin-top: 12rpx;
   font-size: 24rpx;
-  color: #C2410C;
+  color: $brand-primary-deep;
 }
 </style>

cfc-frontend/components/PlayfulButton.vue

@@ -59,21 +59,21 @@ export default {
 /* ---- Secondary ---- */
 .playful-btn--secondary {
   background: var(--surface, $app-surface);
-  color: var(--text, #1E293B);
-  border: 2rpx solid var(--border, #CBD5E1);
+  color: var(--text, $uni-text-color);
+  border: 2rpx solid var(--border, $uni-border-color);
   box-shadow: 0 2px 6px rgba(249,115,22,0.08);
 }
 
 /* ---- Success ---- */
 .playful-btn--success {
-  background: var(--color-success, #22C55E);
+  background: var(--color-success, $status-success-2);
   color: $app-surface;
   box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
 }
 
 /* ---- Warning ---- */
 .playful-btn--warning {
-  background: var(--color-warning, #F59E0B);
+  background: var(--color-warning, $dim-wealth);
   color: $app-surface;
   box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
 }
@@ -89,7 +89,7 @@ export default {
 .playful-btn--clay {
   background: var(--color-primary, $brand-primary);
   color: $app-surface;
-  border: 2rpx solid var(--border, #CBD5E1);
+  border: 2rpx solid var(--border, $uni-border-color);
   box-shadow: 0 2px 8px rgba(249,115,22,0.15);
 }
 

cfc-frontend/components/PlayfulCard.vue

@@ -61,22 +61,22 @@ export default {
   transition: transform .15s ease, box-shadow .2s ease;
 }
 .playful-card--flat {
-  border: 1px solid var(--border, #CBD5E1);
+  border: 1px solid var(--border, $uni-border-color);
   box-shadow: var(--shadow-md);
 }
 .playful-card--clay {
-  border: 1px solid var(--border-light, #E2E8F0);
+  border: 1px solid var(--border-light, $uni-border-color-light);
   background: var(--surface, $app-surface);
   box-shadow: var(--shadow-md);
 }
 .playful-card--bordered {
-  border: 1px solid var(--border-light, #E2E8F0);
+  border: 1px solid var(--border-light, $uni-border-color-light);
 }
 .playful-card--teacher {
   border-left: 4px solid var(--color-primary, $brand-primary);
-  border-top: 1px solid var(--border-light, #E2E8F0);
-  border-right: 1px solid var(--border-light, #E2E8F0);
-  border-bottom: 1px solid var(--border-light, #E2E8F0);
+  border-top: 1px solid var(--border-light, $uni-border-color-light);
+  border-right: 1px solid var(--border-light, $uni-border-color-light);
+  border-bottom: 1px solid var(--border-light, $uni-border-color-light);
   box-shadow: var(--shadow-sm);
   background: var(--surface, $app-surface);
 }
@@ -91,10 +91,10 @@ export default {
   font-weight: 700;
   font-size: 32rpx;
   margin-bottom: 16rpx;
-  color: var(--text, #1E293B);
+  color: var(--text, $uni-text-color);
 }
 .playful-card__content {
-  color: var(--text, #1E293B);
+  color: var(--text, $uni-text-color);
   line-height: 1.6;
   font-size: 28rpx;
 }

cfc-frontend/components/ProfileGrowth.vue

@@ -119,7 +119,7 @@ export default {
 .report-stat {
   font-size: 40rpx;
   font-weight: bold;
-  color: #667eea;
+  color: $accent-indigo;
 }
 .report-label {
   font-size: 24rpx;

cfc-frontend/components/RadarChart.vue

@@ -914,7 +914,7 @@ export default {
 
 .legend-text {
   font-size: 22rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
   font-weight: 500;
 }
 </style>

cfc-frontend/components/RecommendedFeed.vue

@@ -186,7 +186,7 @@ export default {
   width: 100%;
   height: 200rpx;
   border-radius: 12rpx;
-  background: linear-gradient(135deg, $facade-fill 25%, #e8e8e8 50%, $facade-fill 75%);
+  background: linear-gradient(135deg, $facade-fill 25%, $facade-fill-4 50%, $facade-fill 75%);
   background-size: 200% 100%;
   animation: shimmer 1.5s infinite;
   margin-bottom: 12rpx;
@@ -217,16 +217,16 @@ export default {
 }
 .activity-badge {
   background: #FEF2E6;
-  color: #EA580C;
+  color: $brand-primary-dark;
 }
 .feed-status-badge {
   font-size: 18rpx;
   padding: 2rpx 8rpx;
   border-radius: 6rpx;
 }
-.status-upcoming { background: #DBEAFE; color: #2563EB; }
-.status-ongoing { background: #D1FAE5; color: #16A34A; }
-.status-ended { background: #F3F4F6; color: #9CA3AF; }
+.status-upcoming { background: $status-info-soft; color: #2563EB; }
+.status-ongoing { background: $status-success-soft; color: $status-success-strong-2; }
+.status-ended { background: $facade-fill-gray-100; color: $facade-text-gray-400; }
 .feed-title {
   font-size: 26rpx;
   color: $facade-text-strong;
@@ -249,7 +249,7 @@ export default {
   font-weight: 600;
 }
 .fee-free {
-  color: #22C55E;
+  color: $status-success-2;
 }
 .feed-meta-row {
   display: flex;

cfc-frontend/components/TrendChart.vue

@@ -259,7 +259,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .trend-chart-wrap {
   display: flex;
   flex-direction: column;
@@ -292,11 +292,11 @@ export default {
 }
 .legend-line {
   width: 32rpx;
-  border-top: 4rpx solid #0EA5E9;
+  border-top: 4rpx solid $uni-info;
   margin-right: 8rpx;
 }
 .legend-text {
   font-size: 22rpx;
-  color: #475569;
+  color: $facade-text-slate-deep;
 }
 </style>

cfc-frontend/components/address-picker.vue

@@ -377,7 +377,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 24rpx 20rpx;
-  background: #f8f8f8;
+  background: $facade-fill-page;
   border-radius: 12rpx;
   border: 2rpx solid $facade-hairline-2;
 }

cfc-frontend/components/daily-task-card.vue

@@ -140,11 +140,11 @@ export default {
 .daily-task-title {
   font-size: 32rpx;
   font-weight: 600;
-  color: #1F2937;
+  color: $facade-text-gray-800;
 }
 .daily-task-date {
   font-size: 24rpx;
-  color: #9CA3AF;
+  color: $facade-text-gray-400;
 }
 .daily-task-state {
   display: flex;
@@ -155,7 +155,7 @@ export default {
 }
 .daily-task-state-text {
   font-size: 26rpx;
-  color: #9CA3AF;
+  color: $facade-text-gray-400;
 }
 .daily-task-group {
   display: flex;
@@ -164,7 +164,7 @@ export default {
 }
 .daily-task-group-title {
   font-size: 24rpx;
-  color: #9CA3AF;
+  color: $facade-text-gray-400;
   margin-bottom: 8rpx;
 }
 .daily-task-item {
@@ -173,14 +173,14 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 18rpx 0;
-  border-bottom: 1rpx solid #F3F4F6;
+  border-bottom: 1rpx solid $facade-fill-gray-100;
 }
 .daily-task-item:last-child {
   border-bottom: none;
 }
 .daily-task-item-label {
   font-size: 28rpx;
-  color: #374151;
+  color: $facade-text-gray-700;
 }
 .daily-task-go {
   font-size: 26rpx;

cfc-frontend/components/gate-lock.vue

@@ -131,7 +131,7 @@ export default {
   border-radius: 16rpx;
 }
 .reward-points {
-  color: #FFD700;
+  color: $accent-gold;
   background: rgba(255,215,0,0.12);
 }
 .reward-energy {

cfc-frontend/components/hand-signature/hand-signature.vue

@@ -283,8 +283,8 @@ export default {
   justify-content: center;
 }
 .agree-box-on {
-  background: #667eea;
-  border-color: #667eea;
+  background: $accent-indigo;
+  border-color: $accent-indigo;
 }
 .agree-tick {
   font-size: 22rpx;
@@ -342,7 +342,7 @@ export default {
   line-height: 72rpx;
   font-size: 26rpx;
   color: $app-surface;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, $accent-indigo 0%, $accent-indigo-deep 100%);
   border: none;
   border-radius: 36rpx;
 }

cfc-frontend/components/login-sheet.vue

@@ -329,7 +329,7 @@ export default {
 }
 .concept-desc {
   font-size: 26rpx;
-  color: #555;
+  color: $facade-text-deep;
   line-height: 1.6;
 }
 .concept-highlight {
@@ -357,7 +357,7 @@ export default {
 }
 .loop-pill-indigo { background: rgba(99, 102, 241, 0.12); color: $dim-wisdom; }
 .loop-pill-green { background: rgba(16, 185, 129, 0.12); color: $status-success; }
-.loop-pill-amber { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
+.loop-pill-amber { background: rgba(245, 158, 11, 0.12); color: $dim-wealth; }
 .loop-pill-red { background: rgba(239, 68, 68, 0.12); color: $status-danger; }
 .loop-pill-text {
   margin-left: 4rpx;
@@ -394,7 +394,7 @@ export default {
 }
 .dim-tag-body { background: $status-success; }
 .dim-tag-wisdom { background: $dim-wisdom; }
-.dim-tag-wealth { background: #f59e0b; }
+.dim-tag-wealth { background: $dim-wealth; }
 .dim-tag-action { background: #14b8a6; }
 .dim-tag-mind { background: $status-danger; }
 

cfc-frontend/components/report-upload-card.vue

@@ -31,12 +31,12 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .report-upload-card {
   display: flex;
   flex-direction: row;
   align-items: center;
-  background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
+  background: linear-gradient(135deg, $mat-green-tint, #F1F8E9);
   border-radius: 20rpx;
   padding: 28rpx 24rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -61,7 +61,7 @@ export default {
 .report-upload-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #2E7D32;
+  color: $mat-green-strong;
   display: block;
   margin-bottom: 6rpx;
 }

cfc-frontend/components/wuxing-sandbox.vue

@@ -652,7 +652,7 @@ export default {
   gap: 6rpx;
   font-size: 22rpx;
   color: $app-surface;
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
   padding: 10rpx 20rpx;
   border-radius: 28rpx;
   margin-left: auto;
@@ -719,11 +719,11 @@ export default {
   display: flex; align-items: center; justify-content: center;
   box-shadow: 0 0 24rpx rgba(255,255,255,0.25);
 }
-.point-dot--fire { background: linear-gradient(135deg, #FF6B35, #E65100); }
-.point-dot--water { background: linear-gradient(135deg, #42A5F5, #1565C0); }
+.point-dot--fire { background: linear-gradient(135deg, #FF6B35, $mat-orange-strong); }
+.point-dot--water { background: linear-gradient(135deg, #42A5F5, $mat-blue-strong); }
 .point-dot--earth { background: linear-gradient(135deg, #8D6E63, #5D4037); }
-.point-dot--metal { background: linear-gradient(135deg, #FFD700, #FF8F00); }
-.point-dot--wood { background: linear-gradient(135deg, #4CAF50, #2E7D32); }
+.point-dot--metal { background: linear-gradient(135deg, $accent-gold, #FF8F00); }
+.point-dot--wood { background: linear-gradient(135deg, $mat-green, $mat-green-strong); }
 
 .point-icon { font-size: 26rpx; line-height: 1; }
 
@@ -768,10 +768,10 @@ export default {
 .dim-item {
   font-size: 20rpx; padding: 4rpx 12rpx; border-radius: 10rpx; white-space: nowrap;
 }
-.dim-item--wood { color: #4CAF50; background: rgba(76,175,80,0.12); }
+.dim-item--wood { color: $mat-green; background: rgba(76,175,80,0.12); }
 .dim-item--fire { color: #FF6B35; background: rgba(255,107,53,0.12); }
 .dim-item--earth { color: #8D6E63; background: rgba(141,110,99,0.12); }
-.dim-item--metal { color: #FFD700; background: rgba(255,215,0,0.12); }
+.dim-item--metal { color: $accent-gold; background: rgba(255,215,0,0.12); }
 .dim-item--water { color: #42A5F5; background: rgba(66,165,245,0.12); }
 
 /* ============================================================

cfc-frontend/pages/achievement/index.vue

@@ -109,7 +109,7 @@ export default {
 <stylescoped lang="scss">
 .container {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
 }
 .nav-placeholder {
   width: 60rpx;
@@ -167,10 +167,10 @@ export default {
   margin: 0 auto 12rpx;
 }
 .badge-icon-wrap.unlocked {
-  background: linear-gradient(135deg, #FFD700, #FFA500);
+  background: linear-gradient(135deg, $accent-gold, #FFA500);
 }
 .badge-icon-wrap.locked {
-  background: #e8e8e8;
+  background: $facade-fill-4;
 }
 .badge-icon {
   font-size: 40rpx;

cfc-frontend/pages/activity/activity-detail/activity-detail.vue

@@ -1001,7 +1001,7 @@ export default {
   border-radius: 8rpx;
 }
 .status-draft { background: $facade-fill-2; color: $facade-text-muted; }
-.status-published { background: #F0FDF4; color: #22C55E; }
+.status-published { background: $status-success-tint-2; color: $status-success-2; }
 .status-ended { background: $facade-fill-2; color: $facade-text-muted; }
 .status-upcoming { background: $uni-primary-pale; color: $brand-primary; }
 
@@ -1053,7 +1053,7 @@ export default {
 .section-title {
   font-size: calc(28rpx * var(--font-scale, 1));
   font-weight: 600;
-  color: #1f2937;
+  color: $facade-text-gray-800;
   display: block;
   margin-bottom: 12rpx;
 }
@@ -1084,7 +1084,7 @@ export default {
 }
 .refund-notice-text {
   font-size: calc(24rpx * var(--font-scale, 1));
-  color: #DC2626;
+  color: $status-danger-deep;
   line-height: 1.4;
 }
 
@@ -1137,7 +1137,7 @@ export default {
   opacity: 0.85;
 }
 .btn-checkin-done {
-  background: #22C55E;
+  background: $status-success-2;
 }
 .btn-checkin-loading {
   opacity: 0.7;
@@ -1145,7 +1145,7 @@ export default {
 
 /* 报名按钮 */
 .btn-register {
-  background: linear-gradient(135deg, $status-success, #34D399);
+  background: linear-gradient(135deg, $status-success, $status-success-light-3);
   color: $app-surface;
   border: none;
   border-radius: 40rpx;
@@ -1329,7 +1329,7 @@ export default {
 .reg-section-label {
   font-size: 28rpx;
   font-weight: 600;
-  color: #555;
+  color: $facade-text-deep;
   display: block;
   margin-bottom: 16rpx;
 }
@@ -1446,7 +1446,7 @@ export default {
 }
 .reg-submit {
   flex: 1;
-  background: linear-gradient(135deg, $status-success, #34D399);
+  background: linear-gradient(135deg, $status-success, $status-success-light-3);
   color: $app-surface;
   border: none;
   border-radius: 40rpx;

cfc-frontend/pages/activity/create.vue

@@ -568,7 +568,7 @@ export default {
 <stylescoped lang="scss">
 .container {
   min-height: 100vh;
-  background: #F5F7FA;
+  background: $app-bg;
   padding: 24rpx;
 }
 
@@ -582,7 +582,7 @@ export default {
 .form-title {
   font-size: 36rpx;
   font-weight: bold;
-  color: #1E293B;
+  color: $uni-text-color;
   margin-bottom: 24rpx;
 }
 
@@ -603,7 +603,7 @@ export default {
 
 .form-label {
   font-size: 26rpx;
-  color: #475569;
+  color: $facade-text-slate-deep;
   font-weight: 600;
   margin-bottom: 12rpx;
   display: block;
@@ -612,22 +612,22 @@ export default {
 .form-input {
   width: 100%;
   height: 80rpx;
-  border: 1rpx solid #E2E8F0;
+  border: 1rpx solid $uni-border-color-light;
   border-radius: 12rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
-  color: #1E293B;
+  color: $uni-text-color;
   box-sizing: border-box;
 }
 
 .form-picker {
   width: 100%;
   height: 80rpx;
-  border: 1rpx solid #E2E8F0;
+  border: 1rpx solid $uni-border-color-light;
   border-radius: 12rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
-  color: #1E293B;
+  color: $uni-text-color;
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -635,24 +635,24 @@ export default {
 
 .picker-text {
   font-size: 28rpx;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 
 .form-textarea {
   width: 100%;
   min-height: 160rpx;
-  border: 1rpx solid #E2E8F0;
+  border: 1rpx solid $uni-border-color-light;
   border-radius: 12rpx;
   padding: 16rpx 20rpx;
   font-size: 28rpx;
-  color: #1E293B;
+  color: $uni-text-color;
   box-sizing: border-box;
 }
 
 .cover-upload {
   width: 100%;
   height: 320rpx;
-  border: 2rpx dashed #CBD5E1;
+  border: 2rpx dashed $uni-border-color;
   border-radius: 12rpx;
   display: flex;
   align-items: center;
@@ -673,12 +673,12 @@ export default {
 
 .upload-icon {
   font-size: 64rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
 }
 
 .upload-text {
   font-size: 24rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
   margin-top: 8rpx;
 }
 
@@ -691,7 +691,7 @@ export default {
 
 .cover-action {
   font-size: 24rpx;
-  color: #475569;
+  color: $facade-text-slate-deep;
   text-decoration: underline;
 }
 
@@ -712,7 +712,7 @@ export default {
 
 .poster-tpl-card {
   width: 200rpx;
-  border: 2rpx solid #E2E8F0;
+  border: 2rpx solid $uni-border-color-light;
   border-radius: 12rpx;
   padding: 20rpx 16rpx;
   display: flex;
@@ -741,7 +741,7 @@ export default {
 
 .tpl-name {
   font-size: 24rpx;
-  color: #1E293B;
+  color: $uni-text-color;
   text-align: center;
 }
 
@@ -755,7 +755,7 @@ export default {
 
 .poster-preview-hint {
   font-size: 24rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
 }
 
 .btn-preview {
@@ -813,7 +813,7 @@ export default {
 .loading-spinner {
   width: 60rpx;
   height: 60rpx;
-  border: 4rpx solid #FED7AA;
+  border: 4rpx solid $brand-primary-light-2;
   border-top: 4rpx solid $brand-primary;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;

cfc-frontend/pages/activity/index.vue

@@ -1031,8 +1031,8 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 }
 
 .status-approved {
-  background: #F0FDF4;
-  color: #22C55E;
+  background: $status-success-tint-2;
+  color: $status-success-2;
 }
 
 .status-rejected {
@@ -1046,8 +1046,8 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 }
 
 .status-checked_in {
-  background: #DBEAFE;
-  color: #3B82F6;
+  background: $status-info-soft;
+  color: $status-info;
 }
 
 .status-upcoming {
@@ -1061,8 +1061,8 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 }
 
 .status-published {
-  background: #F0FDF4;
-  color: #22C55E;
+  background: $status-success-tint-2;
+  color: $status-success-2;
 }
 
 .status-draft {
@@ -1077,7 +1077,7 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 }
 
 .card-price.free {
-  color: #22C55E;
+  color: $status-success-2;
 }
 
 .card-actions {
@@ -1229,7 +1229,7 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 }
 
 .manage-published {
-  color: #22C55E;
+  color: $status-success-2;
 }
 
 .manage-draft {

cfc-frontend/pages/activity/order-pay/order-pay.vue

@@ -173,7 +173,7 @@ export default {
 <stylescoped lang="scss">
 .container {
   min-height: 100vh;
-  background: #F5F7FA;
+  background: $app-bg;
 }
 
 .loading-wrap {
@@ -185,7 +185,7 @@ export default {
 
 .loading-text {
   font-size: 28rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
 }
 
 .content {
@@ -230,7 +230,7 @@ export default {
   display: block;
   font-size: 28rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
   margin-bottom: 20rpx;
 }
 
@@ -244,12 +244,12 @@ export default {
 
 .info-label {
   font-size: 26rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
 }
 
 .info-value {
   font-size: 26rpx;
-  color: #1E293B;
+  color: $uni-text-color;
   max-width: 400rpx;
   word-break: break-all;
   text-align: right;
@@ -282,7 +282,7 @@ export default {
 
 .payment-name {
   font-size: 28rpx;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 
 .payment-checked {
@@ -311,12 +311,12 @@ export default {
 }
 
 .pay-btn.disabled {
-  background: #CBD5E1;
+  background: $uni-border-color;
 }
 
 .cancel-link {
   margin-top: 24rpx;
   font-size: 26rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
 }
 </style>

cfc-frontend/pages/ai/chat.vue

@@ -524,7 +524,7 @@ export default {
   justify-content: space-between;
   padding: 88rpx 24rpx 16rpx;
   background: $app-surface;
-  border-bottom: 1rpx solid var(--border-light, #E2E8F0);
+  border-bottom: 1rpx solid var(--border-light, $uni-border-color-light);
   position: relative;
   z-index: 100;
 }
@@ -534,12 +534,12 @@ export default {
   border-bottom-color: $dim-body;
 }
 .chat-nav.mascot-xibao .chat-nav.mascot-fubao {
-  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
-  border-bottom-color: #F59E0B;
+  background: linear-gradient(135deg, #FFFBEB 0%, $status-warning-soft 100%);
+  border-bottom-color: $dim-wealth;
 }
 .chat-nav.mascot-fubao .nav-back-icon {
   font-size: 40rpx;
-  color: var(--text, #1E293B);
+  color: var(--text, $uni-text-color);
   font-weight: 600;
 }
 
@@ -553,7 +553,7 @@ export default {
 
 .nav-action {
   font-size: 36rpx;
-  color: var(--text-secondary, #64748B);
+  color: var(--text-secondary, $uni-text-color-secondary);
 }
 
 /* 会话列表侧拉 */
@@ -589,13 +589,13 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 100rpx 24rpx 16rpx;
-  border-bottom: 1rpx solid var(--border-light, #E2E8F0);
+  border-bottom: 1rpx solid var(--border-light, $uni-border-color-light);
 }
 
 .conv-header-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: var(--text, #1E293B);
+  color: var(--text, $uni-text-color);
 }
 
 .conv-header-new {
@@ -611,7 +611,7 @@ export default {
 
 .conv-item {
   padding: 20rpx 24rpx;
-  border-bottom: 1rpx solid var(--border-light, #E2E8F0);
+  border-bottom: 1rpx solid var(--border-light, $uni-border-color-light);
 }
 
 .conv-item-active {
@@ -620,7 +620,7 @@ export default {
 
 .conv-item-name {
   font-size: 26rpx;
-  color: var(--text, #1E293B);
+  color: var(--text, $uni-text-color);
   display: block;
   margin-bottom: 6rpx;
   overflow: hidden;
@@ -630,7 +630,7 @@ export default {
 
 .conv-item-time {
   font-size: 20rpx;
-  color: var(--muted, #94A3B8);
+  color: var(--muted, $app-text-subtle);
 }
 
 /* 消息列表 */
@@ -671,14 +671,14 @@ export default {
 .welcome-title {
   font-size: 32rpx;
   font-weight: 600;
-  color: var(--text, #1E293B);
+  color: var(--text, $uni-text-color);
   display: block;
   margin-bottom: 12rpx;
 }
 
 .welcome-desc {
   font-size: 24rpx;
-  color: var(--text-secondary, #64748B);
+  color: var(--text-secondary, $uni-text-color-secondary);
   display: block;
   margin-bottom: 32rpx;
 }
@@ -706,7 +706,7 @@ export default {
 
 .suggestion-text {
   font-size: 24rpx;
-  color: var(--text, #1E293B);
+  color: var(--text, $uni-text-color);
 }
 
 /* 消息 */
@@ -742,8 +742,8 @@ export default {
   border: 2rpx solid $dim-body;
 }
 .mascot-fubao .message-avatar {
-  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
-  border: 2rpx solid #F59E0B;
+  background: linear-gradient(135deg, #FFFBEB 0%, $status-warning-soft 100%);
+  border: 2rpx solid $dim-wealth;
 }
 
 .message-bubble {
@@ -763,7 +763,7 @@ export default {
 
 .ai-bubble {
   background: $app-surface;
-  color: var(--text, #1E293B);
+  color: var(--text, $uni-text-color);
   border-bottom-left-radius: 4rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
 }
@@ -775,7 +775,7 @@ export default {
   padding: 16rpx 24rpx;
   padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
   background: $app-surface;
-  border-top: 1rpx solid var(--border-light, #E2E8F0);
+  border-top: 1rpx solid var(--border-light, $uni-border-color-light);
 }
 
 .chat-input-wrap {
@@ -790,7 +790,7 @@ export default {
   width: 60rpx;
   height: 60rpx;
   border-radius: 50%;
-  background: var(--border-light, #E2E8F0);
+  background: var(--border-light, $uni-border-color-light);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -809,14 +809,14 @@ export default {
 .chat-input {
   height: 72rpx;
   font-size: 26rpx;
-  color: var(--text, #1E293B);
+  color: var(--text, $uni-text-color);
 }
 
 .chat-send-btn {
   width: 72rpx;
   height: 72rpx;
   border-radius: 50%;
-  background: var(--border-light, #E2E8F0);
+  background: var(--border-light, $uni-border-color-light);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -867,7 +867,7 @@ export default {
 }
 
 .rec-list {
-  border-top: 1rpx solid var(--border-light, #E2E8F0);
+  border-top: 1rpx solid var(--border-light, $uni-border-color-light);
   padding-top: 16rpx;
   display: flex;
   flex-direction: column;
@@ -876,7 +876,7 @@ export default {
 
 /* 任务卡片列表 */
 .task-list {
-  border-top: 1rpx solid var(--border-light, #E2E8F0);
+  border-top: 1rpx solid var(--border-light, $uni-border-color-light);
   padding-top: 16rpx;
   display: flex;
   flex-direction: column;
@@ -887,7 +887,7 @@ export default {
 .source-label {
   margin-top: 16rpx;
   font-size: 22rpx;
-  color: var(--muted, #94A3B8);
+  color: var(--muted, $app-text-subtle);
   text-align: right;
 }
 
@@ -906,7 +906,7 @@ export default {
   border-radius: 8rpx;
   margin-right: 12rpx;
   flex-shrink: 0;
-  background: #E2E8F0;
+  background: $uni-border-color-light;
 }
 
 .rec-info {
@@ -930,7 +930,7 @@ export default {
 .rec-name {
   font-size: 26rpx;
   font-weight: 600;
-  color: var(--text, #1E293B);
+  color: var(--text, $uni-text-color);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -938,7 +938,7 @@ export default {
 
 .rec-desc {
   font-size: 22rpx;
-  color: var(--text-secondary, #64748B);
+  color: var(--text-secondary, $uni-text-color-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

cfc-frontend/pages/ai/components/AITaskCard.vue

@@ -150,7 +150,7 @@ export default {
 .card-title {
   font-size: 32rpx;
   font-weight: 600;
-  color: #1F2937;
+  color: $facade-text-gray-800;
   flex: 1;
   margin-right: 16rpx;
 }
@@ -173,7 +173,7 @@ export default {
 
 .card-description {
   font-size: 28rpx;
-  color: #6B7280;
+  color: $facade-text-slate;
   line-height: 44rpx;
 }
 
@@ -183,7 +183,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding-top: 24rpx;
-  border-top: 1rpx solid #F3F4F6;
+  border-top: 1rpx solid $facade-fill-gray-100;
 }
 
 .reward-info {
@@ -194,7 +194,7 @@ export default {
 
 .reward-label {
   font-size: 26rpx;
-  color: #9CA3AF;
+  color: $facade-text-gray-400;
   margin-right: 12rpx;
 }
 
@@ -216,7 +216,7 @@ export default {
 }
 
 .accept-btn:active {
-  background-color: #EA580C;
+  background-color: $brand-primary-dark;
 }
 
 .accept-btn:disabled {

cfc-frontend/pages/article-center/article-detail.vue

@@ -569,7 +569,7 @@ export default {
 <style scoped lang="scss">
 .detail-container { min-height: 100vh; background: $app-surface; }
 .loading-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 300rpx; }
-.loading-spinner { width: 60rpx; height: 60rpx; border: 4rpx solid #e0e0e0; border-top-color: $uni-info; border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 20rpx; }
+.loading-spinner { width: 60rpx; height: 60rpx; border: 4rpx solid $facade-hairline; border-top-color: $uni-info; border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 20rpx; }
 @keyframes spin { 0% { transform: rotate(0deg); } 360% { transform: rotate(360deg); } }
 .loading-text { font-size: 26rpx; color: $facade-text-muted; }
 .error-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 300rpx; }
@@ -595,7 +595,7 @@ export default {
 .dim-bar { height: 8rpx; border-radius: 4rpx; }
 .dim-label { font-size: 18rpx; color: $facade-text-muted; text-align: center; display: block; margin-top: 4rpx; }
 .detail-summary { padding: 20rpx 30rpx; }
-.detail-summary-text { font-size: calc(26rpx * var(--font-scale, 1)); color: #888; line-height: 1.7; display: block; border-left: 4rpx solid $brand-primary; padding-left: 20rpx; }
+.detail-summary-text { font-size: calc(26rpx * var(--font-scale, 1)); color: $facade-text-faint; line-height: 1.7; display: block; border-left: 4rpx solid $brand-primary; padding-left: 20rpx; }
 .divider { height: 1rpx; background: $facade-hairline-2; margin: 24rpx 30rpx; }
 .detail-body { padding: 0 30rpx; font-size: calc(32rpx * var(--font-scale, 1)); color: #444; line-height: 1.8; }
 
@@ -636,17 +636,17 @@ export default {
 .quiz-step-bar { display: flex; align-items: center; justify-content: center; margin-bottom: 24rpx; }
 .quiz-step-text { font-size: 24rpx; color: $facade-text-muted; margin-right: 12rpx; }
 .quiz-dots { display: flex; align-items: center; gap: 8rpx; }
-.quiz-dot { width: 12rpx; height: 12rpx; border-radius: 50%; background: #E5E7EB; }
+.quiz-dot { width: 12rpx; height: 12rpx; border-radius: 50%; background: $facade-gray-200; }
 .quiz-dot.active { background: $brand-primary; }
 .quiz-dot.done { background: #FDBA74; }
 .q-title { font-size: 30rpx; font-weight: 600; color: $facade-text-strong; line-height: 1.5; margin-bottom: 20rpx; }
 .q-options { display: flex; flex-direction: column; gap: 12rpx; }
-.q-option-row { display: flex; align-items: center; padding: 16rpx 20rpx; border: 2rpx solid #E5E7EB; border-radius: 12rpx; }
+.q-option-row { display: flex; align-items: center; padding: 16rpx 20rpx; border: 2rpx solid $facade-gray-200; border-radius: 12rpx; }
 .q-option-row.selected { border-color: $brand-primary; background: $uni-primary-pale; }
 .q-option-letter { width: 44rpx; font-size: 26rpx; font-weight: 600; color: $facade-text-body; flex-shrink: 0; }
 .q-option-row.selected .q-option-letter { color: $brand-primary; }
 .q-option-text { flex: 1; min-width: 0; font-size: 26rpx; color: $facade-text-strong; }
-.q-option-row.selected .q-option-text { color: #92400E; }
+.q-option-row.selected .q-option-text { color: $status-warning-strong; }
 .q-option-check { width: 32rpx; height: 32rpx; border-radius: 50%; border: 3rpx solid #D1D5DB; color: transparent; font-size: 20rpx; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
 .q-option-row.selected .q-option-check { border-color: $brand-primary; background: $brand-primary; color: $app-surface; }
 .quiz-nav { display: flex; gap: 16rpx; margin-top: 28rpx; }

cfc-frontend/pages/article-center/article-edit.vue

@@ -242,7 +242,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.edit-container { min-height: 100vh; background: #f5f7fa; }
+.edit-container { min-height: 100vh; background: $app-bg; }
 .edit-header {
   display: flex;
   align-items: center;
@@ -346,7 +346,7 @@ export default {
   width: 100%;
   height: 88rpx;
   line-height: 88rpx;
-  background: linear-gradient(135deg, $brand-primary, #EA580C);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-dark);
   color: $app-surface;
   font-size: 32rpx;
   font-weight: bold;

cfc-frontend/pages/article-center/index.vue

@@ -337,7 +337,7 @@ onLoad(options) {
 
 .ac-container {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
   position: relative;
 }
 
@@ -460,14 +460,14 @@ onLoad(options) {
 }
 .sk-cover {
   height: 340rpx;
-  background: linear-gradient(90deg, $facade-fill 25%, #e8e8e8 50%, $facade-fill 75%);
+  background: linear-gradient(90deg, $facade-fill 25%, $facade-fill-4 50%, $facade-fill 75%);
   background-size: 200% 100%;
   animation: sk-shimmer 1.5s infinite;
 }
 .sk-body { padding: 24rpx; }
 .sk-row {
   height: 22rpx;
-  background: linear-gradient(90deg, $facade-fill 25%, #e8e8e8 50%, $facade-fill 75%);
+  background: linear-gradient(90deg, $facade-fill 25%, $facade-fill-4 50%, $facade-fill 75%);
   background-size: 200% 100%;
   border-radius: 6rpx;
   margin-bottom: 14rpx;
@@ -595,7 +595,7 @@ onLoad(options) {
   color: $facade-text-ghost-light;
 }
 .ac-card-author {
-  color: #888;
+  color: $facade-text-faint;
 }
 .ac-card-sep {
   margin: 0 10rpx;
@@ -636,7 +636,7 @@ onLoad(options) {
   bottom: 100rpx;
   width: 96rpx;
   height: 96rpx;
-  background: linear-gradient(135deg, $brand-primary, #EA580C);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-dark);
   color: $app-surface;
   border-radius: 50%;
   display: flex;

cfc-frontend/pages/article-center/my-posts.vue

@@ -131,7 +131,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.posts-container { min-height: 100vh; background: #f5f7fa; }
+.posts-container { min-height: 100vh; background: $app-bg; }
 .posts-list { height: 100vh; }
 .loading-wrap, .empty-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 200rpx; }
 .loading-text { font-size: 26rpx; color: $facade-text-muted; }
@@ -154,8 +154,8 @@ export default {
 .post-meta { display: flex; align-items: center; font-size: 22rpx; }
 .post-date { color: $facade-text-muted; margin-right: 16rpx; }
 .post-status { padding: 2rpx 12rpx; border-radius: 8rpx; }
-.status-approved { color: #22c55e; background: rgba(34,197,94,0.1); }
-.status-pending { color: #f59e0b; background: rgba(245,158,11,0.1); }
+.status-approved { color: $status-success-2; background: rgba(34,197,94,0.1); }
+.status-pending { color: $dim-wealth; background: rgba(245,158,11,0.1); }
 .status-rejected { color: $status-danger; background: rgba(239,68,68,0.1); }
 .status-draft { color: $facade-text-muted; background: rgba(153,153,153,0.1); }
 .post-reason { font-size: 20rpx; color: $status-danger; margin-top: 6rpx; display: block; }

cfc-frontend/pages/assessment-plan/detail.vue

@@ -144,7 +144,7 @@ export default {
 <style scoped lang="scss">
 .detail-container {
   min-height: 100vh;
-  background: #F5F7FA;
+  background: $app-bg;
 }
 
 /* ===== 加载状态 ===== */
@@ -186,17 +186,17 @@ export default {
   border-radius: 20rpx;
   margin-left: 12rpx;
 }
-.status-active { background: #E3F2FD; color: #1565C0; }
-.status-completed { background: #E8F5E9; color: #2E7D32; }
+.status-active { background: $mat-blue-tint; color: $mat-blue-strong; }
+.status-completed { background: $mat-green-tint; color: $mat-green-strong; }
 .status-cancelled { background: #ECEFF1; color: #78909C; }
-.status-generated { background: #FFF3E0; color: #E65100; }
-.status-reviewed { background: #E8F5E9; color: #2E7D32; }
+.status-generated { background: $fortune-1-tint; color: $mat-orange-strong; }
+.status-reviewed { background: $mat-green-tint; color: $mat-green-strong; }
 .status-rejected { background: #FDE8E8; color: $status-danger-strong-2; }
 .status-unknown { background: #ECEFF1; color: #78909C; }
 
 /* ===== 元信息 ===== */
 .detail-meta {
-  border-top: 1rpx solid #F1F5F9;
+  border-top: 1rpx solid $facade-fill-slate;
   padding-top: 8rpx;
 }
 .meta-row {

cfc-frontend/pages/assessment-plan/list.vue

@@ -111,7 +111,7 @@ export default {
 <style scoped lang="scss">
 .list-container {
   min-height: 100vh;
-  background: #F5F7FA;
+  background: $app-bg;
 }
 
 /* ===== 加载状态 ===== */
@@ -159,11 +159,11 @@ export default {
   border-radius: 20rpx;
   margin-left: 12rpx;
 }
-.status-active { background: #E3F2FD; color: #1565C0; }
-.status-completed { background: #E8F5E9; color: #2E7D32; }
+.status-active { background: $mat-blue-tint; color: $mat-blue-strong; }
+.status-completed { background: $mat-green-tint; color: $mat-green-strong; }
 .status-cancelled { background: #ECEFF1; color: #78909C; }
-.status-generated { background: #FFF3E0; color: #E65100; }
-.status-reviewed { background: #E8F5E9; color: #2E7D32; }
+.status-generated { background: $fortune-1-tint; color: $mat-orange-strong; }
+.status-reviewed { background: $mat-green-tint; color: $mat-green-strong; }
 .status-rejected { background: #FDE8E8; color: $status-danger-strong-2; }
 .status-unknown { background: #ECEFF1; color: #78909C; }
 
@@ -173,7 +173,7 @@ export default {
 }
 .plan-meta-item {
   font-size: 24rpx;
-  color: #888;
+  color: $facade-text-faint;
 }
 
 /* ===== 进度 ===== */

cfc-frontend/pages/assessment/apply.vue

@@ -352,7 +352,7 @@ export default {
 <stylescoped lang="scss">
 .container {
   padding: 30rpx;
-  background: #F8F8F8;
+  background: $facade-fill-page;
   min-height: 100vh;
 }
 
@@ -400,8 +400,8 @@ export default {
 .type-item,
 .child-item {
   position: relative;
-  background: #F8F8F8;
-  border: 2rpx solid #E0E0E0;
+  background: $facade-fill-page;
+  border: 2rpx solid $facade-hairline;
   border-radius: 10rpx;
   padding: 20rpx;
   min-width: 200rpx;
@@ -411,7 +411,7 @@ export default {
 .guide-item.selected,
 .type-item.selected,
 .child-item.selected {
-  border-color: #667eea;
+  border-color: $accent-indigo;
   background: #F0F4FF;
 }
 
@@ -455,7 +455,7 @@ export default {
   right: 10rpx;
   width: 40rpx;
   height: 40rpx;
-  background: #667eea;
+  background: $accent-indigo;
   color: $app-surface;
   border-radius: 50%;
   display: flex;
@@ -487,7 +487,7 @@ export default {
   width: 60rpx;
   height: 60rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
   color: $app-surface;
   display: flex;
   align-items: center;
@@ -507,7 +507,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   height: 80rpx;
-  background: #F8F8F8;
+  background: $facade-fill-page;
   border-radius: 10rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
@@ -520,7 +520,7 @@ export default {
 }
 
 .price-info {
-  background: #F8F8F8;
+  background: $facade-fill-page;
   border-radius: 10rpx;
   padding: 20rpx;
 }
@@ -554,7 +554,7 @@ export default {
 .btn-submit {
   width: 100%;
   height: 90rpx;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, $accent-indigo 0%, $accent-indigo-deep 100%);
   color: $app-surface;
   border-radius: 45rpx;
   font-size: 32rpx;

cfc-frontend/pages/assessment/execution.vue

@@ -334,7 +334,7 @@ export default {
 }
 
 .status-icon.pending .icon-circle {
-  background: linear-gradient(135deg, #ff9800, #f57c00);
+  background: linear-gradient(135deg, $mat-orange-base, #f57c00);
 }
 
 .status-icon.ready {
@@ -342,7 +342,7 @@ export default {
 }
 
 .status-icon.ready .icon-circle {
-  background: linear-gradient(135deg, #2196f3, #1976d2);
+  background: linear-gradient(135deg, $mat-blue-base, #1976d2);
 }
 
 .status-icon.completed {
@@ -350,7 +350,7 @@ export default {
 }
 
 .status-icon.completed .icon-circle {
-  background: linear-gradient(135deg, #4caf50, #388e3c);
+  background: linear-gradient(135deg, $mat-green, #388e3c);
 }
 
 .status-text {
@@ -383,7 +383,7 @@ export default {
   top: 30rpx;
   bottom: -40rpx;
   width: 2rpx;
-  background: #e0e0e0;
+  background: $facade-hairline;
 }
 
 .timeline-item:last-child::before {
@@ -394,7 +394,7 @@ export default {
   width: 30rpx;
   height: 30rpx;
   border-radius: 50%;
-  background: #e0e0e0;
+  background: $facade-hairline;
   margin-right: 30rpx;
   flex-shrink: 0;
   z-index: 1;
@@ -413,7 +413,7 @@ export default {
 }
 
 .timeline-item.active .timeline-dot {
-  background: #4caf50;
+  background: $mat-green;
 }
 
 /* 时间线头部（图标+标题） */
@@ -436,13 +436,13 @@ export default {
 
 /* 评估师图标 */
 .assessor-icon {
-  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+  background: linear-gradient(135deg, $mat-blue-tint, #bbdefb);
 }
 .assessor-icon::after {
   content: '';
   width: 16rpx;
   height: 16rpx;
-  border: 3rpx solid #2196f3;
+  border: 3rpx solid $mat-blue-base;
   border-radius: 50%;
   position: absolute;
   top: 8rpx;
@@ -452,7 +452,7 @@ export default {
   content: '';
   width: 20rpx;
   height: 3rpx;
-  background: #2196f3;
+  background: $mat-blue-base;
   position: absolute;
   bottom: 10rpx;
   left: 8rpx;
@@ -461,13 +461,13 @@ export default {
 
 /* 规划师图标 */
 .planner-icon {
-  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
+  background: linear-gradient(135deg, $mat-green-tint, #c8e6c9);
 }
 .planner-icon::after {
   content: '';
   width: 16rpx;
   height: 16rpx;
-  border: 3rpx solid #4caf50;
+  border: 3rpx solid $mat-green;
   border-radius: 50%;
   position: absolute;
   top: 8rpx;
@@ -477,7 +477,7 @@ export default {
   content: '';
   width: 20rpx;
   height: 3rpx;
-  background: #4caf50;
+  background: $mat-green;
   position: absolute;
   bottom: 10rpx;
   left: 8rpx;
@@ -486,13 +486,13 @@ export default {
 
 /* 确认图标 */
 .confirm-icon {
-  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
+  background: linear-gradient(135deg, $fortune-1-tint, #ffe0b2);
 }
 .confirm-icon::after {
   content: '';
   width: 16rpx;
   height: 16rpx;
-  border: 3rpx solid #ff9800;
+  border: 3rpx solid $mat-orange-base;
   border-radius: 50%;
   position: absolute;
   top: 8rpx;
@@ -502,7 +502,7 @@ export default {
   content: '';
   width: 20rpx;
   height: 3rpx;
-  background: #ff9800;
+  background: $mat-orange-base;
   position: absolute;
   bottom: 10rpx;
   left: 8rpx;
@@ -583,7 +583,7 @@ export default {
 }
 
 .btn-secondary {
-  background: #ff9800;
+  background: $mat-orange-base;
   color: white;
   border: none;
 }

cfc-frontend/pages/assessment/purchase.vue

@@ -356,7 +356,7 @@ export default {
 <stylescoped lang="scss">
 .container {
   padding: 30rpx;
-  background: #F8F8F8;
+  background: $facade-fill-page;
   min-height: 100vh;
 }
 
@@ -403,14 +403,14 @@ export default {
   position: relative;
   display: flex;
   align-items: center;
-  background: #F8F8F8;
-  border: 2rpx solid #E0E0E0;
+  background: $facade-fill-page;
+  border: 2rpx solid $facade-hairline;
   border-radius: 10rpx;
   padding: 20rpx;
 }
 
 .guide-item.selected {
-  border-color: #667eea;
+  border-color: $accent-indigo;
   background: #F0F4FF;
 }
 
@@ -443,7 +443,7 @@ export default {
 .guide-check {
   width: 40rpx;
   height: 40rpx;
-  background: #667eea;
+  background: $accent-indigo;
   color: $app-surface;
   border-radius: 50%;
   display: flex;
@@ -454,14 +454,14 @@ export default {
 
 .package-item {
   position: relative;
-  background: #F8F8F8;
-  border: 2rpx solid #E0E0E0;
+  background: $facade-fill-page;
+  border: 2rpx solid $facade-hairline;
   border-radius: 10rpx;
   padding: 20rpx;
 }
 
 .package-item.selected {
-  border-color: #667eea;
+  border-color: $accent-indigo;
   background: #F0F4FF;
 }
 
@@ -511,13 +511,13 @@ export default {
 .feature-item {
   display: flex;
   align-items: center;
-  background: #E8F5E9;
+  background: $mat-green-tint;
   padding: 8rpx 12rpx;
   border-radius: 20rpx;
 }
 
 .feature-icon {
-  color: #4CAF50;
+  color: $mat-green;
   font-size: 24rpx;
   margin-right: 8rpx;
 }
@@ -533,7 +533,7 @@ export default {
   right: 20rpx;
   width: 40rpx;
   height: 40rpx;
-  background: #667eea;
+  background: $accent-indigo;
   color: $app-surface;
   border-radius: 50%;
   display: flex;
@@ -543,7 +543,7 @@ export default {
 }
 
 .price-breakdown {
-  background: #F8F8F8;
+  background: $facade-fill-page;
   border-radius: 10rpx;
   padding: 20rpx;
 }
@@ -588,7 +588,7 @@ export default {
 .btn-submit {
   width: 100%;
   height: 90rpx;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, $accent-indigo 0%, $accent-indigo-deep 100%);
   color: $app-surface;
   border-radius: 45rpx;
   font-size: 32rpx;

cfc-frontend/pages/assessment/quota.vue

@@ -100,7 +100,7 @@ export default {
 <stylescoped lang="scss">
 .container {
   padding: 30rpx;
-  background: #F8F8F8;
+  background: $facade-fill-page;
   min-height: 100vh;
 }
 .header {
@@ -146,8 +146,8 @@ export default {
   border-radius: 20rpx;
 }
 .status-tag.active {
-  background: #E8F5E9;
-  color: #2E7D32;
+  background: $mat-green-tint;
+  color: $mat-green-strong;
 }
 .status-tag.used {
   background: $facade-fill-2;
@@ -168,7 +168,7 @@ export default {
 }
 .progress-bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, #667eea, #764ba2);
+  background: linear-gradient(90deg, $accent-indigo, $accent-indigo-deep);
   border-radius: 6rpx;
 }
 .progress-text {
@@ -194,7 +194,7 @@ export default {
   color: $facade-text-strong;
 }
 .info-value.highlight {
-  color: #667eea;
+  color: $accent-indigo;
   font-weight: bold;
   font-size: 32rpx;
 }
@@ -208,7 +208,7 @@ export default {
   width: 100%;
   height: 76rpx;
   line-height: 76rpx;
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
   color: $app-surface;
   border-radius: 38rpx;
   font-size: 28rpx;
@@ -233,7 +233,7 @@ export default {
   width: 300rpx;
   height: 80rpx;
   line-height: 80rpx;
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
   color: $app-surface;
   border-radius: 40rpx;
   font-size: 28rpx;

cfc-frontend/pages/assessment/rating.vue

@@ -255,25 +255,25 @@ export default {
 }
 
 .assessor-section-icon {
-  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+  background: linear-gradient(135deg, $mat-blue-tint, #bbdefb);
 }
 .assessor-section-icon::after {
   content: '';
   width: 20rpx;
   height: 20rpx;
-  border: 4rpx solid #2196f3;
+  border: 4rpx solid $mat-blue-base;
   border-radius: 50%;
   position: absolute;
 }
 
 .planner-section-icon {
-  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
+  background: linear-gradient(135deg, $mat-green-tint, #c8e6c9);
 }
 .planner-section-icon::after {
   content: '';
   width: 20rpx;
   height: 20rpx;
-  border: 4rpx solid #4caf50;
+  border: 4rpx solid $mat-green;
   border-radius: 50%;
   position: absolute;
 }
@@ -303,7 +303,7 @@ export default {
 
 .star {
   font-size: 60rpx;
-  color: #e0e0e0;
+  color: $facade-hairline;
   transition: color 0.2s ease, text-shadow 0.2s ease;
   line-height: 1;
 }
@@ -319,7 +319,7 @@ export default {
 
 .rating-text {
   font-size: 24rpx;
-  color: #ff9800;
+  color: $mat-orange-base;
   margin-left: 16rpx;
   font-weight: bold;
 }
@@ -332,7 +332,7 @@ export default {
   width: 100%;
   min-height: 200rpx;
   padding: 20rpx;
-  border: 2rpx solid #e0e0e0;
+  border: 2rpx solid $facade-hairline;
   border-radius: 10rpx;
   font-size: 28rpx;
   box-sizing: border-box;

cfc-frontend/pages/assessment/results.vue

@@ -232,7 +232,7 @@ export default {
 <stylescoped lang="scss">
 .container {
   padding: 30rpx;
-  background: #F8F8F8;
+  background: $facade-fill-page;
   min-height: 100vh;
 }
 
@@ -272,7 +272,7 @@ export default {
 }
 
 .tab-item.active {
-  background: #667eea;
+  background: $accent-indigo;
   color: $app-surface;
 }
 
@@ -297,7 +297,7 @@ export default {
 }
 
 .report-item {
-  background: #F8F8F8;
+  background: $facade-fill-page;
   border-radius: 10rpx;
   padding: 20rpx;
 }
@@ -322,7 +322,7 @@ export default {
 
 .report-guide {
   font-size: 24rpx;
-  color: #667eea;
+  color: $accent-indigo;
 }
 
 .report-scores {
@@ -332,7 +332,7 @@ export default {
 }
 
 .score-item {
-  background: #E8F5E9;
+  background: $mat-green-tint;
   padding: 10rpx 15rpx;
   border-radius: 10rpx;
 }
@@ -453,7 +453,7 @@ export default {
 }
 
 .detail-content {
-  background: #F8F8F8;
+  background: $facade-fill-page;
   padding: 20rpx;
   border-radius: 10rpx;
 }

cfc-frontend/pages/assessment/upload-report.vue

@@ -113,7 +113,7 @@ export default {
 <stylescoped lang="scss">
 .container {
   padding: 30rpx;
-  background: #F8F8F8;
+  background: $facade-fill-page;
   min-height: 100vh;
 }
 .header {
@@ -150,15 +150,15 @@ export default {
 }
 .child-item {
   position: relative;
-  background: #F8F8F8;
-  border: 2rpx solid #E0E0E0;
+  background: $facade-fill-page;
+  border: 2rpx solid $facade-hairline;
   border-radius: 10rpx;
   padding: 20rpx;
   min-width: 160rpx;
   text-align: center;
 }
 .child-item.selected {
-  border-color: #667eea;
+  border-color: $accent-indigo;
   background: #F0F4FF;
 }
 .child-name {
@@ -171,7 +171,7 @@ export default {
   right: -8rpx;
   width: 36rpx;
   height: 36rpx;
-  background: #667eea;
+  background: $accent-indigo;
   color: $app-surface;
   border-radius: 50%;
   line-height: 36rpx;
@@ -184,7 +184,7 @@ export default {
   justify-content: center;
   gap: 16rpx;
   height: 160rpx;
-  background: #F8F8F8;
+  background: $facade-fill-page;
   border: 2rpx dashed $facade-text-ghost;
   border-radius: 12rpx;
 }
@@ -198,7 +198,7 @@ export default {
 .textarea {
   width: 100%;
   height: 160rpx;
-  background: #F8F8F8;
+  background: $facade-fill-page;
   border-radius: 10rpx;
   padding: 20rpx;
   font-size: 28rpx;
@@ -208,7 +208,7 @@ export default {
   width: 100%;
   height: 88rpx;
   line-height: 88rpx;
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
   color: $app-surface;
   border-radius: 44rpx;
   font-size: 30rpx;

cfc-frontend/pages/butler/apply.vue

@@ -110,7 +110,7 @@ export default {
 <style lang="scss">
 .container {
   padding: 30rpx;
-  background: #f8f8f8;
+  background: $facade-fill-page;
   min-height: 100vh;
 }
 .header {
@@ -146,7 +146,7 @@ export default {
 .input {
   width: 100%;
   height: 80rpx;
-  border: 1rpx solid #e0e0e0;
+  border: 1rpx solid $facade-hairline;
   border-radius: 10rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
@@ -155,7 +155,7 @@ export default {
 .picker {
   width: 100%;
   height: 80rpx;
-  border: 1rpx solid #e0e0e0;
+  border: 1rpx solid $facade-hairline;
   border-radius: 10rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
@@ -174,7 +174,7 @@ export default {
 .textarea {
   width: 100%;
   height: 200rpx;
-  border: 1rpx solid #e0e0e0;
+  border: 1rpx solid $facade-hairline;
   border-radius: 10rpx;
   padding: 20rpx;
   font-size: 28rpx;
@@ -190,7 +190,7 @@ export default {
 .btn-submit {
   width: 100%;
   height: 90rpx;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, $accent-indigo 0%, $accent-indigo-deep 100%);
   color: $app-surface;
   border-radius: 45rpx;
   font-size: 32rpx;

cfc-frontend/pages/butler/select.vue

@@ -140,7 +140,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.select-page { min-height: 100vh; background: #f5fafe; padding: 24rpx; box-sizing: border-box; display: flex; flex-direction: column; }
+.select-page { min-height: 100vh; background: $facade-fill-blue-ghost; padding: 24rpx; box-sizing: border-box; display: flex; flex-direction: column; }
 .status-card { background: $app-surface; border-radius: 20rpx; padding: 32rpx; margin-bottom: 24rpx; }
 .current-label { font-size: 24rpx; color: $facade-text-muted; margin-bottom: 16rpx; }
 .current-row { display: flex; align-items: center; }
@@ -161,7 +161,7 @@ export default {
 .card-top { display: flex; align-items: center; justify-content: space-between; }
 .card-name { font-size: 30rpx; font-weight: bold; color: $facade-text-strong; }
 .card-slots { font-size: 22rpx; color: $status-success; }
-.card-desc { display: block; font-size: 24rpx; color: #888; margin-top: 8rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.card-desc { display: block; font-size: 24rpx; color: $facade-text-faint; margin-top: 8rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .btn-select { width: 120rpx; height: 60rpx; line-height: 60rpx; padding: 0; font-size: 26rpx; background: $brand-primary; color: $app-surface; border-radius: 30rpx; flex-shrink: 0; margin-left: 16rpx; }
 .btn-select[disabled] { background: $facade-text-ghost; color: $app-surface; }
 .empty-tip { text-align: center; color: $facade-text-muted; font-size: 26rpx; padding: 60rpx 0; }

cfc-frontend/pages/child/tasks.vue

@@ -382,7 +382,7 @@ export default {
    ============================================= */
 .page-bg {
   min-height: 100vh;
-  background: var(--bg, #F5F9FC);
+  background: var(--bg, $uni-bg-color);
   padding-bottom: 40rpx;
 }
 
@@ -397,7 +397,7 @@ export default {
   padding: 24rpx;
   margin: 24rpx 32rpx 0;
   background: var(--surface, $app-surface);
-  border: 2rpx solid var(--border, #CBD5E1);
+  border: 2rpx solid var(--border, $uni-border-color);
   border-radius: var(--radius-lg, 32rpx);
   box-shadow: var(--shadow-sm);
 }
@@ -413,7 +413,7 @@ export default {
 
 .exit-switch__text {
   font-size: 28rpx;
-  color: var(--text-secondary, #64748B);
+  color: var(--text-secondary, $uni-text-color-secondary);
   font-weight: var(--font-weight-medium, 500);
 }
 
@@ -456,7 +456,7 @@ export default {
 .tab-item__label {
   font-size: 26rpx;
   font-weight: var(--font-weight-medium, 500);
-  color: var(--text-secondary, #64748B);
+  color: var(--text-secondary, $uni-text-color-secondary);
   transition: color var(--transition-fast, 0.15s ease);
 }
 
@@ -510,8 +510,8 @@ export default {
 /* --- 已完成状态 --- */
 .task-card--completed {
   opacity: 0.7;
-  border-color: var(--color-success, #22C55E);
-  background: linear-gradient(145deg, #F0FDF4, #ECFDF5);
+  border-color: var(--color-success, $status-success-2);
+  background: linear-gradient(145deg, $status-success-tint-2, #ECFDF5);
   box-shadow: inset -2rpx -2rpx 6rpx rgba(34, 197, 94, 0.05),
     3rpx 3rpx 10rpx rgba(34, 197, 94, 0.08);
 }
@@ -519,7 +519,7 @@ export default {
 /* --- 超时状态 --- */
 .task-card--overdue {
   border-color: var(--color-error, $status-danger);
-  background: linear-gradient(145deg, #FEF2F2, #FEE2E2);
+  background: linear-gradient(145deg, #FEF2F2, $status-danger-soft);
   box-shadow: inset -2rpx -2rpx 6rpx rgba(239, 68, 68, 0.05),
     3rpx 3rpx 10rpx rgba(239, 68, 68, 0.08);
 }
@@ -561,16 +561,16 @@ export default {
   width: 88rpx;
   height: 88rpx;
   border-radius: var(--radius-md, 20rpx);
-  background: linear-gradient(145deg, #F5F9FC, #E2E8F0);
+  background: linear-gradient(145deg, $uni-bg-color, $uni-border-color-light);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  border: 2rpx solid var(--border-light, #E2E8F0);
+  border: 2rpx solid var(--border-light, $uni-border-color-light);
 }
 
 .task-card--completed .task-icon {
-  background: linear-gradient(145deg, #F0FDF4, #DCFCE7);
+  background: linear-gradient(145deg, $status-success-tint-2, $status-success-soft-2);
   border-color: #BBF7D0;
 }
 
@@ -595,7 +595,7 @@ export default {
 .task-title {
   font-size: 32rpx;
   font-weight: var(--font-weight-bold, 600);
-  color: var(--text, #1E293B);
+  color: var(--text, $uni-text-color);
   line-height: 1.4;
   margin-bottom: 10rpx;
   overflow: hidden;
@@ -605,7 +605,7 @@ export default {
 
 .task-card--completed .task-title {
   text-decoration: line-through;
-  color: var(--text-secondary, #64748B);
+  color: var(--text-secondary, $uni-text-color-secondary);
 }
 
 .task-meta {
@@ -623,7 +623,7 @@ export default {
 
 .task-time {
   font-size: 22rpx;
-  color: var(--text-secondary, #64748B);
+  color: var(--text-secondary, $uni-text-color-secondary);
   line-height: 1.4;
 }
 
@@ -654,7 +654,7 @@ export default {
 
 .status-badge--completed {
   background: rgba(34, 197, 94, 0.12);
-  color: var(--color-success, #22C55E);
+  color: var(--color-success, $status-success-2);
   border: 2rpx solid rgba(34, 197, 94, 0.2);
 }
 

cfc-frontend/pages/cognitive-hall.vue

@@ -160,7 +160,7 @@ export default {
 // ===== 页面级局部调色板（单页专有色阶；同值才映射全局令牌，约定见 uni.scss §14） =====
 $c-text-ghost-3: #AAA;
 $c-border-hair:  $facade-hairline-2;      // 发丝分隔线
-$c-ink-night:    #1A1A2E;   // 深夜蓝黑（本页深色文字）
+$c-ink-night:    $app-ink-night;   // 深夜蓝黑（本页深色文字）
 
 .page {
   min-height: 100vh;

cfc-frontend/pages/cognitive-test/language-test.vue

@@ -245,7 +245,7 @@ export default {
 <stylescoped lang="scss">
 .test-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  background: linear-gradient(135deg, $app-ink-night 0%, #16213e 100%);
   padding: 60rpx 40rpx;
   box-sizing: border-box;
 }
@@ -285,8 +285,8 @@ export default {
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, #F59E0B, #FBBF24);
-  color: #1a1a2e;
+  background: linear-gradient(135deg, $dim-wealth, #FBBF24);
+  color: $app-ink-night;
   font-size: 34rpx;
   font-weight: bold;
   width: 480rpx;
@@ -342,7 +342,7 @@ export default {
 
 .timer-fill {
   height: 100%;
-  background: linear-gradient(90deg, #F59E0B, #FBBF24);
+  background: linear-gradient(90deg, $dim-wealth, #FBBF24);
   border-radius: 8rpx;
   transition: width 0.9s linear;
 }
@@ -350,7 +350,7 @@ export default {
 .timer-text {
   display: block;
   font-size: 26rpx;
-  color: #F59E0B;
+  color: $dim-wealth;
   margin-top: 12rpx;
   text-align: center;
 }
@@ -420,7 +420,7 @@ export default {
   width: 260rpx;
   height: 260rpx;
   border-radius: 50%;
-  border: 10rpx solid #F59E0B;
+  border: 10rpx solid $dim-wealth;
   background: rgba(245,158,11,0.1);
   margin-bottom: 36rpx;
 }
@@ -428,7 +428,7 @@ export default {
 .score-num {
   font-size: 88rpx;
   font-weight: bold;
-  color: #F59E0B;
+  color: $dim-wealth;
 }
 
 .score-row {
@@ -445,8 +445,8 @@ export default {
 
 .dimension-tag {
   font-size: 24rpx;
-  color: #F59E0B;
-  border: 2rpx solid #F59E0B;
+  color: $dim-wealth;
+  border: 2rpx solid $dim-wealth;
   border-radius: 24rpx;
   padding: 6rpx 24rpx;
 }

cfc-frontend/pages/cognitive-test/logic-test.vue

@@ -270,7 +270,7 @@ export default {
 <stylescoped lang="scss">
 .container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  background: linear-gradient(135deg, $app-ink-night 0%, #16213e 100%);
   padding: 60rpx 40rpx;
   box-sizing: border-box;
 }
@@ -287,7 +287,7 @@ export default {
   height: 160rpx;
   border-radius: 50%;
   background: rgba(255, 215, 0, 0.15);
-  border: 3rpx solid #FFD700;
+  border: 3rpx solid $accent-gold;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -299,7 +299,7 @@ export default {
 .intro-title {
   font-size: 44rpx;
   font-weight: bold;
-  color: #FFD700;
+  color: $accent-gold;
   margin-bottom: 16rpx;
   display: block;
 }
@@ -332,7 +332,7 @@ export default {
 }
 .info-value {
   font-size: 26rpx;
-  color: #FFD700;
+  color: $accent-gold;
   font-weight: bold;
 }
 
@@ -350,7 +350,7 @@ export default {
 }
 .quiz-timer {
   font-size: 30rpx;
-  color: #FFD700;
+  color: $accent-gold;
   font-weight: bold;
 }
 .timer-track {
@@ -362,7 +362,7 @@ export default {
 }
 .timer-fill {
   height: 100%;
-  background: linear-gradient(90deg, #FFD700, #FFA500);
+  background: linear-gradient(90deg, $accent-gold, #FFA500);
   border-radius: 6rpx;
   transition: width 0.1s linear;
 }
@@ -398,7 +398,7 @@ export default {
   margin-bottom: 0;
 }
 .q-option--selected {
-  border-color: #FFD700;
+  border-color: $accent-gold;
   background: rgba(255, 215, 0, 0.12);
 }
 .q-option:active {
@@ -410,7 +410,7 @@ export default {
   font-weight: bold;
 }
 .q-option--selected .q-option-text {
-  color: #FFD700;
+  color: $accent-gold;
 }
 
 /* ===== 结果页 ===== */
@@ -424,7 +424,7 @@ export default {
   width: 240rpx;
   height: 240rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #FFD700, #FFA500);
+  background: linear-gradient(135deg, $accent-gold, #FFA500);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -434,11 +434,11 @@ export default {
 .score-value {
   font-size: 80rpx;
   font-weight: bold;
-  color: #1a1a2e;
+  color: $app-ink-night;
 }
 .score-label {
   font-size: 30rpx;
-  color: #FFD700;
+  color: $accent-gold;
   margin-bottom: 50rpx;
   display: block;
 }
@@ -471,12 +471,12 @@ export default {
 .dim-tag {
   padding: 6rpx 24rpx;
   border-radius: 24rpx;
-  border: 3rpx solid #FFD700;
+  border: 3rpx solid $accent-gold;
   background: rgba(255, 215, 0, 0.12);
 }
 .dim-tag-text {
   font-size: 24rpx;
-  color: #FFD700;
+  color: $accent-gold;
   font-weight: bold;
 }
 
@@ -495,16 +495,16 @@ export default {
   margin-bottom: 0;
 }
 .btn--primary {
-  background: linear-gradient(135deg, #FFD700, #FFA500);
-  color: #1a1a2e;
+  background: linear-gradient(135deg, $accent-gold, #FFA500);
+  color: $app-ink-night;
 }
 .btn--primary:active {
   opacity: 0.9;
   transform: scale(0.98);
 }
 .btn--outline {
-  border: 3rpx solid #FFD700;
-  color: #FFD700;
+  border: 3rpx solid $accent-gold;
+  color: $accent-gold;
   background: transparent;
 }
 .btn--outline:active {

cfc-frontend/pages/cognitive-test/memory-test.vue

@@ -305,7 +305,7 @@ export default {
 <stylescoped lang="scss">
 .page {
   min-height: 100vh;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  background: linear-gradient(135deg, $app-ink-night 0%, #16213e 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -320,7 +320,7 @@ export default {
   height: 96rpx;
   line-height: 96rpx;
   border-radius: 48rpx;
-  background: linear-gradient(135deg, $dim-wisdom 0%, #818cf8 100%);
+  background: linear-gradient(135deg, $dim-wisdom 0%, $dim-wisdom-light 100%);
   color: $app-surface;
   font-size: 34rpx;
   font-weight: 600;
@@ -333,7 +333,7 @@ export default {
 .primary-btn[disabled] {
   opacity: 0.6;
   color: $app-surface;
-  background: linear-gradient(135deg, $dim-wisdom 0%, #818cf8 100%);
+  background: linear-gradient(135deg, $dim-wisdom 0%, $dim-wisdom-light 100%);
 }
 
 .ghost-btn {
@@ -435,7 +435,7 @@ export default {
 .progress-fill {
   height: 100%;
   border-radius: 4rpx;
-  background: linear-gradient(90deg, $dim-wisdom, #818cf8);
+  background: linear-gradient(90deg, $dim-wisdom, $dim-wisdom-light);
   transition: width 0.3s ease;
 }
 
@@ -484,7 +484,7 @@ export default {
 .timer-bar {
   height: 100%;
   border-radius: 6rpx;
-  background: linear-gradient(90deg, $dim-wisdom, #818cf8);
+  background: linear-gradient(90deg, $dim-wisdom, $dim-wisdom-light);
   transition: width 0.05s linear;
 }
 
@@ -613,7 +613,7 @@ export default {
   width: 280rpx;
   height: 280rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, $dim-wisdom 0%, #818cf8 100%);
+  background: linear-gradient(135deg, $dim-wisdom 0%, $dim-wisdom-light 100%);
   display: flex;
   flex-direction: column;
   align-items: center;

cfc-frontend/pages/cognitive-test/perception-test.vue

@@ -244,7 +244,7 @@ export default {
 <stylescoped lang="scss">
 .test-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  background: linear-gradient(135deg, $app-ink-night 0%, #16213e 100%);
   padding: 60rpx 40rpx;
 }
 

cfc-frontend/pages/cognitive-test/spatial-test.vue

@@ -274,7 +274,7 @@ export default {
 <stylescoped lang="scss">
 .page {
   min-height: 100vh;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  background: linear-gradient(135deg, $app-ink-night 0%, #16213e 100%);
   padding: 60rpx 40rpx;
   box-sizing: border-box;
 }
@@ -300,7 +300,7 @@ export default {
 }
 .hero-symbol {
   font-size: 80rpx;
-  color: #3B82F6;
+  color: $status-info;
   line-height: 1;
 }
 .hero-title {
@@ -336,7 +336,7 @@ export default {
   width: 12rpx;
   height: 12rpx;
   border-radius: 50%;
-  background: #3B82F6;
+  background: $status-info;
   margin-right: 16rpx;
 }
 .rule-text {
@@ -371,7 +371,7 @@ export default {
 }
 .timer-bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, #3B82F6, #60A5FA);
+  background: linear-gradient(90deg, $status-info, #60A5FA);
   border-radius: 6rpx;
   transition: width 1s linear;
 }
@@ -419,7 +419,7 @@ export default {
   box-sizing: border-box;
 }
 .option-selected {
-  border-color: #3B82F6;
+  border-color: $status-info;
   background: rgba(59, 130, 246, 0.2);
 }
 .option-arrow {
@@ -433,7 +433,7 @@ export default {
   font-size: 30rpx;
 }
 .feedback-correct {
-  color: #34D399;
+  color: $status-success-light-3;
 }
 .feedback-wrong {
   color: #F87171;
@@ -453,7 +453,7 @@ export default {
   width: 280rpx;
   height: 280rpx;
   border-radius: 50%;
-  border: 10rpx solid #3B82F6;
+  border: 10rpx solid $status-info;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -502,13 +502,13 @@ export default {
   border: none;
 }
 .btn-primary {
-  background: #3B82F6;
+  background: $status-info;
   color: $app-surface;
 }
 .btn-secondary {
   background: transparent;
-  border: 2rpx solid #3B82F6;
-  color: #3B82F6;
+  border: 2rpx solid $status-info;
+  color: $status-info;
   box-sizing: border-box;
 }
 </style>

cfc-frontend/pages/cognitive-test/speed-test.vue

@@ -322,7 +322,7 @@ export default {
 <stylescoped lang="scss">
 .page-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  background: linear-gradient(135deg, $app-ink-night 0%, #16213e 100%);
   padding: 40rpx 50rpx;
 }
 
@@ -493,7 +493,7 @@ export default {
 
 .choice-cell.cell-hit {
   background: #1e3a2f;
-  border-color: #22c55e;
+  border-color: $status-success-2;
   box-shadow: 0 0 30rpx rgba(34, 197, 94, 0.3);
 }
 

cfc-frontend/pages/dan-assessment/comparison.vue

@@ -157,7 +157,7 @@ export default {
 <stylescoped lang="scss">
 .page {
   min-height: 100vh;
-  background: #F5F9FC;
+  background: $uni-bg-color;
   padding: 24rpx;
   box-sizing: border-box;
 }
@@ -169,27 +169,27 @@ export default {
 .filter-item {
   flex: 1;
   background: $app-surface;
-  border: 1rpx solid #E2E8F0;
+  border: 1rpx solid $uni-border-color-light;
   border-radius: 16rpx;
   padding: 16rpx 24rpx;
   margin-right: 16rpx;
   font-size: 26rpx;
-  color: #1E293B;
+  color: $uni-text-color;
   text-align: center;
 }
 .filter-item:last-child { margin-right: 0; }
 
 /* 对比区 */
 .comparison-wrap { background: $app-surface; border-radius: 20rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 4rpx 16rpx rgba(30,41,59,0.06); }
-.section-title { font-size: 30rpx; font-weight: 600; color: #1E293B; margin-bottom: 20rpx; }
+.section-title { font-size: 30rpx; font-weight: 600; color: $uni-text-color; margin-bottom: 20rpx; }
 .info-item { display: flex; align-items: center; margin-bottom: 16rpx; }
-.label { font-size: 24rpx; color: #64748B; margin-right: 12rpx; }
-.value { font-size: 24rpx; color: #1E293B; }
+.label { font-size: 24rpx; color: $uni-text-color-secondary; margin-right: 12rpx; }
+.value { font-size: 24rpx; color: $uni-text-color; }
 .deltas-list { margin-top: 24rpx; }
-.delta-item { padding: 12rpx 0; border-bottom: 1rpx solid #E2E8F0; display: flex; align-items: center; }
-.delta-code { flex: 1; font-size: 24rpx; color: #64748B; }
+.delta-item { padding: 12rpx 0; border-bottom: 1rpx solid $uni-border-color-light; display: flex; align-items: center; }
+.delta-code { flex: 1; font-size: 24rpx; color: $uni-text-color-secondary; }
 .delta-added { color: #32CD32; }
 .delta-removed { color: #FF6B6B; }
 .delta-modified { color: #FFA500; }
-.empty-tip { padding: 60rpx 0; text-align: center; font-size: 26rpx; color: #94A3B8; }
+.empty-tip { padding: 60rpx 0; text-align: center; font-size: 26rpx; color: $app-text-subtle; }
 </style>

cfc-frontend/pages/dan-assessment/report-result.vue

@@ -642,7 +642,7 @@ export default {
 /* ==================== Hero ==================== */
 .hero {
   position: relative;
-  background: linear-gradient(160deg, #4F46E5 0%, #7C3AED 55%, #8B5CF6 100%);
+  background: linear-gradient(160deg, #4F46E5 0%, #7C3AED 55%, $facade-violet 100%);
   padding: 48rpx 36rpx 44rpx;
   overflow: hidden;
   border-bottom-left-radius: 36rpx;
@@ -709,24 +709,24 @@ export default {
 .card-title-row { display: flex; align-items: baseline; margin-bottom: 24rpx; }
 .card-title-bar {
   width: 8rpx; height: 30rpx; border-radius: 4rpx;
-  background: linear-gradient(180deg, $dim-wisdom, #8B5CF6);
+  background: linear-gradient(180deg, $dim-wisdom, $facade-violet);
   margin-right: 12rpx; align-self: center;
 }
-.card-title-bar-gold { background: linear-gradient(180deg, #F59E0B, $brand-primary); }
-.card-title { font-size: 30rpx; font-weight: 600; color: #1F2937; }
-.card-title-sub { font-size: 22rpx; color: #9CA3AF; margin-left: 14rpx; }
+.card-title-bar-gold { background: linear-gradient(180deg, $dim-wealth, $brand-primary); }
+.card-title { font-size: 30rpx; font-weight: 600; color: $facade-text-gray-800; }
+.card-title-sub { font-size: 22rpx; color: $facade-text-gray-400; margin-left: 14rpx; }
 
 /* ==================== 指标条 ==================== */
 .metric-row { margin-bottom: 26rpx; }
 .metric-row:last-child { margin-bottom: 4rpx; }
 .metric-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rpx; }
-.metric-name { font-size: 26rpx; color: #374151; font-weight: 500; }
+.metric-name { font-size: 26rpx; color: $facade-text-gray-700; font-weight: 500; }
 .metric-value-wrap { display: flex; align-items: center; }
 .metric-value { font-size: 30rpx; font-weight: 700; color: #4F46E5; }
-.metric-value-warn { color: #EA580C; }
+.metric-value-warn { color: $brand-primary-dark; }
 .metric-unit { font-size: 20rpx; font-weight: 400; }
 .metric-warn-badge {
-  font-size: 20rpx; color: #EA580C;
+  font-size: 20rpx; color: $brand-primary-dark;
   background: $uni-primary-pale; border: 1rpx solid #FDBA74;
   border-radius: 16rpx; padding: 2rpx 12rpx; margin-right: 10rpx;
 }
@@ -734,8 +734,8 @@ export default {
   position: relative; height: 16rpx; border-radius: 8rpx; background: #EEF0F6;
 }
 .metric-fill { height: 100%; border-radius: 8rpx; }
-.metric-fill-main { background: linear-gradient(90deg, #818CF8, $dim-wisdom); }
-.metric-fill-warn { background: linear-gradient(90deg, #FDBA74, #EA580C); }
+.metric-fill-main { background: linear-gradient(90deg, $dim-wisdom-light, $dim-wisdom); }
+.metric-fill-warn { background: linear-gradient(90deg, #FDBA74, $brand-primary-dark); }
 .metric-ref-line {
   position: absolute; top: -4rpx; width: 2rpx; height: 24rpx;
   background: #C7C9D9; border-radius: 1rpx;
@@ -751,18 +751,18 @@ export default {
 .bf-row { margin-bottom: 24rpx; }
 .bf-row:last-child { margin-bottom: 4rpx; }
 .bf-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10rpx; }
-.bf-name { font-size: 26rpx; color: #374151; font-weight: 500; }
+.bf-name { font-size: 26rpx; color: $facade-text-gray-700; font-weight: 500; }
 .bf-value { font-size: 30rpx; font-weight: 700; color: #7C3AED; }
 .bf-track { position: relative; height: 14rpx; border-radius: 7rpx; background: #F0ECFA; }
 .bf-fill { height: 100%; border-radius: 7rpx; }
-.bf-neutral { background: linear-gradient(90deg, #C4B5FD, #8B5CF6); }
+.bf-neutral { background: linear-gradient(90deg, #C4B5FD, $facade-violet); }
 .bf-high { background: linear-gradient(90deg, #6EE7B7, $status-success); }
-.bf-low { background: linear-gradient(90deg, #FCD34D, #F59E0B); }
+.bf-low { background: linear-gradient(90deg, #FCD34D, $dim-wealth); }
 .bf-avg-line {
   position: absolute; top: -5rpx; left: 60%; width: 2rpx; height: 24rpx;
-  background: #9CA3AF; border-radius: 1rpx;
+  background: $facade-text-gray-400; border-radius: 1rpx;
 }
-.bf-hint { display: block; font-size: 20rpx; color: #9CA3AF; margin-top: 6rpx; }
+.bf-hint { display: block; font-size: 20rpx; color: $facade-text-gray-400; margin-top: 6rpx; }
 
 /* ==================== 情绪状态 ==================== */
 .emo-row { display: flex; align-items: center; margin-bottom: 20rpx; }
@@ -803,7 +803,7 @@ export default {
   border-bottom: 1rpx solid #F1F2F7;
 }
 .habit-row:last-child { border-bottom: none; }
-.habit-name { font-size: 26rpx; color: #374151; }
+.habit-name { font-size: 26rpx; color: $facade-text-gray-700; }
 .habit-value { font-size: 26rpx; color: #4F46E5; font-weight: 600; }
 
 /* ==================== 基本信息 ==================== */
@@ -812,9 +812,9 @@ export default {
   width: 33.33%; display: flex; flex-direction: column; align-items: center;
   margin-bottom: 16rpx;
 }
-.info-value { font-size: 36rpx; font-weight: 700; color: #1F2937; }
-.info-unit { font-size: 20rpx; font-weight: 400; color: #9CA3AF; margin-left: 4rpx; }
-.info-name { font-size: 22rpx; color: #9CA3AF; margin-top: 6rpx; }
+.info-value { font-size: 36rpx; font-weight: 700; color: $facade-text-gray-800; }
+.info-unit { font-size: 20rpx; font-weight: 400; color: $facade-text-gray-400; margin-left: 4rpx; }
+.info-name { font-size: 22rpx; color: $facade-text-gray-400; margin-top: 6rpx; }
 
 /* ==================== 成长建议/评语 ==================== */
 .advice-content {

cfc-frontend/pages/diet/food-query.vue

@@ -419,7 +419,7 @@ export default {
 .food-query-page {
   height: 100vh;
   overflow: hidden;
-  background-color: #F5F7FA;
+  background-color: $app-bg;
   display: flex;
   flex-direction: column;
 }
@@ -444,7 +444,7 @@ export default {
   font-weight: 500;
 }
 .member-tab.active {
-  background: linear-gradient(135deg, $dim-body, #FFB366);
+  background: linear-gradient(135deg, $dim-body, $dim-body-light);
   color: $app-surface;
 }
 
@@ -466,7 +466,7 @@ export default {
   font-size: 26rpx;
 }
 .mode-btn.active {
-  background: linear-gradient(135deg, $status-success, #34D399);
+  background: linear-gradient(135deg, $status-success, $status-success-light-3);
   color: $app-surface;
 }
 
@@ -537,9 +537,9 @@ export default {
   background-color: $app-surface;
 }
 .filter-active {
-  border-color: #4CAF50;
-  color: #4CAF50;
-  background-color: #E8F5E9;
+  border-color: $mat-green;
+  color: $mat-green;
+  background-color: $mat-green-tint;
 }
 
 /* 家庭总览 */
@@ -592,11 +592,11 @@ export default {
 }
 .score-green {
   color: $status-success;
-  background: #E8F5E9;
+  background: $mat-green-tint;
 }
 .score-red {
   color: $status-danger;
-  background: #FEE2E2;
+  background: $status-danger-soft;
 }
 
 /* 食材列表 */
@@ -626,7 +626,7 @@ export default {
   width: 36rpx;
   height: 36rpx;
   border-radius: 10rpx;
-  background: linear-gradient(135deg, $dim-body, #FFB366);
+  background: linear-gradient(135deg, $dim-body, $dim-body-light);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -634,10 +634,10 @@ export default {
   flex-shrink: 0;
 }
 .ingredient-badge.good {
-  background: linear-gradient(135deg, $status-success, #34D399);
+  background: linear-gradient(135deg, $status-success, $status-success-light-3);
 }
 .ingredient-badge.bad {
-  background: linear-gradient(135deg, $status-danger, #DC2626);
+  background: linear-gradient(135deg, $status-danger, $status-danger-deep);
 }
 .ingredient-badge-text {
   font-size: 18rpx;
@@ -669,7 +669,7 @@ export default {
 .meta-item {
   flex-shrink: 0;
   font-size: 20rpx;
-  color: #888;
+  color: $facade-text-faint;
   background: $facade-fill-2;
   padding: 4rpx 14rpx;
   border-radius: 8rpx;
@@ -695,11 +695,11 @@ export default {
   font-weight: 500;
 }
 .badge-suitable {
-  background: #E8F5E9;
-  color: #4CAF50;
+  background: $mat-green-tint;
+  color: $mat-green;
 }
 .badge-unsuitable {
-  background: #FFEBEE;
+  background: $fortune-0-tint;
   color: #F44336;
 }
 

cfc-frontend/pages/diet/index.vue

@@ -409,7 +409,7 @@ export default {
   overflow: hidden;
 }
 .dining-hero {
-  background: linear-gradient(135deg, $dim-body, #FFB366);
+  background: linear-gradient(135deg, $dim-body, $dim-body-light);
   border-radius: 32rpx;
   padding: 36rpx 32rpx;
   margin-bottom: 24rpx;
@@ -440,7 +440,7 @@ export default {
 .hero-empty { display: flex; flex-direction: column; align-items: center; padding: 12rpx 0; }
 .hero-empty-text { font-size: 26rpx; color: $app-surface; margin-bottom: 20rpx; }
 .hero-empty-btn {
-  background: $app-surface; color: #C2410C; font-size: 28rpx; font-weight: 600;
+  background: $app-surface; color: $brand-primary-deep; font-size: 28rpx; font-weight: 600;
   padding: 18rpx 44rpx; border-radius: 999rpx;
 }
 .content {
@@ -467,7 +467,7 @@ export default {
 }
 .card-basket-icon {
   width: 64rpx; height: 64rpx; border-radius: 18rpx;
-  background: linear-gradient(135deg, $dim-body, #FFB366);
+  background: linear-gradient(135deg, $dim-body, $dim-body-light);
   display: flex; align-items: center; justify-content: center;
   margin-right: 16rpx; flex-shrink: 0;
 }
@@ -500,7 +500,7 @@ export default {
 .action-btn-primary {
   background: $dim-body;
 }
-.action-btn-accent { background: linear-gradient(135deg, $status-success, #34D399); }
+.action-btn-accent { background: linear-gradient(135deg, $status-success, $status-success-light-3); }
 .action-btn-text-accent { font-size: 24rpx; color: $app-surface; }
 .action-btn-disabled {
   opacity: 0.4;
@@ -538,7 +538,7 @@ export default {
   width: 40rpx;
   height: 40rpx;
   border-radius: 12rpx;
-  background: linear-gradient(135deg, $dim-body, #FFB366);
+  background: linear-gradient(135deg, $dim-body, $dim-body-light);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -622,7 +622,7 @@ export default {
 }
 .nav-icon-green { background: linear-gradient(135deg, #FFF1E6, #FFE0C0); }
 .nav-icon-blue  { background: linear-gradient(135deg, $uni-primary-pale, #FFEEDD); }
-.nav-icon-orange{ background: linear-gradient(135deg, $dim-body, #FFB366); }
+.nav-icon-orange{ background: linear-gradient(135deg, $dim-body, $dim-body-light); }
 .nav-icon-purple{ background: linear-gradient(135deg, #FFE8D6, #FFD4B0); }
 .nav-icon-red   { background: linear-gradient(135deg, #E8F8F1, #C8F0E0); }
 .nav-item:active .nav-icon-wrap { transform: scale(0.92); }
@@ -748,7 +748,7 @@ export default {
   border-radius: 40rpx;
   padding: 20rpx 28rpx;
   font-size: 28rpx;
-  background: #F8F8F8;
+  background: $facade-fill-page;
 }
 .food-list {
   max-height: 500rpx;

cfc-frontend/pages/diet/meal-config.vue

@@ -210,7 +210,7 @@ export default {
 .meal-config-page {
   box-sizing: border-box;
   min-height: 100vh;
-  background: #F5F9FC;
+  background: $uni-bg-color;
   overflow: hidden;
 }
 .content {
@@ -220,12 +220,12 @@ export default {
   overflow: hidden;
 }
 .date-tabs {
-  display: flex; background: #E2E8F0; border-radius: 999rpx;
+  display: flex; background: $uni-border-color-light; border-radius: 999rpx;
   padding: 6rpx; margin-bottom: 30rpx;
 }
 .tab-item {
   flex: 1; text-align: center; padding: 18rpx 0;
-  border-radius: 999rpx; font-size: 28rpx; color: #64748B;
+  border-radius: 999rpx; font-size: 28rpx; color: $uni-text-color-secondary;
   transition: color 0.2s ease, background-color 0.2s ease, font-weight 0.2s ease;
 }
 .tab-active {
@@ -244,7 +244,7 @@ export default {
   display: flex;
   align-items: center;
   padding: 24rpx 30rpx;
-  border-bottom: 1rpx solid #E2E8F0;
+  border-bottom: 1rpx solid $uni-border-color-light;
 }
 .meal-icon-wrap { width: 72rpx; height: 72rpx; border-radius: 22rpx; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; }
 .meal-icon-breakfast { background: linear-gradient(135deg, #38BDF8, #BAE6FD); }
@@ -254,7 +254,7 @@ export default {
 .meal-name {
   font-size: 28rpx;
   font-weight: 600;
-  color: #1E293B;
+  color: $uni-text-color;
 }
 .member-list {
   display: flex;
@@ -265,7 +265,7 @@ export default {
 .member-item {
   box-sizing: border-box; position: relative;
   display: flex; align-items: center;
-  padding: 16rpx 24rpx; border: 2rpx solid #E2E8F0; border-radius: 20rpx;
+  padding: 16rpx 24rpx; border: 2rpx solid $uni-border-color-light; border-radius: 20rpx;
   background: $app-surface; min-width: 160rpx;
   transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -302,10 +302,10 @@ export default {
 }
 .member-avatar-male   { background: linear-gradient(135deg, $brand-primary, $brand-primary-light); }
 .member-avatar-female { background: linear-gradient(135deg, #F472B6, #F9A8D4); }
-.member-avatar-unknown{ background: linear-gradient(135deg, #CBD5E1, #E2E8F0); }
+.member-avatar-unknown{ background: linear-gradient(135deg, $uni-border-color, $uni-border-color-light); }
 .member-name {
   font-size: 24rpx;
-  color: #64748B;
+  color: $uni-text-color-secondary;
   max-width: 80rpx;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -325,7 +325,7 @@ export default {
 }
 .member-empty-text {
   font-size: 24rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
 }
 .add-member-entry {
   box-sizing: border-box;

cfc-frontend/pages/diet/preferences.vue

@@ -389,7 +389,7 @@ export default {
   height: 12rpx; background: #FFE3C7; border-radius: 6rpx; overflow: hidden;
 }
 .progress-fill {
-  height: 100%; background: linear-gradient(90deg, $dim-body, #FFB366);
+  height: 100%; background: linear-gradient(90deg, $dim-body, $dim-body-light);
   border-radius: 6rpx; transition: width 0.3s ease;
 }
 .progress-labels { display: flex; justify-content: space-between; margin-top: 12rpx; }
@@ -456,6 +456,6 @@ export default {
   background: #F5F0EA; color: #6B5340; margin-right: 20rpx;
 }
 .footer-btn-primary {
-  background: linear-gradient(135deg, $dim-body, #FFB366); color: $app-surface;
+  background: linear-gradient(135deg, $dim-body, $dim-body-light); color: $app-surface;
 }
 </style>

cfc-frontend/pages/diet/recommendation.vue

@@ -259,7 +259,7 @@ export default {
 <stylescoped lang="scss">
 .recommendation-page {
   min-height: 100vh;
-  background-color: #F5F7FA;
+  background-color: $app-bg;
   display: flex;
   flex-direction: column;
 }
@@ -273,7 +273,7 @@ export default {
 .empty-state { display: flex; flex-direction: column; align-items: center; padding: 120rpx 40rpx; }
 .empty-icon-wrap {
   width: 160rpx; height: 160rpx; border-radius: 50%;
-  background: linear-gradient(135deg, $dim-body, #FFB366);
+  background: linear-gradient(135deg, $dim-body, $dim-body-light);
   display: flex; align-items: center; justify-content: center;
   box-shadow: 0 10rpx 30rpx rgba(255, 140, 66, 0.3);
   margin-bottom: 40rpx;
@@ -282,7 +282,7 @@ export default {
 .empty-title { font-size: calc(34rpx * var(--font-scale, 1)); font-weight: 700; color: $facade-text-strong; display: block; margin-bottom: 16rpx; }
 .empty-sub { font-size: calc(26rpx * var(--font-scale, 1)); color: $facade-text-muted; display: block; margin-bottom: 48rpx; }
 .generate-btn {
-  background: linear-gradient(135deg, $dim-body, #FFB366);
+  background: linear-gradient(135deg, $dim-body, $dim-body-light);
   color: $app-surface; padding: 28rpx 60rpx; border-radius: 999rpx;
   font-size: 30rpx; font-weight: 600;
   box-shadow: 0 6rpx 20rpx rgba(255, 140, 66, 0.25);
@@ -295,7 +295,7 @@ export default {
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
   overflow: hidden;
 }
-.card-accent { width: 8rpx; background: linear-gradient(180deg, $dim-body, #FFB366); flex-shrink: 0; }
+.card-accent { width: 8rpx; background: linear-gradient(180deg, $dim-body, $dim-body-light); flex-shrink: 0; }
 .card-body {
   flex: 1;
   padding: 30rpx;
@@ -322,14 +322,14 @@ export default {
   border-radius: 20rpx;
   font-size: 24rpx;
 }
-.status-pending { background: #FFF1E6; color: #C2410C; }
+.status-pending { background: #FFF1E6; color: $brand-primary-deep; }
 .status-accepted {
   background: #E8F1FB;
-  color: #2196F3;
+  color: $mat-blue-base;
 }
 .status-completed {
-  background-color: #E8F5E9;
-  color: #4CAF50;
+  background-color: $mat-green-tint;
+  color: $mat-green;
 }
 .meal-section {
   background-color: $app-surface;
@@ -340,7 +340,7 @@ export default {
 }
 .meal-header { display: flex; align-items: center; padding: 24rpx 30rpx; border-bottom: 1rpx solid #FDE8D0; }
 .meal-icon-wrap { width: 64rpx; height: 64rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; margin-right: 16rpx; }
-.meal-icon-breakfast { background: linear-gradient(135deg, #FFB366, #FFD48A); }
+.meal-icon-breakfast { background: linear-gradient(135deg, $dim-body-light, #FFD48A); }
 .meal-icon-lunch     { background: linear-gradient(135deg, #FBBF24, #FCD34D); }
 .meal-icon-dinner    { background: linear-gradient(135deg, #A78BFA, #C4B5FD); }
 .meal-icon {
@@ -368,7 +368,7 @@ export default {
   margin-bottom: 12rpx;
 }
 .dish-name { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; }
-.dish-cal { font-size: calc(24rpx * var(--font-scale, 1)); color: #C2410C; font-weight: 600; }
+.dish-cal { font-size: calc(24rpx * var(--font-scale, 1)); color: $brand-primary-deep; font-weight: 600; }
 .dish-ingredients {
   display: flex;
   flex-wrap: wrap;
@@ -391,9 +391,9 @@ export default {
 }
 .dish-actions { display: flex; gap: 16rpx; margin-top: 8rpx; }
 .action-btn { padding: 12rpx 26rpx; border-radius: 999rpx; font-size: 24rpx; }
-.like-btn { background: #E8F5E9; color: #4CAF50; }
-.swap-btn { background: #E8F1FB; color: #2196F3; }
-.skip-btn { background: #FFEBEE; color: #F44336; }
+.like-btn { background: $mat-green-tint; color: $mat-green; }
+.swap-btn { background: #E8F1FB; color: $mat-blue-base; }
+.skip-btn { background: $fortune-0-tint; color: #F44336; }
 .nutrition-grid {
   display: flex;
   justify-content: space-around;
@@ -402,7 +402,7 @@ export default {
   text-align: center;
 }
 .nutrition-card .card-body { background: #FFF9F0; border-radius: 0 0 20rpx 20rpx; }
-.nutrition-value { font-size: 40rpx; font-weight: 700; color: #C2410C; display: block; }
+.nutrition-value { font-size: 40rpx; font-weight: 700; color: $brand-primary-deep; display: block; }
 .nutrition-unit {
   font-size: calc(22rpx * var(--font-scale, 1));
   color: $facade-text-muted;
@@ -423,11 +423,11 @@ export default {
 .btn-secondary {
   flex: 1; padding: 28rpx 0; background: $app-surface;
   border: 2rpx solid $dim-body; border-radius: 999rpx;
-  text-align: center; font-size: 28rpx; color: #C2410C;
+  text-align: center; font-size: 28rpx; color: $brand-primary-deep;
 }
 .btn-primary {
   flex: 1; padding: 28rpx 0;
-  background: linear-gradient(135deg, $dim-body, #FFB366);
+  background: linear-gradient(135deg, $dim-body, $dim-body-light);
   border-radius: 999rpx; text-align: center;
   font-size: 28rpx; color: $app-surface; font-weight: 600;
   box-shadow: 0 6rpx 20rpx rgba(255, 140, 66, 0.25);

cfc-frontend/pages/diet/record-detail.vue

@@ -174,7 +174,7 @@ export default {
 <stylescoped lang="scss">
 .record-detail-page {
   min-height: 100vh;
-  background-color: #F5F7FA;
+  background-color: $app-bg;
   display: flex;
   flex-direction: column;
 }
@@ -259,13 +259,13 @@ export default {
 }
 .confidence-bar {
   height: 8rpx;
-  background-color: #2196F3;
+  background-color: $mat-blue-base;
   border-radius: 4rpx;
   flex: 1;
 }
 .confidence-text {
   font-size: 22rpx;
-  color: #2196F3;
+  color: $mat-blue-base;
   white-space: nowrap;
 }
 .food-tags {
@@ -298,7 +298,7 @@ export default {
 .btn-delete {
   flex: 1;
   padding: 28rpx 0;
-  background-color: #FFF3E0;
+  background-color: $fortune-1-tint;
   border-radius: 16rpx;
   text-align: center;
   font-size: 28rpx;

cfc-frontend/pages/diet/records.vue

@@ -386,7 +386,7 @@ export default {
   flex-shrink: 0; padding: 8rpx 20rpx; border-radius: 20rpx; background: $facade-fill-2; color: $facade-text-body;
   font-size: 26rpx; font-weight: 500;
 }
-.member-tab.active { background: linear-gradient(135deg, $dim-body, #FFB366); color: $app-surface; }
+.member-tab.active { background: linear-gradient(135deg, $dim-body, $dim-body-light); color: $app-surface; }
 
 /* 周历条 */
 .week-strip {
@@ -398,7 +398,7 @@ export default {
   padding: 8rpx 12rpx; border-radius: 16rpx; min-width: 68rpx;
 }
 .week-day-today .week-day-label { color: $dim-body; font-weight: 700; }
-.week-day-active { background: linear-gradient(135deg, $dim-body, #FFB366); }
+.week-day-active { background: linear-gradient(135deg, $dim-body, $dim-body-light); }
 .week-day-active .week-day-label,
 .week-day-active .week-day-num { color: $app-surface; }
 .week-day-has .week-dot-wrap { margin-top: 6rpx; }
@@ -406,7 +406,7 @@ export default {
 .week-day-num { font-size: 28rpx; font-weight: 600; color: $facade-text-strong; }
 .week-dot-wrap { display: flex; align-items: center; gap: 6rpx; }
 .week-dot { width: 10rpx; height: 10rpx; border-radius: 50%; background: $dim-body; }
-.week-day-count { font-size: 18rpx; color: #C2410C; }
+.week-day-count { font-size: 18rpx; color: $brand-primary-deep; }
 
 /* 内容区 */
 .content { flex: 1; padding: 24rpx 24rpx 180rpx; overflow-y: auto; }
@@ -416,7 +416,7 @@ export default {
   display: flex; background: $app-surface; border-radius: 20rpx; margin-bottom: 24rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05); overflow: hidden;
 }
-.card-accent { width: 8rpx; background: linear-gradient(180deg, $dim-body, #FFB366); flex-shrink: 0; }
+.card-accent { width: 8rpx; background: linear-gradient(180deg, $dim-body, $dim-body-light); flex-shrink: 0; }
 .card-body { flex: 1; padding: 24rpx 28rpx; }
 .card-title { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; margin-bottom: 16rpx; display: block; }
 
@@ -432,19 +432,19 @@ export default {
   background: $app-surface; border-radius: 20rpx; margin-bottom: 24rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05); overflow: hidden;
 }
-.alert-header { display: flex; align-items: center; gap: 12rpx; padding: 24rpx 28rpx 16rpx; border-bottom: 1rpx solid #FFF3E0; }
+.alert-header { display: flex; align-items: center; gap: 12rpx; padding: 24rpx 28rpx 16rpx; border-bottom: 1rpx solid $fortune-1-tint; }
 .alert-icon { font-size: 36rpx; }
 .alert-title { font-size: 28rpx; font-weight: 600; color: $facade-text-strong; }
 .alert-section { padding: 16rpx 28rpx; }
 .alert-label { font-size: 24rpx; font-weight: 600; display: block; margin-bottom: 12rpx; }
 .alert-label.over { color: $status-danger-strong-2; }
-.alert-label.under { color: #1565C0; }
+.alert-label.under { color: $mat-blue-strong; }
 .alert-tags { display: flex; flex-wrap: wrap; gap: 12rpx; }
 .alert-tag { display: flex; align-items: center; gap: 6rpx; padding: 8rpx 16rpx; border-radius: 20rpx; font-size: 24rpx; }
-.tag-over { background: #FFEBEE; color: $status-danger-strong-2; }
-.tag-under { background: #E3F2FD; color: #1565C0; }
+.tag-over { background: $fortune-0-tint; color: $status-danger-strong-2; }
+.tag-under { background: $mat-blue-tint; color: $mat-blue-strong; }
 .tag-count { font-size: 20rpx; opacity: 0.8; }
-.alert-hint { font-size: 22rpx; color: #888; margin-top: 8rpx; display: block; }
+.alert-hint { font-size: 22rpx; color: $facade-text-faint; margin-top: 8rpx; display: block; }
 
 /* 高频食材 */
 .top-foods-list { display: flex; flex-direction: column; gap: 12rpx; }
@@ -476,19 +476,19 @@ export default {
 }
 .record-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx; }
 .meal-badge { padding: 6rpx 18rpx; border-radius: 20rpx; font-size: 24rpx; font-weight: 600; }
-.meal-breakfast { background: #FFF3E0; color: #E65100; }
+.meal-breakfast { background: $fortune-1-tint; color: $mat-orange-strong; }
 .meal-lunch     { background: #FFF8E1; color: #F57C00; }
 .meal-dinner    { background: #F3E5F5; color: #7B1FA2; }
-.meal-snack     { background: #E8F5E9; color: #2E7D32; }
+.meal-snack     { background: $mat-green-tint; color: $mat-green-strong; }
 .record-meta { display: flex; align-items: center; gap: 12rpx; }
 .record-time { font-size: 24rpx; color: $facade-text-muted; }
-.record-backfill { font-size: 20rpx; padding: 2rpx 10rpx; background: #FFF3E0; color: #E65100; border-radius: 8rpx; }
+.record-backfill { font-size: 20rpx; padding: 2rpx 10rpx; background: $fortune-1-tint; color: $mat-orange-strong; border-radius: 8rpx; }
 .record-body { margin-bottom: 8rpx; }
 .record-foods { font-size: calc(26rpx * var(--font-scale, 1)); color: $facade-text-strong; line-height: 1.5; }
 .record-footer { display: flex; gap: 20rpx; margin-bottom: 6rpx; }
 .record-cal { font-size: 22rpx; color: $dim-body; font-weight: 600; }
 .record-nut { font-size: 22rpx; color: $facade-text-muted; }
-.record-remark { font-size: 24rpx; color: #888; font-style: italic; }
+.record-remark { font-size: 24rpx; color: $facade-text-faint; font-style: italic; }
 
 /* 空态 */
 .empty-state { text-align: center; padding: 80rpx 40rpx; }
@@ -502,7 +502,7 @@ export default {
 /* 浮动按钮 */
 .fab {
   position: fixed; right: 40rpx; bottom: 60rpx; width: 100rpx; height: 100rpx;
-  background: linear-gradient(135deg, $dim-body, #FFB366); border-radius: 50%;
+  background: linear-gradient(135deg, $dim-body, $dim-body-light); border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   box-shadow: 0 4rpx 20rpx rgba(255,140,66,0.4);
 }

cfc-frontend/pages/discover-detail/product-detail/product-detail.vue

@@ -889,7 +889,7 @@ export default {
   font-size: 22rpx;
   color: $brand-primary;
   background: $uni-primary-pale;
-  border: 1rpx solid #FED7AA;
+  border: 1rpx solid $brand-primary-light-2;
   padding: 2rpx 10rpx;
   border-radius: 6rpx;
   font-weight: normal;
@@ -924,7 +924,7 @@ export default {
   padding: 6rpx 16rpx;
   font-size: 22rpx;
   color: #b8860b;
-  background: #fff7e6;
+  background: $brand-primary-tint-2;
   border: 1rpx solid #f0d9a8;
   border-radius: 8rpx;
 }
@@ -1056,7 +1056,7 @@ export default {
   display: inline-block;
   margin-left: 20rpx;
   font-size: 24rpx;
-  color: #0EA5E9;
+  color: $uni-info;
   text-decoration: underline;
 }
 /* CF值提示 */

cfc-frontend/pages/discover/circle-feed.vue

@@ -468,7 +468,7 @@ export default {
 <stylescoped lang="scss">
 .feed-page {
   min-height: 100vh;
-  background: #F5F7FA;
+  background: $app-bg;
 }
 .nav-bar {
   display: flex;
@@ -511,7 +511,7 @@ export default {
   width: 72rpx;
   height: 72rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, $dim-body, #FFB366);
+  background: linear-gradient(135deg, $dim-body, $dim-body-light);
   color: $app-surface;
   font-size: calc(32rpx * var(--font-scale, 1));
   font-weight: 700;
@@ -567,7 +567,7 @@ export default {
   width: 56rpx;
   height: 56rpx;
   border-radius: 50%;
-  background: #E3F2FD;
+  background: $mat-blue-tint;
   color: #1976D2;
   font-size: calc(24rpx * var(--font-scale, 1));
   font-weight: 700;
@@ -624,7 +624,7 @@ export default {
   width: 40rpx;
   height: 40rpx;
   border-radius: 50%;
-  background: #E3F2FD;
+  background: $mat-blue-tint;
   margin-right: 10rpx;
   flex-shrink: 0;
 }
@@ -704,7 +704,7 @@ export default {
 .post-textarea {
   width: 100%;
   height: 200rpx;
-  background: #F8F8F8;
+  background: $facade-fill-page;
   border-radius: 16rpx;
   padding: 20rpx;
   font-size: calc(28rpx * var(--font-scale, 1));
@@ -713,7 +713,7 @@ export default {
 }
 .modal-footer { margin-top: 20rpx; }
 .btn-publish {
-  background: linear-gradient(135deg, $dim-body, #FFB366);
+  background: linear-gradient(135deg, $dim-body, $dim-body-light);
   color: $app-surface;
   border: none;
   border-radius: 40rpx;
@@ -736,7 +736,7 @@ export default {
   width: 56rpx;
   height: 56rpx;
   border-radius: 50%;
-  background: #E3F2FD;
+  background: $mat-blue-tint;
   color: #1976D2;
   font-size: calc(24rpx * var(--font-scale, 1));
   font-weight: 700;

cfc-frontend/pages/discover/circles.vue

@@ -441,7 +441,7 @@ export default {
 }
 .circle-edit-text {
   font-size: 20rpx;
-  color: #FF9800;
+  color: $mat-orange-base;
   margin-top: 4rpx;
 }
 /* 编辑圈子弹窗 */
@@ -527,11 +527,11 @@ export default {
   color: $facade-text-muted;
 }
 .cond-active {
-  background: #FFF3E0;
-  border: 1rpx solid #FF9800;
+  background: $fortune-1-tint;
+  border: 1rpx solid $mat-orange-base;
 }
 .cond-active .cond-opt-text {
-  color: #FF9800;
+  color: $mat-orange-base;
   font-weight: 600;
 }
 .modal-footer {
@@ -541,7 +541,7 @@ export default {
   width: 100%;
   height: 80rpx;
   line-height: 80rpx;
-  background: #FF9800;
+  background: $mat-orange-base;
   color: $app-surface;
   font-size: 30rpx;
   border-radius: 40rpx;
@@ -612,7 +612,7 @@ export default {
   margin-left: 12rpx;
 }
 .approve-btn {
-  background: #FF9800;
+  background: $mat-orange-base;
   border-radius: 30rpx;
   padding: 10rpx 26rpx;
   margin-right: 12rpx;

cfc-frontend/pages/discover/create-circle.vue

@@ -127,7 +127,7 @@ export default {
 </script>
 
 <stylescoped lang="scss">
-.create-circle-page { min-height: 100vh; background: #F5F7FA; padding-bottom: 160rpx; }
+.create-circle-page { min-height: 100vh; background: $app-bg; padding-bottom: 160rpx; }
 .nav-bar {
   display: flex; align-items: center; justify-content: space-between;
   height: 88rpx; padding-top: env(safe-area-inset-top);
@@ -178,7 +178,7 @@ export default {
   background: $app-surface; border-top: 1rpx solid $facade-fill;
 }
 .btn-create {
-  background: linear-gradient(135deg, $dim-body, #FFB366);
+  background: linear-gradient(135deg, $dim-body, $dim-body-light);
   color: $app-surface; border: none; border-radius: 40rpx;
   font-size: 30rpx; font-weight: 600; padding: 24rpx 0;
 }

cfc-frontend/pages/discover/index.vue

@@ -247,7 +247,7 @@ export default {
 <style scoped lang="scss">
 .discover-container {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
   padding-bottom: 100rpx;
 }
 

cfc-frontend/pages/energy/detail.vue

@@ -165,11 +165,11 @@ export default {
   margin-bottom: 16rpx;
   box-shadow: 0 0 40rpx rgba(255,255,255,0.15);
 }
-.dim-icon--fire { background: linear-gradient(135deg, #FF6B35, #E65100); }
-.dim-icon--water { background: linear-gradient(135deg, #42A5F5, #1565C0); }
+.dim-icon--fire { background: linear-gradient(135deg, #FF6B35, $mat-orange-strong); }
+.dim-icon--water { background: linear-gradient(135deg, #42A5F5, $mat-blue-strong); }
 .dim-icon--earth { background: linear-gradient(135deg, #8D6E63, #5D4037); }
-.dim-icon--metal { background: linear-gradient(135deg, #FFD700, #FF8F00); }
-.dim-icon--wood { background: linear-gradient(135deg, #4CAF50, #2E7D32); }
+.dim-icon--metal { background: linear-gradient(135deg, $accent-gold, #FF8F00); }
+.dim-icon--wood { background: linear-gradient(135deg, $mat-green, $mat-green-strong); }
 .dim-icon { font-size: 44rpx; }
 .dim-name { font-size: 36rpx; font-weight: bold; color: $app-surface; }
 .dim-element { font-size: 22rpx; color: rgba(143,197,232,0.5); margin-top: 6rpx; }
@@ -200,7 +200,7 @@ export default {
 }
 .log-left { display: flex; flex-direction: column; }
 .log-amount { font-size: 32rpx; font-weight: bold; }
-.log-amount.earn { color: #4CAF50; }
+.log-amount.earn { color: $mat-green; }
 .log-amount.spend { color: #FF6B35; }
 .log-desc { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; }
 .log-right { display: flex; flex-direction: column; align-items: flex-end; }

cfc-frontend/pages/family/address-edit.vue

@@ -152,7 +152,7 @@ export default {
   margin-top: 40rpx;
   width: 100%;
   height: 88rpx;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, $accent-indigo 0%, $accent-indigo-deep 100%);
   color: $app-surface;
   border-radius: 44rpx;
   font-size: 32rpx;

cfc-frontend/pages/family/manual-score-entry.vue

@@ -102,7 +102,7 @@ export default {
 </script>
 
 <stylescoped lang="scss">
-.mse-page { min-height: 100vh; background: #F5FAFE; padding: 24rpx 30rpx 120rpx; box-sizing: border-box }
+.mse-page { min-height: 100vh; background: $facade-fill-blue-ghost; padding: 24rpx 30rpx 120rpx; box-sizing: border-box }
 .mse-loading { display: flex; justify-content: center; align-items: center; height: 50vh }
 .mse-loading-text { font-size: 28rpx; color: $facade-text-muted }
 .mse-hero { text-align: center; padding: 40rpx 0 20rpx }
@@ -116,8 +116,8 @@ export default {
 .mse-member-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-bottom: 12rpx }
 .mse-member-name { font-size: 26rpx; font-weight: 500; color: $facade-text-strong; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
 .mse-member-role { font-size: 20rpx; padding: 2rpx 10rpx; border-radius: 10rpx; display: inline-block }
-.role-parent { background: $uni-primary-pale; color: #E65100 }
-.role-child { background: #E8F5E9; color: #2E7D32 }
+.role-parent { background: $uni-primary-pale; color: $mat-orange-strong }
+.role-child { background: $mat-green-tint; color: $mat-green-strong }
 .role-teacher { background: #E0E7FF; color: #3730A3 }
 .mse-member-check { margin-top: 8rpx; font-size: 24rpx; color: $brand-primary }
 .mse-slider-item { margin-bottom: 28rpx }

cfc-frontend/pages/family/mbti-entry.vue

@@ -72,7 +72,7 @@ export default {
 </script>
 
 <stylescoped lang="scss">
-.mbe-page { min-height: 100vh; background: #F5FAFE; padding: 24rpx 30rpx 120rpx; box-sizing: border-box }
+.mbe-page { min-height: 100vh; background: $facade-fill-blue-ghost; padding: 24rpx 30rpx 120rpx; box-sizing: border-box }
 .mbe-loading { display: flex; justify-content: center; align-items: center; height: 50vh }
 .mbe-loading-text { font-size: 28rpx; color: $facade-text-muted }
 .mbe-hero { text-align: center; padding: 40rpx 0 10rpx }
@@ -86,12 +86,12 @@ export default {
 .mbe-member-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-bottom: 12rpx }
 .mbe-member-name { font-size: 26rpx; font-weight: 500; color: $facade-text-strong; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
 .mbe-member-role { font-size: 20rpx; padding: 2rpx 10rpx; border-radius: 10rpx; display: inline-block }
-.role-parent { background: $uni-primary-pale; color: #E65100 }
-.role-child { background: #E8F5E9; color: #2E7D32 }
+.role-parent { background: $uni-primary-pale; color: $mat-orange-strong }
+.role-child { background: $mat-green-tint; color: $mat-green-strong }
 .role-teacher { background: #E0E7FF; color: #3730A3 }
 .mbe-member-check { margin-top: 8rpx; font-size: 24rpx; color: $dim-wisdom }
 .mbe-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 20rpx 30rpx; background: $app-surface; border-top: 1rpx solid $facade-fill; box-sizing: border-box }
 .mbe-btn { width: 100%; height: 88rpx; line-height: 88rpx; font-size: 30rpx; border-radius: 44rpx; border: none; text-align: center }
-.mbe-btn-primary { background: linear-gradient(135deg, $dim-wisdom, #818CF8); color: $app-surface; font-weight: 600 }
+.mbe-btn-primary { background: linear-gradient(135deg, $dim-wisdom, $dim-wisdom-light); color: $app-surface; font-weight: 600 }
 .mbe-tip { display: block; text-align: center; margin-top: 16rpx; font-size: 22rpx; color: $facade-text-muted }
 </style>

cfc-frontend/pages/family/mbti-profile.vue

@@ -96,7 +96,7 @@ export default {
 </script>
 
 <stylescoped lang="scss">
-.mbp-page { min-height: 100vh; background: #F5FAFE; padding: 24rpx 30rpx 120rpx; box-sizing: border-box }
+.mbp-page { min-height: 100vh; background: $facade-fill-blue-ghost; padding: 24rpx 30rpx 120rpx; box-sizing: border-box }
 .mbp-header { text-align: center; padding: 20rpx 0 10rpx }
 .mbp-title { font-size: 32rpx; font-weight: 600; color: $facade-text-strong; display: block }
 .mbp-subtitle { font-size: 22rpx; color: $facade-text-muted; display: block; margin-top: 4rpx }
@@ -109,15 +109,15 @@ export default {
 .mbp-card-tag { font-size: 20rpx; color: $app-surface; padding: 2rpx 10rpx; border-radius: 10rpx }
 .mbp-drawer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 100; display: flex; align-items: flex-end }
 .mbp-drawer-content { width: 100%; max-height: 80vh; background: $app-surface; border-radius: 24rpx 24rpx 0 0; display: flex; flex-direction: column }
-.mbp-drawer-header { padding: 30rpx 20rpx; background: linear-gradient(135deg, $dim-wisdom, #818CF8); color: $app-surface; display: flex; flex-direction: column; align-items: center }
+.mbp-drawer-header { padding: 30rpx 20rpx; background: linear-gradient(135deg, $dim-wisdom, $dim-wisdom-light); color: $app-surface; display: flex; flex-direction: column; align-items: center }
 .mbp-drawer-code { font-size: 60rpx; font-weight: 700; letter-spacing: 8rpx }
 .mbp-drawer-name { font-size: 28rpx; opacity: 0.9; margin-top: 4rpx }
 .mbp-drawer-body { flex: 1; overflow-y: auto; padding: 20rpx }
 .mbp-drawer-section { margin-bottom: 24rpx }
 .mbp-drawer-label { display: block; font-size: 22rpx; color: $facade-text-muted; font-weight: 600; margin-bottom: 8rpx }
 .mbp-drawer-value { font-size: 24rpx; color: $facade-text-strong; line-height: 1.6 }
-.mbp-energy-mini { display: flex; flex-direction: column; gap: 8rpx; margin-top: 8rpx; padding: 16rpx; background: #F5FAFE; border-radius: 12rpx }
+.mbp-energy-mini { display: flex; flex-direction: column; gap: 8rpx; margin-top: 8rpx; padding: 16rpx; background: $facade-fill-blue-ghost; border-radius: 12rpx }
 .mbp-energy-dim { font-size: 24rpx; font-weight: 600 }
-.mbp-energy-sug { font-size: 24rpx; color: #555; line-height: 1.5 }
-.mbp-drawer-close { margin: 20rpx; height: 88rpx; line-height: 88rpx; font-size: 30rpx; border-radius: 44rpx; background: linear-gradient(135deg, $dim-wisdom, #818CF8); color: $app-surface; font-weight: 600; border: none; text-align: center }
+.mbp-energy-sug { font-size: 24rpx; color: $facade-text-deep; line-height: 1.5 }
+.mbp-drawer-close { margin: 20rpx; height: 88rpx; line-height: 88rpx; font-size: 30rpx; border-radius: 44rpx; background: linear-gradient(135deg, $dim-wisdom, $dim-wisdom-light); color: $app-surface; font-weight: 600; border: none; text-align: center }
 </style>

cfc-frontend/pages/family/mbti-result.vue

@@ -161,9 +161,9 @@ export default {
 </script>
 
 <stylescoped lang="scss">
-.mbr-page { min-height: 100vh; background: #F5FAFE; padding: 24rpx 30rpx 120rpx; box-sizing: border-box }
+.mbr-page { min-height: 100vh; background: $facade-fill-blue-ghost; padding: 24rpx 30rpx 120rpx; box-sizing: border-box }
 .mbr-loading { display: flex; justify-content: center; align-items: center; height: 50vh }
-.mbr-hero { border-radius: 24rpx; padding: 40rpx 30rpx; margin-bottom: 24rpx; background: linear-gradient(135deg, $dim-wisdom, #818CF8); box-shadow: 0 6rpx 20rpx rgba(99,102,241,0.25) }
+.mbr-hero { border-radius: 24rpx; padding: 40rpx 30rpx; margin-bottom: 24rpx; background: linear-gradient(135deg, $dim-wisdom, $dim-wisdom-light); box-shadow: 0 6rpx 20rpx rgba(99,102,241,0.25) }
 .mbr-hero-inner { display: flex; flex-direction: column; align-items: center }
 .mbr-type-code { font-size: 88rpx; font-weight: 700; color: $app-surface; letter-spacing: 8rpx }
 .mbr-type-name { font-size: 32rpx; color: rgba(255,255,255,0.9); margin-top: 8rpx }
@@ -178,13 +178,13 @@ export default {
 .mbr-profile-label { display: block; font-size: 24rpx; color: $facade-text-muted; margin-bottom: 8rpx }
 .mbr-profile-value { font-size: 26rpx; color: $facade-text-strong; line-height: 1.5 }
 .mbr-energy-list { display: flex; flex-direction: column; gap: 16rpx }
-.mbr-energy-item { padding: 20rpx; background: #F5FAFE; border-radius: 16rpx }
+.mbr-energy-item { padding: 20rpx; background: $facade-fill-blue-ghost; border-radius: 16rpx }
 .mbr-energy-head { display: flex; align-items: center; margin-bottom: 8rpx }
 .mbr-energy-dot { width: 16rpx; height: 16rpx; border-radius: 50%; margin-right: 10rpx }
 .mbr-energy-label { font-size: 26rpx; font-weight: 600 }
-.mbr-energy-text { font-size: 24rpx; color: #555; line-height: 1.5 }
+.mbr-energy-text { font-size: 24rpx; color: $facade-text-deep; line-height: 1.5 }
 .mbr-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 20rpx 30rpx; background: $app-surface; border-top: 1rpx solid $facade-fill; display: flex; gap: 20rpx; box-sizing: border-box }
 .mbr-btn { flex: 1; height: 88rpx; line-height: 88rpx; font-size: 30rpx; border-radius: 44rpx; border: none; text-align: center }
-.mbr-btn-primary { background: linear-gradient(135deg, $dim-wisdom, #818CF8); color: $app-surface; font-weight: 600 }
+.mbr-btn-primary { background: linear-gradient(135deg, $dim-wisdom, $dim-wisdom-light); color: $app-surface; font-weight: 600 }
 .mbr-btn-outline { background: $app-surface; color: $dim-wisdom; border: 2rpx solid $dim-wisdom }
 </style>

cfc-frontend/pages/family/mbti-test.vue

@@ -105,7 +105,7 @@ export default {
 </script>
 
 <stylescoped lang="scss">
-.mbt-page { min-height: 100vh; background: #F5FAFE; padding-bottom: 180rpx }
+.mbt-page { min-height: 100vh; background: $facade-fill-blue-ghost; padding-bottom: 180rpx }
 .mbt-header { padding: 20rpx 30rpx; text-align: right }
 .mbt-progress-text { font-size: 24rpx; color: $facade-text-muted }
 .mbt-progress-bar { height: 6rpx; background: #E0E7FF; margin: 0 30rpx; border-radius: 3rpx; overflow: hidden }
@@ -123,5 +123,5 @@ export default {
 .mbt-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 20rpx 30rpx; background: $app-surface; border-top: 1rpx solid $facade-fill; display: flex; gap: 20rpx; box-sizing: border-box }
 .mbt-btn { flex: 1; height: 88rpx; line-height: 88rpx; font-size: 30rpx; border-radius: 44rpx; border: none; text-align: center }
 .mbt-btn-prev { background: $app-surface; color: $dim-wisdom; border: 2rpx solid $dim-wisdom }
-.mbt-btn-next { background: linear-gradient(135deg, $dim-wisdom, #818CF8); color: $app-surface; font-weight: 600 }
+.mbt-btn-next { background: linear-gradient(135deg, $dim-wisdom, $dim-wisdom-light); color: $app-surface; font-weight: 600 }
 </style>

cfc-frontend/pages/family/self-check-ai.vue

@@ -240,7 +240,7 @@ export default {
 <stylescoped lang="scss">
 .sc-page {
   min-height: 100vh;
-  background: #F5FAFE;
+  background: $facade-fill-blue-ghost;
   padding: 24rpx 30rpx 120rpx;
   box-sizing: border-box;
 }
@@ -251,7 +251,7 @@ export default {
 }
 .sc-hero-badge {
   display: inline-block;
-  background: linear-gradient(135deg, $dim-wisdom, #8B5CF6);
+  background: linear-gradient(135deg, $dim-wisdom, $facade-violet);
   color: $app-surface;
   font-size: 22rpx;
   padding: 6rpx 16rpx;
@@ -282,7 +282,7 @@ export default {
 .sc-loading-spinner {
   width: 60rpx;
   height: 60rpx;
-  border: 4rpx solid #E5E7EB;
+  border: 4rpx solid $facade-gray-200;
   border-top-color: $dim-wisdom;
   border-radius: 50%;
   animation: spin 1s linear infinite;
@@ -358,7 +358,7 @@ export default {
   width: 12rpx;
   height: 12rpx;
   border-radius: 50%;
-  background: #E5E7EB;
+  background: $facade-gray-200;
   margin: 0 4rpx;
 }
 .sc-dim-nav-dot-mini.done {
@@ -383,14 +383,14 @@ export default {
 }
 .sc-progress-bar {
   height: 10rpx;
-  background: #E5E7EB;
+  background: $facade-gray-200;
   border-radius: 5rpx;
   margin-bottom: 30rpx;
   overflow: hidden;
 }
 .sc-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, $dim-wisdom, #8B5CF6);
+  background: linear-gradient(90deg, $dim-wisdom, $facade-violet);
   border-radius: 5rpx;
   transition: width 0.3s ease;
 }
@@ -431,7 +431,7 @@ export default {
 .sc-question {
   background: $app-surface;
   padding: 24rpx 28rpx;
-  border-bottom: 1rpx solid #F3F4F6;
+  border-bottom: 1rpx solid $facade-fill-gray-100;
 }
 .sc-question:last-child {
   border-radius: 0 0 16rpx 16rpx;
@@ -476,7 +476,7 @@ export default {
 }
 .sc-opt-label {
   font-size: 26rpx;
-  color: #374151;
+  color: $facade-text-gray-700;
   flex: 1;
 }
 .sc-opt-radio {
@@ -518,7 +518,7 @@ export default {
   width: 100%;
   height: 88rpx;
   line-height: 88rpx;
-  background: linear-gradient(135deg, $dim-wisdom, #8B5CF6);
+  background: linear-gradient(135deg, $dim-wisdom, $facade-violet);
   color: $app-surface;
   font-size: 32rpx;
   font-weight: 600;

cfc-frontend/pages/family/self-check-entry.vue

@@ -185,7 +185,7 @@ export default {
 <stylescoped lang="scss">
 .sce-page {
   min-height: 100vh;
-  background: #F5FAFE;
+  background: $facade-fill-blue-ghost;
   padding: 24rpx 30rpx 120rpx;
   box-sizing: border-box;
 }
@@ -315,7 +315,7 @@ export default {
 }
 .sce-status-text {
   font-size: 26rpx;
-  color: #E65100;
+  color: $mat-orange-strong;
 }
 .sce-footer {
   display: flex;
@@ -345,7 +345,7 @@ export default {
   border: 2rpx solid $brand-primary;
 }
 .sce-btn-disabled {
-  background: #E5E7EB;
+  background: $facade-gray-200;
   color: $facade-text-muted;
   font-weight: 400;
 }
@@ -375,7 +375,7 @@ export default {
 .sce-trend-insight {
   display: block;
   font-size: 26rpx;
-  color: #555;
+  color: $facade-text-deep;
   line-height: 1.6;
 }
 .sce-info-text {

cfc-frontend/pages/family/self-check-result.vue

@@ -326,7 +326,7 @@ export default {
 <stylescoped lang="scss">
 .scr-page {
   min-height: 100vh;
-  background: #F5FAFE;
+  background: $facade-fill-blue-ghost;
   padding: 24rpx 30rpx 120rpx;
   box-sizing: border-box;
 }
@@ -381,8 +381,8 @@ export default {
   font-weight: 600;
   background: rgba(255, 255, 255, 0.92);
 }
-.scr-hero-level.level-healthy { color: #2E7D32; }
-.scr-hero-level.level-attention { color: #E65100; }
+.scr-hero-level.level-healthy { color: $mat-green-strong; }
+.scr-hero-level.level-attention { color: $mat-orange-strong; }
 .scr-hero-level.level-tense { color: $status-danger-strong-2; }
 .scr-hero-date {
   display: block;
@@ -488,9 +488,9 @@ export default {
   margin-right: 14rpx;
   flex-shrink: 0;
 }
-.scr-dim-level.lvl-healthy { background: #E8F5E9; color: #2E7D32; }
+.scr-dim-level.lvl-healthy { background: $mat-green-tint; color: $mat-green-strong; }
 .scr-dim-level.lvl-attention { background: #FFF8E1; color: #F57F17; }
-.scr-dim-level.lvl-tense { background: #FFEBEE; color: $status-danger-strong-2; }
+.scr-dim-level.lvl-tense { background: $fortune-0-tint; color: $status-danger-strong-2; }
 .scr-guide {
   background: $uni-primary-pale;
   border-radius: 24rpx;
@@ -510,7 +510,7 @@ export default {
 }
 .scr-guide-desc {
   font-size: 24rpx;
-  color: #888;
+  color: $facade-text-faint;
   line-height: 1.6;
   margin-bottom: 24rpx;
 }
@@ -547,12 +547,12 @@ export default {
   border-radius: 50%;
   flex-shrink: 0;
 }
-.lg-healthy { background: #2E7D32; }
+.lg-healthy { background: $mat-green-strong; }
 .lg-attention { background: #F57F17; }
 .lg-tense { background: $status-danger-strong-2; }
 .scr-guide-legend-text {
   font-size: 22rpx;
-  color: #555;
+  color: $facade-text-deep;
   margin-left: 10rpx;
 }
 .scr-guide-steps {
@@ -587,7 +587,7 @@ export default {
 .scr-dim-summary {
   flex: 1;
   font-size: 24rpx;
-  color: #888;
+  color: $facade-text-faint;
   line-height: 1.4;
 }
 
@@ -675,7 +675,7 @@ export default {
 .scr-advice-action {
   display: flex;
   align-items: flex-start;
-  background: #F5FAFE;
+  background: $facade-fill-blue-ghost;
   border-radius: 12rpx;
   padding: 16rpx 20rpx;
   margin-top: 10rpx;
@@ -706,7 +706,7 @@ export default {
   font-size: 26rpx;
   font-weight: 600;
   color: $app-surface;
-  background: linear-gradient(135deg, $status-success, #34D399);
+  background: linear-gradient(135deg, $status-success, $status-success-light-3);
   border-radius: 36rpx;
   border: none;
 }
@@ -765,7 +765,7 @@ export default {
   border: 2rpx solid $brand-primary;
 }
 .scr-btn-secondary {
-  background: linear-gradient(135deg, $status-success, #34D399);
+  background: linear-gradient(135deg, $status-success, $status-success-light-3);
   color: $app-surface;
   font-weight: 600;
 }
@@ -777,7 +777,7 @@ export default {
 .scr-advice-interpretation {
   display: block;
   font-size: 26rpx;
-  color: #555;
+  color: $facade-text-deep;
   line-height: 1.6;
   margin: 16rpx 0;
 }
@@ -793,11 +793,11 @@ export default {
 }
 .scr-advice-action {
   font-size: 24rpx;
-  color: #555;
+  color: $facade-text-deep;
   line-height: 1.5;
 }
 .scr-family-insight {
-  background: #F5FAFE;
+  background: $facade-fill-blue-ghost;
   border-radius: 16rpx;
   padding: 20rpx 24rpx;
   margin-top: 24rpx;
@@ -812,7 +812,7 @@ export default {
 .scr-family-insight-text {
   display: block;
   font-size: 26rpx;
-  color: #555;
+  color: $facade-text-deep;
   line-height: 1.6;
 }
 .scr-fallback {

cfc-frontend/pages/family/self-check.vue

@@ -206,7 +206,7 @@ export default {
 <stylescoped lang="scss">
 .sc-page {
   min-height: 100vh;
-  background: #F5FAFE;
+  background: $facade-fill-blue-ghost;
   padding: 24rpx 30rpx 120rpx;
   box-sizing: border-box;
 }
@@ -272,7 +272,7 @@ export default {
   width: 12rpx;
   height: 12rpx;
   border-radius: 50%;
-  background: #E5E7EB;
+  background: $facade-gray-200;
   margin: 0 4rpx;
 }
 .sc-dim-nav-dot-mini.done {
@@ -297,7 +297,7 @@ export default {
 }
 .sc-progress-bar {
   height: 10rpx;
-  background: #E8E8E8;
+  background: $facade-fill-4;
   border-radius: 5rpx;
   margin-bottom: 30rpx;
   overflow: hidden;
@@ -368,7 +368,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 22rpx 24rpx;
-  border: 2rpx solid #E5E7EB;
+  border: 2rpx solid $facade-gray-200;
   border-radius: 14rpx;
   margin-bottom: 14rpx;
   transition: border-color 0.2s, background-color 0.2s;

cfc-frontend/pages/games/1a2b.vue

@@ -204,7 +204,7 @@ export default {
 <stylescoped lang="scss">
 .game-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  background: linear-gradient(135deg, $app-ink-night 0%, #16213e 100%);
   padding: 30rpx;
 }
 .game-header {
@@ -218,7 +218,7 @@ export default {
   margin-bottom: 20rpx;
 }
 .game-stats {
-  color: #888;
+  color: $facade-text-faint;
   font-size: 28rpx;
 }
 .instructions {
@@ -248,7 +248,7 @@ export default {
 }
 .start-btn, .guess-btn {
   background: #4ECDC4;
-  color: #1a1a2e;
+  color: $app-ink-night;
   border-radius: 12rpx;
   padding: 20rpx;
 }
@@ -259,7 +259,7 @@ export default {
   margin: 30rpx 0;
 }
 .history-title {
-  color: #888;
+  color: $facade-text-faint;
   font-size: 28rpx;
   display: block;
   margin-bottom: 16rpx;
@@ -301,7 +301,7 @@ export default {
 }
 .restart-btn {
   background: #4ECDC4;
-  color: #1a1a2e;
+  color: $app-ink-night;
   padding: 20rpx 60rpx;
   margin-top: 30rpx;
 }

cfc-frontend/pages/games/list.vue

@@ -85,7 +85,7 @@ export default {
 <stylescoped lang="scss">
 .container {
   padding: 30rpx;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  background: linear-gradient(135deg, $app-ink-night 0%, #16213e 100%);
   min-height: 100vh;
 }
 

cfc-frontend/pages/games/records.vue

@@ -133,7 +133,7 @@ export default {
 <stylescoped lang="scss">
 .records-container {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
   padding-bottom: 40rpx;
 }
 .header {

cfc-frontend/pages/games/schulte.vue

@@ -181,7 +181,7 @@ export default {
 <stylescoped lang="scss">
 .game-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  background: linear-gradient(135deg, $app-ink-night 0%, #16213e 100%);
   padding: 30rpx;
 }
 
@@ -232,7 +232,7 @@ export default {
 
 .grid-cell.correct {
   background: #4ECDC4;
-  color: #1a1a2e;
+  color: $app-ink-night;
 }
 
 .game-controls {
@@ -290,7 +290,7 @@ export default {
 
 .restart-btn {
   background: #4ECDC4;
-  color: #1a1a2e;
+  color: $app-ink-night;
   padding: 20rpx 60rpx;
   border-radius: 50rpx;
   border: none;

cfc-frontend/pages/games/stats.vue

@@ -143,7 +143,7 @@ export default {
 <stylescoped lang="scss">
 .stats-container {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
   padding-bottom: 40rpx;
 }
 .header {

cfc-frontend/pages/games/sudoku.vue

@@ -322,7 +322,7 @@ export default {
 <stylescoped lang="scss">
 .game-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+  background: linear-gradient(135deg, $app-ink-night 0%, #16213e 100%);
   padding: 30rpx;
 }
 
@@ -361,7 +361,7 @@ export default {
 
 .level-btn.active {
   background: #4ECDC4;
-  color: #1a1a2e;
+  color: $app-ink-night;
 }
 
 .board {
@@ -431,7 +431,7 @@ export default {
 }
 
 .start-btn {
-  background: linear-gradient(135deg, #2196F3, #4CAF50);
+  background: linear-gradient(135deg, $mat-blue-base, $mat-green);
   color: $app-surface;
   padding: 20rpx 60rpx;
   border-radius: 50rpx;
@@ -473,7 +473,7 @@ export default {
 
 .restart-btn {
   background: #4ECDC4;
-  color: #1a1a2e;
+  color: $app-ink-night;
   padding: 20rpx 60rpx;
   border-radius: 50rpx;
   border: none;

cfc-frontend/pages/growth-main/index.vue

@@ -495,12 +495,12 @@ export default {
 </script>
 <style scoped lang="scss">
 // ===== 成长记录页专属色阶 =====
-$c-growth-hero-from: #F97316;
-$c-growth-hero-to:   #EA580C;
-$c-growth-hero-bg:   #FFF7ED;
-$c-growth-streak:    #F97316;
-$c-danger-soft:      #FEE2E2;
-$c-danger-ink:       #DC2626;
+$c-growth-hero-from: $brand-primary;
+$c-growth-hero-to:   $brand-primary-dark;
+$c-growth-hero-bg:   $uni-primary-pale;
+$c-growth-streak:    $brand-primary;
+$c-danger-soft:      $status-danger-soft;
+$c-danger-ink:       $status-danger-deep;
 
 .container {
   background: $facade-brand-tint;
@@ -544,7 +544,7 @@ $c-danger-ink:       #DC2626;
   overflow: hidden;
   background: linear-gradient(145deg, $c-growth-hero-from, $c-growth-hero-to);
   box-shadow: 0 16rpx 48rpx rgba(249,115,22,0.32);
-  color: #fff;
+  color: $uni-surface;
 }
 .hero-glow {
   position: absolute;
@@ -873,7 +873,7 @@ $c-danger-ink:       #DC2626;
   align-items: center;
   justify-content: center;
   margin-bottom: 10rpx;
-  background: #fff;
+  background: $uni-surface;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
 }
 .progress-tile-icon { font-size: 36rpx; }

cfc-frontend/pages/growth/assessment-result.vue

@@ -101,7 +101,7 @@ export default {
 <stylescoped lang="scss">
 .container {
   padding: 30rpx;
-  background: #F8F8F8;
+  background: $facade-fill-page;
   min-height: 100vh;
 }
 .loading {
@@ -111,7 +111,7 @@ export default {
   font-size: 28rpx;
 }
 .header-card {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, $accent-indigo 0%, $accent-indigo-deep 100%);
   border-radius: 20rpx;
   padding: 40rpx;
   text-align: center;
@@ -163,7 +163,7 @@ export default {
 .score-value {
   font-size: 40rpx;
   font-weight: bold;
-  color: #667eea;
+  color: $accent-indigo;
   display: block;
 }
 .overall-score {

cfc-frontend/pages/growth/caution-detail.vue

@@ -274,7 +274,7 @@ export default {
   font-weight: 500;
 }
 .member-tab.active {
-  background: linear-gradient(135deg, $status-danger, #DC2626);
+  background: linear-gradient(135deg, $status-danger, $status-danger-deep);
   color: $app-surface;
 }
 
@@ -337,7 +337,7 @@ export default {
 }
 .meta-item {
   font-size: 24rpx;
-  color: #888;
+  color: $facade-text-faint;
   background: $facade-fill-2;
   padding: 4rpx 12rpx;
   border-radius: 8rpx;
@@ -357,7 +357,7 @@ export default {
 .score-bar-bg {
   flex: 1;
   height: 12rpx;
-  background: #fee2e2;
+  background: $status-danger-soft;
   border-radius: 6rpx;
   overflow: hidden;
 }
@@ -367,7 +367,7 @@ export default {
   transition: width 0.3s ease;
 }
 .score-bar-fill.danger {
-  background: linear-gradient(90deg, $status-danger, #DC2626);
+  background: linear-gradient(90deg, $status-danger, $status-danger-deep);
 }
 .score-label {
   font-size: 24rpx;

cfc-frontend/pages/growth/challenge-progress.vue

@@ -117,7 +117,7 @@ export default {
 .progress-circle { width: 160rpx; height: 160rpx; border-radius: 50%; margin: 0 auto 16rpx; display: flex; align-items: center; justify-content: center; box-shadow: 0 4rpx 20rpx rgba(249,115,22,0.3); }
 .progress-percent { font-size: 36rpx; font-weight: bold; color: $app-surface; }
 .progress-label { font-size: 24rpx; color: rgba(255,255,255,0.9); display: block; }
-.progress-cf { font-size: 28rpx; color: #FFD700; font-weight: bold; margin-top: 8rpx; display: block; }
+.progress-cf { font-size: 28rpx; color: $accent-gold; font-weight: bold; margin-top: 8rpx; display: block; }
 
 .card { margin: 16rpx 24rpx; background: $app-surface; border-radius: 20rpx; overflow: hidden; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
 .card-header { display: flex; justify-content: space-between; align-items: center; padding: 20rpx 24rpx; border-bottom: 1rpx solid $facade-fill-2; }
@@ -130,7 +130,7 @@ export default {
 .task-item:last-child { border-bottom: none; }
 .task-left { display: flex; align-items: center; gap: 16rpx; flex: 1; min-width: 0; }
 .task-icon { font-size: 32rpx; color: $facade-text-ghost; width: 40rpx; text-align: center; }
-.task-icon.completed { color: #4CAF50; }
+.task-icon.completed { color: $mat-green; }
 .task-info { flex: 1; min-width: 0; }
 .task-title { font-size: 26rpx; color: $facade-text-strong; display: block; }
 .task-progress { font-size: 22rpx; color: $facade-text-muted; margin-top: 4rpx; display: block; }

cfc-frontend/pages/growth/create.vue

@@ -246,7 +246,7 @@ export default {
 <stylescoped lang="scss">
 .container {
   padding: 30rpx;
-  background: #F8F8F8;
+  background: $facade-fill-page;
   min-height: 100vh;
 }
 .header {
@@ -275,10 +275,10 @@ export default {
   border-radius: 16rpx;
   padding: 24rpx 16rpx;
   text-align: center;
-  border: 2rpx solid #E0E0E0;
+  border: 2rpx solid $facade-hairline;
 }
 .source-active {
-  border-color: #667eea;
+  border-color: $accent-indigo;
   background: #f5f3ff;
 }
 .source-icon {
@@ -323,7 +323,7 @@ export default {
 .input {
   width: 100%;
   height: 76rpx;
-  border: 1rpx solid #E0E0E0;
+  border: 1rpx solid $facade-hairline;
   border-radius: 10rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
@@ -333,7 +333,7 @@ export default {
   display: flex;
   align-items: center;
   height: 76rpx;
-  border: 1rpx solid #E0E0E0;
+  border: 1rpx solid $facade-hairline;
   border-radius: 10rpx;
   padding: 0 20rpx;
 }
@@ -354,7 +354,7 @@ export default {
 .picker-input {
   height: 76rpx;
   line-height: 76rpx;
-  border: 1rpx solid #E0E0E0;
+  border: 1rpx solid $facade-hairline;
   border-radius: 10rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
@@ -364,7 +364,7 @@ export default {
   width: 100%;
   height: 88rpx;
   line-height: 88rpx;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, $accent-indigo 0%, $accent-indigo-deep 100%);
   color: $app-surface;
   border-radius: 44rpx;
   font-size: 32rpx;

cfc-frontend/pages/growth/detail.vue

@@ -276,7 +276,7 @@ export default {
 <stylescoped lang="scss">
 .container {
   padding: 30rpx;
-  background: #F8F8F8;
+  background: $facade-fill-page;
   min-height: 100vh;
 }
 .loading {
@@ -286,7 +286,7 @@ export default {
   font-size: 28rpx;
 }
 .header-card {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, $accent-indigo 0%, $accent-indigo-deep 100%);
   border-radius: 20rpx;
   padding: 30rpx;
   margin-bottom: 20rpx;
@@ -375,7 +375,7 @@ export default {
   font-weight: bold;
 }
 .info-value.link {
-  color: #667eea;
+  color: $accent-indigo;
 }
 .score-grid {
   display: flex;
@@ -398,7 +398,7 @@ export default {
 .score-value {
   font-size: 32rpx;
   font-weight: bold;
-  color: #667eea;
+  color: $accent-indigo;
 }
 .card-content {
   font-size: 28rpx;
@@ -411,7 +411,7 @@ export default {
   height: 60rpx;
   line-height: 60rpx;
   background: #f0f0ff;
-  color: #667eea;
+  color: $accent-indigo;
   border-radius: 10rpx;
   font-size: 26rpx;
   text-align: center;
@@ -436,7 +436,7 @@ export default {
 }
 .supplement-source {
   font-size: 22rpx;
-  color: #667eea;
+  color: $accent-indigo;
   background: #f0f0ff;
   padding: 2rpx 10rpx;
   border-radius: 8rpx;
@@ -468,8 +468,8 @@ export default {
   height: 80rpx;
   line-height: 80rpx;
   background: $app-surface;
-  color: #667eea;
-  border: 2rpx solid #667eea;
+  color: $accent-indigo;
+  border: 2rpx solid $accent-indigo;
   border-radius: 40rpx;
   font-size: 28rpx;
   text-align: center;

cfc-frontend/pages/growth/diet-checkin.vue

@@ -515,12 +515,12 @@ success: function(res) {
 .form-group { margin-bottom: 20rpx; }
 .form-label { font-size: 26rpx; color: $facade-text-strong; font-weight: 500; margin-bottom: 10rpx; display: block; }
 .tag-row { display: flex; flex-wrap: wrap; gap: 10rpx; }
-.tag-btn { padding: 12rpx 24rpx; border-radius: 30rpx; border: 2rpx solid #e8e8e8; background: $facade-fill-ghost; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
-.tag-active { border-color: $brand-primary; background: #FFF3E0; box-shadow: 0 4rpx 12rpx rgba(249,115,22,0.15); }
+.tag-btn { padding: 12rpx 24rpx; border-radius: 30rpx; border: 2rpx solid $facade-fill-4; background: $facade-fill-ghost; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
+.tag-active { border-color: $brand-primary; background: $fortune-1-tint; box-shadow: 0 4rpx 12rpx rgba(249,115,22,0.15); }
 .tag-btn text { font-size: 26rpx; color: $facade-text-body; }
 .tag-active text { color: $brand-primary; font-weight: 600; }
-.form-textarea { width: 100%; height: 120rpx; border: 1rpx solid #e8e8e8; border-radius: 14rpx; padding: 16rpx; font-size: 26rpx; background: $facade-fill-ghost; box-sizing: border-box; font-family: inherit; }
-.form-input { width: 100%; height: 76rpx; border: 1rpx solid #e8e8e8; border-radius: 14rpx; padding: 0 16rpx; font-size: 26rpx; background: $facade-fill-ghost; box-sizing: border-box; }
+.form-textarea { width: 100%; height: 120rpx; border: 1rpx solid $facade-fill-4; border-radius: 14rpx; padding: 16rpx; font-size: 26rpx; background: $facade-fill-ghost; box-sizing: border-box; font-family: inherit; }
+.form-input { width: 100%; height: 76rpx; border: 1rpx solid $facade-fill-4; border-radius: 14rpx; padding: 0 16rpx; font-size: 26rpx; background: $facade-fill-ghost; box-sizing: border-box; }
 
 /* ===== 媒体工具栏 ===== */
 .media-toolbar { display: flex; align-items: center; gap: 0; padding: 12rpx 0; }
@@ -528,7 +528,7 @@ success: function(res) {
 .tool-icon { font-size: 42rpx; }
 .tool-label { font-size: 24rpx; color: $facade-text-body; }
 .tool-count { font-size: 20rpx; color: $brand-primary; font-weight: 600; }
-.tool-divider { width: 1rpx; height: 56rpx; background: linear-gradient(180deg, transparent, #e8e8e8, transparent); }
+.tool-divider { width: 1rpx; height: 56rpx; background: linear-gradient(180deg, transparent, $facade-fill-4, transparent); }
 
 /* ===== 照片缩略图 ===== */
 .photo-strip { display: flex; flex-wrap: wrap; gap: 10rpx; padding: 12rpx 0 4rpx; }
@@ -547,7 +547,7 @@ success: function(res) {
 .cancel-mini { background: $facade-fill; color: $facade-text-body; }
 .done-mini { background: $brand-primary; color: $app-surface; font-weight: 600; }
 
-.voice-player { display: flex; align-items: center; gap: 10rpx; flex: 1; background: #FFF3E0; padding: 10rpx 20rpx; border-radius: 28rpx; }
+.voice-player { display: flex; align-items: center; gap: 10rpx; flex: 1; background: $fortune-1-tint; padding: 10rpx 20rpx; border-radius: 28rpx; }
 .play-icon { font-size: 26rpx; color: $brand-primary; }
 .voice-duration { font-size: 24rpx; color: $facade-text-body; }
 .delete-voice { width: 40rpx; height: 40rpx; display: flex; align-items: center; justify-content: center; color: $facade-text-muted; font-size: 28rpx; }
@@ -561,19 +561,19 @@ success: function(res) {
 /* ===== 补打横幅 ===== */
 .backfill-banner {
   display: flex; align-items: center; gap: 12rpx;
-  background: linear-gradient(135deg, #FFF3E0, #FFE0B2);
+  background: linear-gradient(135deg, $fortune-1-tint, #FFE0B2);
   border-bottom: 1rpx solid #FFE082;
   padding: 16rpx 24rpx;
 }
 .backfill-icon { font-size: 32rpx; }
-.backfill-text { font-size: 26rpx; color: #E65100; font-weight: 500; }
+.backfill-text { font-size: 26rpx; color: $mat-orange-strong; font-weight: 500; }
 
 /* ===== 历史记录 ===== */
 .history-list { display: flex; flex-direction: column; gap: 12rpx; }
 .history-item { display: flex; justify-content: space-between; align-items: center; padding: 14rpx 0; border-bottom: 1rpx solid $facade-fill-2; }
 .history-left { flex: 1; min-width: 0; }
 .history-type { font-size: 26rpx; font-weight: 500; color: $facade-text-strong; display: block; }
-.history-content { font-size: 24rpx; color: #888; display: block; margin-top: 4rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.history-content { font-size: 24rpx; color: $facade-text-faint; display: block; margin-top: 4rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .history-right { text-align: right; margin-left: 16rpx; flex-shrink: 0; }
 .history-date { font-size: 22rpx; color: $facade-text-muted; }
 
@@ -599,10 +599,10 @@ success: function(res) {
 .recognize-body { padding: 24rpx 32rpx; max-height: 420rpx; overflow-y: auto; }
 .food-chip {
   display: inline-flex; align-items: center; gap: 8rpx;
-  background: #FFF3E0; border: 1rpx solid #FFE0B2; border-radius: 24rpx;
+  background: $fortune-1-tint; border: 1rpx solid #FFE0B2; border-radius: 24rpx;
   padding: 8rpx 20rpx; margin: 6rpx 8rpx 6rpx 0;
 }
-.food-chip-name { font-size: 26rpx; color: #E65100; font-weight: 500; }
+.food-chip-name { font-size: 26rpx; color: $mat-orange-strong; font-weight: 500; }
 .food-chip-cat { font-size: 20rpx; color: $facade-text-muted; }
 .food-chip-del {
   width: 32rpx; height: 32rpx; display: flex; align-items: center; justify-content: center;

cfc-frontend/pages/growth/exercise-checkin.vue

@@ -515,14 +515,14 @@ export default {
 .form-group { margin-bottom: 20rpx; }
 .form-label { font-size: 26rpx; color: $facade-text-strong; font-weight: 500; margin-bottom: 10rpx; display: block; }
 .tag-row { display: flex; flex-wrap: wrap; gap: 10rpx; }
-.tag-btn { padding: 12rpx 24rpx; border-radius: 30rpx; border: 2rpx solid #e8e8e8; background: $facade-fill-ghost; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
-.tag-active { border-color: $brand-primary; background: #FFF3E0; box-shadow: 0 4rpx 12rpx rgba(249,115,22,0.15); }
+.tag-btn { padding: 12rpx 24rpx; border-radius: 30rpx; border: 2rpx solid $facade-fill-4; background: $facade-fill-ghost; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
+.tag-active { border-color: $brand-primary; background: $fortune-1-tint; box-shadow: 0 4rpx 12rpx rgba(249,115,22,0.15); }
 .tag-btn text { font-size: 26rpx; color: $facade-text-body; }
 .tag-active text { color: $brand-primary; font-weight: 600; }
-.form-input { width: 100%; height: 76rpx; border: 1rpx solid #e8e8e8; border-radius: 14rpx; padding: 0 16rpx; font-size: 26rpx; background: $facade-fill-ghost; box-sizing: border-box; }
+.form-input { width: 100%; height: 76rpx; border: 1rpx solid $facade-fill-4; border-radius: 14rpx; padding: 0 16rpx; font-size: 26rpx; background: $facade-fill-ghost; box-sizing: border-box; }
 .step-sync-row { display: flex; align-items: center; gap: 12rpx; }
 .step-input { flex: 1; }
-.sync-btn { padding: 12rpx 28rpx; border-radius: 30rpx; border: 2rpx solid $brand-primary; background: #FFF3E0; transition: opacity 0.2s ease; flex-shrink: 0; }
+.sync-btn { padding: 12rpx 28rpx; border-radius: 30rpx; border: 2rpx solid $brand-primary; background: $fortune-1-tint; transition: opacity 0.2s ease; flex-shrink: 0; }
 .sync-btn text { font-size: 24rpx; color: $brand-primary; font-weight: 500; }
 .syncing { opacity: 0.5; }
 .step-hint { font-size: 22rpx; color: $status-success; margin-top: 6rpx; display: block; }
@@ -533,7 +533,7 @@ export default {
 .tool-icon { font-size: 42rpx; }
 .tool-label { font-size: 24rpx; color: $facade-text-body; }
 .tool-count { font-size: 20rpx; color: $brand-primary; font-weight: 600; }
-.tool-divider { width: 1rpx; height: 56rpx; background: linear-gradient(180deg, transparent, #e8e8e8, transparent); }
+.tool-divider { width: 1rpx; height: 56rpx; background: linear-gradient(180deg, transparent, $facade-fill-4, transparent); }
 
 /* ===== 照片缩略图 ===== */
 .photo-strip { display: flex; flex-wrap: wrap; gap: 10rpx; padding: 12rpx 0 4rpx; }
@@ -552,7 +552,7 @@ export default {
 .cancel-mini { background: $facade-fill; color: $facade-text-body; }
 .done-mini { background: $brand-primary; color: $app-surface; font-weight: 600; }
 
-.voice-player { display: flex; align-items: center; gap: 10rpx; flex: 1; background: #FFF3E0; padding: 10rpx 20rpx; border-radius: 28rpx; }
+.voice-player { display: flex; align-items: center; gap: 10rpx; flex: 1; background: $fortune-1-tint; padding: 10rpx 20rpx; border-radius: 28rpx; }
 .play-icon { font-size: 26rpx; color: $brand-primary; }
 .voice-duration { font-size: 24rpx; color: $facade-text-body; }
 .delete-voice { width: 40rpx; height: 40rpx; display: flex; align-items: center; justify-content: center; color: $facade-text-muted; font-size: 28rpx; }
@@ -568,7 +568,7 @@ export default {
 .history-item { display: flex; justify-content: space-between; align-items: center; padding: 14rpx 0; border-bottom: 1rpx solid $facade-fill-2; }
 .history-left { flex: 1; min-width: 0; }
 .history-type { font-size: 26rpx; font-weight: 500; color: $facade-text-strong; display: block; }
-.history-content { font-size: 24rpx; color: #888; display: block; margin-top: 4rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.history-content { font-size: 24rpx; color: $facade-text-faint; display: block; margin-top: 4rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .history-right { text-align: right; margin-left: 16rpx; flex-shrink: 0; }
 .history-date { font-size: 22rpx; color: $facade-text-muted; }
 

cfc-frontend/pages/growth/profile/index.vue

@@ -315,7 +315,7 @@ export default {
 .assessment-date { font-size: 20rpx; color: $facade-text-ghost-light; margin-top: 8rpx; display: block; }
 
 .domain-tags { display: flex; flex-wrap: wrap; gap: 12rpx; }
-.domain-tag { padding: 8rpx 20rpx; border-radius: 20rpx; background: #FFF3E0; border: 1rpx solid $brand-primary; }
+.domain-tag { padding: 8rpx 20rpx; border-radius: 20rpx; background: $fortune-1-tint; border: 1rpx solid $brand-primary; }
 .domain-tag text { font-size: 24rpx; color: $brand-primary; }
 
 .rec-section { margin-top: 16rpx; }