refactor(beautify): A批 硬编码色令牌化 - 灰阶+品牌色等值替换 (8539->3979处)

- 新增 scripts/replace-hex-to-token.js 批量替换脚本（--batch=gray|brand 分批次）
- 灰阶批次 263 文件 1787 处：#FFF->app-surface, #333/#666/#999->facade-text 系, #F5F5F5/#F0F0F0->facade-fill 系, #CCC/#DDD/#EEE->hairline 系
- 品牌/状态色批次 275 文件 3006 处：#F97316->brand-primary, #FF8C42->dim-body, #FFF7ED->uni-primary-pale, #FB923C->brand-primary-light, #10B981->status-success, #EF4444->status-danger, #6366F1->dim-wisdom, #C62828->status-danger-strong-2
- 无 lang=scss 的 style 块自动补 lang 属性（SCSS 是 CSS 超集，安全）
- 硬编码色总数 8539 -> 3979，P0 债务页 59 -> 18

cfc-frontend/components/ArticleBookshelf.vue

@@ -162,7 +162,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 /* ======================================
    ArticleBookshelf — 四列网格推荐阅读组件
    浠艾福 (Care Family) 设计系统
@@ -207,7 +207,7 @@ export default {
   height: 0;
   padding-top: 133.33%; /* 3:4 书封比例 */
   border-radius: 12rpx;
-  background: linear-gradient(180deg, #e8e8e8 0%, #f0f0f0 50%, #e8e8e8 100%);
+  background: linear-gradient(180deg, #e8e8e8 0%, $facade-fill 50%, #e8e8e8 100%);
   background-size: 200% 100%;
   animation: skeleton-wave 1.4s ease-in-out infinite;
 }
@@ -215,7 +215,7 @@ export default {
   height: 24rpx;
   margin-top: 10rpx;
   border-radius: 6rpx;
-  background: linear-gradient(180deg, #e8e8e8 0%, #f0f0f0 50%, #e8e8e8 100%);
+  background: linear-gradient(180deg, #e8e8e8 0%, $facade-fill 50%, #e8e8e8 100%);
   background-size: 200% 100%;
   animation: skeleton-wave 1.4s ease-in-out infinite;
 }
@@ -308,7 +308,7 @@ export default {
   font-size: 18rpx;
   font-weight: 700;
   line-height: 1.4;
-  color: #FFFFFF;
+  color: $app-surface;
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -324,7 +324,7 @@ export default {
   display: block;
   margin-top: 8rpx;
   font-size: 22rpx;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;

cfc-frontend/components/BadgeGrid.vue

@@ -20,9 +20,9 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .badge-grid {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -52,5 +52,5 @@ export default {
 }
 .badge-icon-wrap--locked { background: #E2E8F0; }
 .badge-icon { font-size: 36rpx; }
-.badge-name { font-size: 22rpx; color: #333; text-align: center; }
+.badge-name { font-size: 22rpx; color: $facade-text-strong; text-align: center; }
 </style>

cfc-frontend/components/BaseBadge.vue

@@ -19,7 +19,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .base-badge {
   display: inline-flex;
   align-items: center;
@@ -36,7 +36,7 @@ export default {
 /* Variants */
 .base-badge--primary {
   background: rgba(249, 115, 22, 0.12);
-  color: var(--color-primary, #F97316);
+  color: var(--color-primary, $brand-primary);
 }
 .base-badge--success {
   background: rgba(34, 197, 94, 0.12);
@@ -48,7 +48,7 @@ export default {
 }
 .base-badge--error {
   background: rgba(239, 68, 68, 0.12);
-  color: var(--color-error, #EF4444);
+  color: var(--color-error, $status-danger);
 }
 .base-badge--accent {
   background: rgba(14, 165, 233, 0.12);

cfc-frontend/components/BaseLoading.vue

@@ -20,7 +20,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .base-loading {
   display: flex;
   flex-direction: column;
@@ -50,7 +50,7 @@ export default {
   width: 16rpx;
   height: 16rpx;
   border-radius: 50%;
-  background: var(--color-primary, #F97316);
+  background: var(--color-primary, $brand-primary);
   animation: dot-bounce 1.2s ease-in-out infinite;
 }
 .base-loading__dot:nth-child(2) { animation-delay: 0.2s; }

cfc-frontend/components/ConfigurableGuide.vue

@@ -102,7 +102,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .cg-overlay {
   position: fixed;
   top: 0;
@@ -118,7 +118,7 @@ export default {
 .cg-card {
   width: 640rpx;
   min-height: 560rpx;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 32rpx;
   display: flex;
   flex-direction: column;
@@ -156,13 +156,13 @@ export default {
 }
 .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--active { background: #F97316; transform: scale(1.3); }
+.cg-dot--active { background: $brand-primary; transform: scale(1.3); }
 .cg-action { width: 100%; padding: 0 56rpx 48rpx; box-sizing: border-box; }
 .cg-btn {
   width: 100%;
   height: 88rpx;
   border-radius: 999rpx;
-  color: #FFFFFF;
+  color: $app-surface;
   font-size: 32rpx;
   font-weight: 700;
   display: flex;

cfc-frontend/components/ContentSharePoster.vue

@@ -766,7 +766,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .poster-overlay {
   position: fixed;
   top: 0;
@@ -806,8 +806,8 @@ export default {
 }
 .poster-btn::after { border: none; }
 .poster-btn.save {
-  background: #ffffff;
-  color: #F97316;
+  background: $app-surface;
+  color: $brand-primary;
   font-weight: 600;
 }
 .poster-btn.save:active { opacity: 0.85; }
@@ -819,7 +819,7 @@ export default {
 }
 .tpl-label {
   margin-right: 20rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .tpl-options {
   display: flex;
@@ -843,8 +843,8 @@ export default {
 .tpl-text {
   font-size: 14rpx;
   text-align: center;
-  color: #666;
+  color: $facade-text-body;
 }
-.tpl-active .tpl-text { color: #F97316; }
+.tpl-active .tpl-text { color: $brand-primary; }
 
 </style>

cfc-frontend/components/DimensionActivities.vue

@@ -219,7 +219,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .section {
   margin: 16rpx 20rpx;
 }
@@ -326,12 +326,12 @@ export default {
 .dot.active {
   width: 32rpx;
   border-radius: 4rpx;
-  background: #F97316;
+  background: $brand-primary;
 }
 
 /* ===== 活动卡片（行布局） ===== */
 .activity-card {
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 16rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
@@ -367,7 +367,7 @@ export default {
 .card-title {
   font-size: 28rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 8rpx;
 }
 .line-clamp-1 {
@@ -446,18 +446,18 @@ export default {
   color: #1565C0;
 }
 .card-status.status-ended {
-  background: #F5F5F5;
-  color: #999;
+  background: $facade-fill-2;
+  color: $facade-text-muted;
 }
 
 .card-price {
   font-size: 24rpx;
   font-weight: bold;
-  color: #F97316;
+  color: $brand-primary;
 }
 
 .card-price.member-teaser {
-  color: #F97316;
+  color: $brand-primary;
   text-decoration: underline;
 }
 

cfc-frontend/components/DimensionArticles.vue

@@ -139,7 +139,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .section {
   margin: 20rpx 20rpx;
 }
@@ -152,18 +152,18 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .section-more {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .article-list {
   display: flex;
   flex-direction: column;
 }
 .article-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 28rpx 24rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -180,13 +180,13 @@ export default {
 }
 .article-category-text {
   font-size: 20rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: 500;
 }
 .article-title {
   font-size: 28rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 10rpx;
 }
@@ -227,11 +227,11 @@ export default {
 }
 .meta-text {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .article-date {
   font-size: 22rpx;
-  color: #bbb;
+  color: $facade-text-ghost-light;
   margin-left: auto;
 }
 </style>

cfc-frontend/components/DimensionIntroCard.vue

@@ -65,7 +65,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 .dim-intro-card {
   margin: 16rpx 30rpx 0;
   padding: 24rpx 28rpx;
@@ -88,12 +88,12 @@ export default {
 .dim-intro-title {
   font-size: 28rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
 }
 .dim-intro-subtitle {
   font-size: 22rpx;
-  color: #666;
+  color: $facade-text-body;
   margin-top: 4rpx;
   display: block;
 }
@@ -108,18 +108,18 @@ export default {
 }
 .dim-intro-bullet {
   font-size: 16rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-right: 8rpx;
 }
 .dim-intro-feature-text {
   font-size: 24rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .dim-intro-footer {
   text-align: right;
 }
 .dim-intro-link {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 </style>

cfc-frontend/components/DimensionProducts.vue

@@ -160,14 +160,14 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .product-list {
   display: flex;
   flex-wrap: wrap;
 }
 .product-card {
   width: calc(25% - 12rpx);
-  background: #fff;
+  background: $app-surface;
   border-radius: 12rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
@@ -180,7 +180,7 @@ export default {
 .product-img {
   width: 100%;
   height: 160rpx;
-  background: #f0f0f0;
+  background: $facade-fill;
 }
 .product-body {
   padding: 8rpx 10rpx 12rpx;
@@ -188,7 +188,7 @@ export default {
 .product-name {
   display: block;
   font-size: 22rpx;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.4;
   margin-bottom: 4rpx;
   overflow: hidden;
@@ -201,7 +201,7 @@ export default {
 }
 .product-price {
   font-size: 24rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: bold;
 }
 /* ===== 商城样式（首页 layout="mall"）===== */
@@ -239,7 +239,7 @@ export default {
 }
 .empty-tip {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .loading-state {
   display: flex;
@@ -255,7 +255,7 @@ export default {
 }
 .loading-text {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .no-more {
   display: flex;
@@ -265,6 +265,6 @@ export default {
 }
 .no-more-text {
   font-size: 22rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
 }
 </style>

cfc-frontend/components/DimensionTasks.vue

@@ -60,7 +60,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .section {
   margin: 20rpx 20rpx;
 }
@@ -73,11 +73,11 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .section-more {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .task-list {
   display: flex;
@@ -87,7 +87,7 @@ export default {
   display: flex;
   flex-direction: row;
   align-items: center;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx 20rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -101,7 +101,7 @@ export default {
   width: 44rpx;
   height: 44rpx;
   border-radius: 50%;
-  border: 3rpx solid #ddd;
+  border: 3rpx solid $facade-border-soft;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -113,7 +113,7 @@ export default {
 }
 .task-check-icon {
   font-size: 24rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: bold;
 }
 .task-content {
@@ -125,11 +125,11 @@ export default {
 }
 .task-name {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .task-name.done {
   text-decoration: line-through;
-  color: #999;
+  color: $facade-text-muted;
 }
 .task-meta {
   display: flex;
@@ -143,6 +143,6 @@ export default {
 }
 .task-penalty {
   font-size: 24rpx;
-  color: #EF4444;
+  color: $status-danger;
 }
 </style>

cfc-frontend/components/DimensionVisitorCard.vue

@@ -99,7 +99,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .dvc {
   margin: 12rpx 30rpx 0;
 }
@@ -121,7 +121,7 @@ export default {
 }
 .dvc-sub {
   font-size: 22rpx;
-  color: #999999;
+  color: $facade-text-muted;
   margin-top: 6rpx;
   display: block;
 }
@@ -144,7 +144,7 @@ export default {
 }
 .dvc-benefit-text {
   font-size: 26rpx;
-  color: #333333;
+  color: $facade-text-strong;
   line-height: 1.5;
 }
 
@@ -158,7 +158,7 @@ export default {
   height: 88rpx;
   line-height: 88rpx;
   border-radius: 44rpx;
-  color: #ffffff;
+  color: $app-surface;
   font-size: 28rpx;
   font-weight: 600;
   border: none;
@@ -170,7 +170,7 @@ export default {
   height: 88rpx;
   line-height: 88rpx;
   border-radius: 44rpx;
-  background: #ffffff;
+  background: $app-surface;
   font-size: 28rpx;
   font-weight: 500;
   border: 2rpx solid;
@@ -180,7 +180,7 @@ export default {
 
 .dvc-preview {
   margin-top: 24rpx;
-  background: #ffffff;
+  background: $app-surface;
   border: 1rpx dashed #e5e7eb;
   border-radius: 20rpx;
   padding: 40rpx 28rpx;
@@ -194,7 +194,7 @@ export default {
 }
 .dvc-preview-text {
   font-size: 24rpx;
-  color: #999999;
+  color: $facade-text-muted;
   text-align: center;
   line-height: 1.6;
 }

cfc-frontend/components/FamilyChallengeCard.vue

@@ -179,13 +179,13 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .challenge-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   margin: 0 20rpx 12rpx 20rpx;
   padding: 14rpx 16rpx;
-  border-left: 6rpx solid #10B981;
+  border-left: 6rpx solid $status-success;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
 }
 .card-header {
@@ -259,7 +259,7 @@ export default {
   margin-bottom: 6rpx;
 }
 .target-label { font-size: 22rpx; color: #475569; font-weight: 600; }
-.target-value { font-size: 26rpx; color: #10B981; font-weight: 700; }
+.target-value { font-size: 26rpx; color: $status-success; font-weight: 700; }
 
 .card-progress {
   display: flex;
@@ -276,13 +276,13 @@ export default {
 }
 .progress-bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, #10B981, #34D399);
+  background: linear-gradient(90deg, $status-success, #34D399);
   border-radius: 999rpx;
   transition: width 0.5s ease;
 }
 .progress-text {
   font-size: 20rpx;
-  color: #10B981;
+  color: $status-success;
   font-weight: 600;
   min-width: 90rpx;
   text-align: right;
@@ -315,7 +315,7 @@ export default {
 }
 .member-bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, #6366F1, #8B5CF6);
+  background: linear-gradient(90deg, $dim-wisdom, #8B5CF6);
   border-radius: 999rpx;
 }
 .member-val {
@@ -326,7 +326,7 @@ export default {
 }
 .member-done {
   font-size: 22rpx;
-  color: #10B981;
+  color: $status-success;
   font-weight: 700;
 }
 
@@ -340,8 +340,8 @@ export default {
 }
 .detail-label { font-size: 20rpx; color: #94A3B8; }
 .detail-val { font-size: 20rpx; color: #334155; }
-.detail-val.reward { color: #F97316; font-weight: 600; }
-.detail-val.badge { color: #6366F1; }
+.detail-val.reward { color: $brand-primary; font-weight: 600; }
+.detail-val.badge { color: $dim-wisdom; }
 
 .card-action {
   margin-top: 8rpx;
@@ -351,8 +351,8 @@ export default {
 .checkin-btn {
   padding: 10rpx 18rpx;
   border-radius: 999rpx;
-  background: #10B981;
-  color: #FFFFFF;
+  background: $status-success;
+  color: $app-surface;
   font-size: 22rpx;
   font-weight: 600;
 }
@@ -364,11 +364,11 @@ export default {
   margin-left: 12rpx;
 }
 .respond-agree {
-  background: #10B981;
-  color: #FFFFFF;
+  background: $status-success;
+  color: $app-surface;
 }
 .respond-reject {
-  background: #FFFFFF;
+  background: $app-surface;
   color: #DC2626;
   border: 2rpx solid #FCA5A5;
 }

cfc-frontend/components/FamilyEmptyState/FamilyEmptyState.vue

@@ -33,6 +33,6 @@ export default {
 .family-empty-block { padding: 60rpx 24rpx; }
 .family-empty-list { padding: 40rpx 16rpx; }
 .empty-icon { font-size: 48rpx; margin-bottom: 12rpx; }
-.empty-title { font-size: 28rpx; color: #333; margin-bottom: 8rpx; }
-.empty-desc { font-size: 24rpx; color: #999; margin-bottom: 16rpx; }
+.empty-title { font-size: 28rpx; color: $facade-text-strong; margin-bottom: 8rpx; }
+.empty-desc { font-size: 24rpx; color: $facade-text-muted; margin-bottom: 16rpx; }
 </style>

cfc-frontend/components/FamilyEnergyBar.vue

@@ -153,10 +153,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .family-energy-bar {
   margin: 20rpx 30rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 28rpx 24rpx;
   box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06);
@@ -168,11 +168,11 @@ export default {
   margin-bottom: 20rpx;
 }
 .bar-icon { font-size: 32rpx; margin-right: 8rpx; }
-.bar-title { font-size: 28rpx; font-weight: bold; color: #333; flex: 1; }
-.bar-total-score { font-size: 40rpx; font-weight: bold; color: #F97316; margin-right: 12rpx; }
+.bar-title { font-size: 28rpx; font-weight: bold; color: $facade-text-strong; flex: 1; }
+.bar-total-score { font-size: 40rpx; font-weight: bold; color: $brand-primary; margin-right: 12rpx; }
 .bar-expand-icon {
   font-size: 20rpx;
-  color: #bbb;
+  color: $facade-text-ghost-light;
   transition: transform 0.3s ease;
 }
 .bar-row {
@@ -186,14 +186,14 @@ export default {
 .bar-row-member:active { opacity: 0.6; }
 .bar-label {
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
   width: 80rpx;
   flex-shrink: 0;
 }
 .bar-track {
   flex: 1;
   height: 24rpx;
-  background: #f0f0f0;
+  background: $facade-fill;
   border-radius: 12rpx;
   overflow: hidden;
   margin: 0 12rpx;
@@ -206,18 +206,18 @@ export default {
 .bar-value {
   font-size: 26rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   width: 60rpx;
   text-align: right;
   flex-shrink: 0;
 }
 .bar-arrow {
   font-size: 28rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
   margin-left: 8rpx;
 }
 .bar-row-family .bar-fill {
-  background: linear-gradient(90deg, #F97316, #FB923C);
+  background: linear-gradient(90deg, $brand-primary, $brand-primary-light);
 }
 
 /* ===== 堆叠模式 ===== */
@@ -253,6 +253,6 @@ export default {
 }
 .legend-label {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 </style>

cfc-frontend/components/FamilyFeed.vue

@@ -226,10 +226,10 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 .family-feed {
   margin: 12rpx 30rpx 0;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 10rpx 16rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
@@ -254,7 +254,7 @@ export default {
   margin-right: 12rpx;
 }
 
-.feed-title { font-size: 24rpx; font-weight: bold; color: #333; }
+.feed-title { font-size: 24rpx; font-weight: bold; color: $facade-text-strong; }
 .feed-icon  { font-size: 20rpx; }
 
 @keyframes spin {
@@ -313,19 +313,19 @@ export default {
 
 .feed-item-text {
   flex: 1; min-width: 0;
-  font-size: 24rpx; color: #666;
+  font-size: 24rpx; color: $facade-text-body;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 
 .feed-item-dot {
   width: 12rpx; height: 12rpx;
-  border-radius: 50%; background: #EF4444;
+  border-radius: 50%; background: $status-danger;
   margin-left: 8rpx; flex-shrink: 0;
 }
 
 .feed-count {
   flex-shrink: 0; margin-left: 12rpx;
-  font-size: 20rpx; color: #F97316;
+  font-size: 20rpx; color: $brand-primary;
   background: rgba(249,115,22,0.1);
   border-radius: 999rpx; padding: 2rpx 12rpx; line-height: 1.4;
 }
@@ -333,7 +333,7 @@ export default {
 .feed-empty {
   height: 48rpx; line-height: 48rpx; text-align: center;
 }
-.feed-empty-text { font-size: 24rpx; color: #ccc; }
+.feed-empty-text { font-size: 24rpx; color: $facade-text-ghost; }
 
 /* ===== 消息详情弹层 ===== */
 .feed-detail-mask {
@@ -345,7 +345,7 @@ export default {
 
 .feed-detail-card {
   width: 100%; max-height: 80vh; overflow-y: auto;
-  background: #fff; border-radius: 24rpx;
+  background: $app-surface; border-radius: 24rpx;
   padding: 32rpx 28rpx 24rpx;
   animation: feedDetailIn 0.25s ease;
 }
@@ -366,27 +366,27 @@ export default {
 .feed-detail-icon { font-size: 34rpx; }
 
 .feed-detail-head-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-.feed-detail-type { font-size: 26rpx; font-weight: bold; color: #333; }
-.feed-detail-time { font-size: 20rpx; color: #999; margin-top: 4rpx; }
-.feed-detail-close { font-size: 40rpx; color: #bbb; line-height: 1; padding: 0 8rpx; flex-shrink: 0; }
+.feed-detail-type { font-size: 26rpx; font-weight: bold; color: $facade-text-strong; }
+.feed-detail-time { font-size: 20rpx; color: $facade-text-muted; margin-top: 4rpx; }
+.feed-detail-close { font-size: 40rpx; color: $facade-text-ghost-light; line-height: 1; padding: 0 8rpx; flex-shrink: 0; }
 
 .feed-detail-title {
-  display: block; font-size: 30rpx; font-weight: bold; color: #333;
+  display: block; font-size: 30rpx; font-weight: bold; color: $facade-text-strong;
   line-height: 1.4; margin-top: 24rpx;
 }
 .feed-detail-content {
-  display: block; font-size: 26rpx; color: #666; line-height: 1.6; margin-top: 12rpx;
+  display: block; font-size: 26rpx; color: $facade-text-body; line-height: 1.6; margin-top: 12rpx;
 }
 .feed-detail-amount {
   display: inline-block; margin-top: 16rpx;
-  background: linear-gradient(135deg, #F97316, #FB923C);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
   border-radius: 999rpx; padding: 6rpx 20rpx;
 }
-.feed-detail-amount-text { font-size: 24rpx; color: #fff; font-weight: bold; }
+.feed-detail-amount-text { font-size: 24rpx; color: $app-surface; font-weight: bold; }
 .feed-detail-btn {
   margin-top: 28rpx; height: 76rpx; border-radius: 38rpx;
-  background: linear-gradient(135deg, #F97316, #FB923C);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
   display: flex; align-items: center; justify-content: center;
 }
-.feed-detail-btn-text { font-size: 28rpx; color: #fff; font-weight: bold; }
+.feed-detail-btn-text { font-size: 28rpx; color: $app-surface; font-weight: bold; }
 </style>

cfc-frontend/components/FamilyMemberCard.vue

@@ -100,7 +100,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .family-member-card {
   display: flex;
   flex-direction: column;
@@ -108,13 +108,13 @@ export default {
   width: 110rpx;
   padding: 10rpx 8rpx;
   border-radius: 16rpx;
-  background: #FFFFFF;
+  background: $app-surface;
   border: 2rpx solid transparent;
   position: relative;
   flex-shrink: 0;
 }
 .family-member-card.selected {
-  border-color: #F97316;
+  border-color: $brand-primary;
   box-shadow: 0 0 0 2rpx rgba(249, 115, 22, 0.15);
 }
 .card-avatar-wrap {
@@ -141,7 +141,7 @@ export default {
 }
 .card-relation-text {
   font-size: 16rpx;
-  color: #FFFFFF;
+  color: $app-surface;
   font-weight: 500;
   line-height: 1.4;
 }
@@ -211,7 +211,7 @@ export default {
 }
 .energy-value {
   font-size: 20rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: bold;
 }
 .energy-unit {
@@ -226,14 +226,14 @@ export default {
   width: 24rpx;
   height: 24rpx;
   border-radius: 50%;
-  background: #F97316;
+  background: $brand-primary;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .mark-icon {
   font-size: 16rpx;
-  color: #FFFFFF;
+  color: $app-surface;
   font-weight: bold;
 }
 </style>

cfc-frontend/components/FamilyMemberStrip.vue

@@ -356,7 +356,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .family-member-strip {
   margin: 16rpx 0;
   padding: 0 30rpx;
@@ -392,7 +392,7 @@ export default {
   bottom: 0;
   left: 0;
   right: 0;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 24rpx 24rpx 0 0;
   z-index: 1000;
   padding: 20rpx 0;
@@ -412,7 +412,7 @@ export default {
   display: flex;
   align-items: center;
   padding: 24rpx 30rpx;
-  border-bottom: 1rpx solid #F9FAFB;
+  border-bottom: 1rpx solid $facade-fill-gray-50;
 }
 .action-item:active {
   background: #F3F4F6;
@@ -426,7 +426,7 @@ export default {
   color: #374151;
 }
 .action-danger .action-item-text {
-  color: #EF4444;
+  color: $status-danger;
 }
 .action-cancel {
   justify-content: center;
@@ -445,7 +445,7 @@ export default {
 .family-strip-empty {
   margin: 16rpx 0;
   padding: 40rpx 30rpx;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 24rpx;
   display: flex;
   justify-content: center;
@@ -461,8 +461,8 @@ export default {
 .empty-btn {
   margin-top: 24rpx;
   padding: 16rpx 48rpx;
-  background: #F97316;
-  color: #FFFFFF;
+  background: $brand-primary;
+  color: $app-surface;
   font-size: 28rpx;
   border-radius: 40rpx;
 }
@@ -511,7 +511,7 @@ export default {
   height: 100%;
   border-radius: 7rpx;
 }
-.score-bar-fill.trust { background: #10B981; }
+.score-bar-fill.trust { background: $status-success; }
 .score-bar-fill.intimacy { background: #3B82F6; }
 .score-bar-fill.communication { background: #F59E0B; }
 .score-value {

cfc-frontend/components/FamilyRelationGraph.vue

@@ -914,14 +914,14 @@ simulationTick: function() {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .family-graph-wrapper {
   position: relative;
   width: 100%;
   min-height: 200px;
   height: auto;
   margin: 10rpx 0;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 24rpx;
   overflow: hidden;
 }
@@ -957,7 +957,7 @@ simulationTick: function() {
   width: 40rpx;
   height: 40rpx;
   border-radius: 50%;
-  background: #10B981;
+  background: $status-success;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -972,7 +972,7 @@ simulationTick: function() {
 }
 .add-hint-text {
   font-size: 28rpx;
-  color: #FFFFFF;
+  color: $app-surface;
   font-weight: bold;
   line-height: 1;
 }
@@ -981,7 +981,7 @@ simulationTick: function() {
   align-items: center;
   justify-content: center;
   padding: 60rpx 0;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 24rpx;
   margin: 10rpx 0;
 }

cfc-frontend/components/GenerationPicker.vue

@@ -95,21 +95,21 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .generation-picker-wrap {
   width: 100%;
 }
 .picker {
-  border: 1rpx solid #ddd;
+  border: 1rpx solid $facade-border-soft;
   border-radius: 10rpx;
   padding: 20rpx;
   font-size: 28rpx;
-  color: #666;
-  background: #fff;
+  color: $facade-text-body;
+  background: $app-surface;
 }
 .picker-disabled {
-  background: #f5f5f5;
-  color: #999;
+  background: $facade-fill-2;
+  color: $facade-text-muted;
 }
 .form-item {
   margin-bottom: 10rpx;
@@ -117,12 +117,12 @@ export default {
 .form-item .label {
   display: block;
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 10rpx;
   font-weight: bold;
 }
 .required-mark {
-  color: #F97316;
+  color: $brand-primary;
   margin-right: 4rpx;
 }
 .peer-type-wrap {
@@ -144,7 +144,7 @@ export default {
 .radio-icon {
   width: 40rpx;
   height: 40rpx;
-  border: 2rpx solid #ddd;
+  border: 2rpx solid $facade-border-soft;
   border-radius: 50%;
   margin-right: 10rpx;
   display: flex;
@@ -152,16 +152,16 @@ export default {
   justify-content: center;
 }
 .radio-icon.active {
-  border-color: #F97316;
+  border-color: $brand-primary;
 }
 .radio-inner {
   width: 20rpx;
   height: 20rpx;
-  background: #F97316;
+  background: $brand-primary;
   border-radius: 50%;
 }
 .radio-label {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 </style>

cfc-frontend/components/HealthBadge.vue

@@ -34,7 +34,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .health-badge {
   display: flex;
   align-items: center;
@@ -89,7 +89,7 @@ export default {
 }
 .badge-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, #10B981, #34D399);
+  background: linear-gradient(90deg, $status-success, #34D399);
   border-radius: 999rpx;
   transition: width 0.5s ease;
 }

cfc-frontend/components/HealthTimeline.vue

@@ -28,7 +28,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .timeline {
   padding: 0 20rpx;
   margin-bottom: 32rpx;
@@ -55,10 +55,10 @@ export default {
   margin-top: 6rpx;
   z-index: 1;
 }
-.dot-0 { background: #10B981; }
+.dot-0 { background: $status-success; }
 .dot-1 { background: #F59E0B; }
-.dot-2 { background: #6366F1; }
-.dot-3 { background: #F97316; }
+.dot-2 { background: $dim-wisdom; }
+.dot-3 { background: $brand-primary; }
 .dot-4 { background: #FF6B9D; }
 .timeline-line {
   position: absolute;

cfc-frontend/components/LoginGuideCard.vue

@@ -34,10 +34,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .login-guide-card {
   margin: 20rpx 30rpx;
-  background: linear-gradient(135deg, #FFF7ED, #FFE4D6);
+  background: linear-gradient(135deg, $uni-primary-pale, #FFE4D6);
   border-radius: 24rpx;
   padding: 40rpx 32rpx;
   text-align: center;
@@ -46,14 +46,14 @@ export default {
 .guide-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin: 16rpx 0;
   display: block;
 }
 .guide-desc { margin-bottom: 24rpx; }
 .guide-desc-item {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   line-height: 1.8;
   display: block;
 }
@@ -69,8 +69,8 @@ export default {
   font-weight: 500;
 }
 .guide-btn.primary {
-  background: linear-gradient(135deg, #F97316, #FB923C);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
+  color: $app-surface;
 }
 .guide-btn:active { opacity: 0.8; }
 </style>

cfc-frontend/components/OnboardingGuide.vue

@@ -140,7 +140,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 /* ============================================================
    OnboardingGuide — 首次登录引导浮层
    设计体系：统一使用 uni.scss design tokens
@@ -163,7 +163,7 @@ export default {
 .onboarding-card {
   width: 640rpx;
   min-height: 680rpx;
-  background: var(--surface, #FFFFFF);
+  background: var(--surface, $app-surface);
   border-radius: var(--radius-xl, 32rpx);
   display: flex;
   flex-direction: column;
@@ -177,7 +177,7 @@ export default {
 .onboarding-topbar {
   width: 100%;
   height: 12rpx;
-  background: var(--color-primary, #F97316);
+  background: var(--color-primary, $brand-primary);
   flex-shrink: 0;
 }
 
@@ -229,7 +229,7 @@ export default {
 .onboarding-title--intro {
   font-size: 32rpx;
   font-weight: 800;
-  color: var(--color-primary, #F97316);
+  color: var(--color-primary, $brand-primary);
   line-height: 1.4;
 }
 
@@ -254,7 +254,7 @@ export default {
 }
 
 .dot.active {
-  background: var(--color-primary, #F97316);
+  background: var(--color-primary, $brand-primary);
   transform: scale(1.3);
 }
 
@@ -272,8 +272,8 @@ export default {
   width: 100%;
   height: 88rpx;
   border-radius: 999rpx;
-  background: var(--color-primary, #F97316);
-  color: #FFFFFF;
+  background: var(--color-primary, $brand-primary);
+  color: $app-surface;
   font-size: 32rpx;
   font-weight: 700;
   display: flex;
@@ -290,7 +290,7 @@ export default {
 
 /* 最后一步：暖珊瑚色按钮 */
 .onboarding-btn--last {
-  background: var(--color-primary, #F97316);
+  background: var(--color-primary, $brand-primary);
   box-shadow: 0 4rpx 16rpx rgba(249, 115, 22, 0.30);
 }
 </style>

cfc-frontend/components/OnboardingProgressBar.vue

@@ -71,11 +71,11 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .opb-card {
   margin: 20rpx 24rpx;
   padding: 24rpx 28rpx;
-  background: linear-gradient(135deg, #FFF7ED, #FFEDD5);
+  background: linear-gradient(135deg, $uni-primary-pale, #FFEDD5);
   border: 2rpx solid #FED7AA;
   border-radius: 20rpx;
 }
@@ -102,7 +102,7 @@ export default {
 }
 .opb-bar-fill {
   height: 100%;
-  background: linear-gradient(90deg, #F97316, #FF8C42);
+  background: linear-gradient(90deg, $brand-primary, $dim-body);
   border-radius: 8rpx;
 }
 .opb-tip {

cfc-frontend/components/PlayfulButton.vue

@@ -33,7 +33,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .playful-btn {
   display: inline-flex;
   align-items: center;
@@ -51,14 +51,14 @@ export default {
 
 /* ---- Primary ---- */
 .playful-btn--primary {
-  background: var(--color-primary, #F97316);
-  color: #fff;
+  background: var(--color-primary, $brand-primary);
+  color: $app-surface;
   box-shadow: 0 2px 8px rgba(249,115,22,0.3);
 }
 
 /* ---- Secondary ---- */
 .playful-btn--secondary {
-  background: var(--surface, #ffffff);
+  background: var(--surface, $app-surface);
   color: var(--text, #1E293B);
   border: 2rpx solid var(--border, #CBD5E1);
   box-shadow: 0 2px 6px rgba(249,115,22,0.08);
@@ -67,28 +67,28 @@ export default {
 /* ---- Success ---- */
 .playful-btn--success {
   background: var(--color-success, #22C55E);
-  color: #fff;
+  color: $app-surface;
   box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
 }
 
 /* ---- Warning ---- */
 .playful-btn--warning {
   background: var(--color-warning, #F59E0B);
-  color: #fff;
+  color: $app-surface;
   box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
 }
 
 /* ---- Error ---- */
 .playful-btn--error {
-  background: var(--color-error, #EF4444);
-  color: #fff;
+  background: var(--color-error, $status-danger);
+  color: $app-surface;
   box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
 }
 
 /* ---- Clay (孩子端玩具风) ---- */
 .playful-btn--clay {
-  background: var(--color-primary, #F97316);
-  color: #fff;
+  background: var(--color-primary, $brand-primary);
+  color: $app-surface;
   border: 2rpx solid var(--border, #CBD5E1);
   box-shadow: 0 2px 8px rgba(249,115,22,0.15);
 }
@@ -96,8 +96,8 @@ export default {
 /* ---- Outline ---- */
 .playful-btn--outline {
   background: transparent;
-  color: var(--color-primary, #F97316);
-  border: 2rpx solid var(--color-primary, #F97316);
+  color: var(--color-primary, $brand-primary);
+  border: 2rpx solid var(--color-primary, $brand-primary);
 }
 
 /* ---- Sizes ---- */

cfc-frontend/components/PlayfulCard.vue

@@ -53,9 +53,9 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .playful-card {
-  background: var(--surface, #ffffff);
+  background: var(--surface, $app-surface);
   border-radius: 20rpx;
   padding: 24rpx;
   transition: transform .15s ease, box-shadow .2s ease;
@@ -66,19 +66,19 @@ export default {
 }
 .playful-card--clay {
   border: 1px solid var(--border-light, #E2E8F0);
-  background: var(--surface, #FFFFFF);
+  background: var(--surface, $app-surface);
   box-shadow: var(--shadow-md);
 }
 .playful-card--bordered {
   border: 1px solid var(--border-light, #E2E8F0);
 }
 .playful-card--teacher {
-  border-left: 4px solid var(--color-primary, #F97316);
+  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);
   box-shadow: var(--shadow-sm);
-  background: var(--surface, #ffffff);
+  background: var(--surface, $app-surface);
 }
 .playful-card--shadow-none { box-shadow: none; }
 .playful-card--shadow-sm { box-shadow: var(--shadow-sm); }

cfc-frontend/components/ProfileBadges.vue

@@ -111,7 +111,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .section {
   margin: 20rpx 30rpx;
 }
@@ -124,18 +124,18 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .section-more {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .badge-grid {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -162,12 +162,12 @@ export default {
   box-shadow: 0 4rpx 16rpx rgba(253,160,91,0.3);
 }
 .badge-icon-wrap.locked {
-  background: #f0f0f0;
+  background: $facade-fill;
   opacity: 0.5;
 }
 .badge-name {
   font-size: 20rpx;
-  color: #999;
+  color: $facade-text-muted;
   text-align: center;
 }
 </style>

cfc-frontend/components/ProfileGrowth.vue

@@ -82,7 +82,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .section {
   margin: 20rpx 30rpx;
 }
@@ -95,15 +95,15 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .section-more {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .report-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 30rpx;
   display: flex;
@@ -123,12 +123,12 @@ export default {
 }
 .report-label {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 8rpx;
 }
 .report-divider {
   width: 1rpx;
   height: 60rpx;
-  background: #f0f0f0;
+  background: $facade-fill;
 }
 </style>

cfc-frontend/components/RadarChart.vue

@@ -848,10 +848,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .radar-chart-wrap {
   margin: 20rpx 30rpx;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 20rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
   overflow: hidden;

cfc-frontend/components/RecommendedFeed.vue

@@ -138,7 +138,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .section {
   margin: 20rpx 20rpx;
 }
@@ -151,11 +151,11 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .section-more {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .feed-list {
   display: flex;
@@ -165,7 +165,7 @@ export default {
 }
 .feed-card {
   width: calc(50% - 8rpx);
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -178,7 +178,7 @@ export default {
   width: 100%;
   height: 200rpx;
   border-radius: 12rpx;
-  background: #f0f0f0;
+  background: $facade-fill;
   display: block;
   margin-bottom: 12rpx;
 }
@@ -186,7 +186,7 @@ export default {
   width: 100%;
   height: 200rpx;
   border-radius: 12rpx;
-  background: linear-gradient(135deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+  background: linear-gradient(135deg, $facade-fill 25%, #e8e8e8 50%, $facade-fill 75%);
   background-size: 200% 100%;
   animation: shimmer 1.5s infinite;
   margin-bottom: 12rpx;
@@ -213,7 +213,7 @@ export default {
 }
 .product-badge {
   background: #FFF0E6;
-  color: #F97316;
+  color: $brand-primary;
 }
 .activity-badge {
   background: #FEF2E6;
@@ -229,7 +229,7 @@ export default {
 .status-ended { background: #F3F4F6; color: #9CA3AF; }
 .feed-title {
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
   display: block;
   margin-bottom: 6rpx;
@@ -238,14 +238,14 @@ export default {
 }
 .feed-title-placeholder {
   font-size: 26rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
   display: block;
   margin-bottom: 6rpx;
   min-height: 36rpx;
 }
 .feed-price {
   font-size: 24rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: 600;
 }
 .fee-free {
@@ -259,11 +259,11 @@ export default {
 }
 .feed-date {
   font-size: 20rpx;
-  color: #bbb;
+  color: $facade-text-ghost-light;
 }
 .feed-sub-placeholder {
   font-size: 24rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
 }
 .line-clamp-2 {
   overflow: hidden;

cfc-frontend/components/address-picker.vue

@@ -367,7 +367,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .address-picker {
   width: 100%;
 }
@@ -379,18 +379,18 @@ export default {
   padding: 24rpx 20rpx;
   background: #f8f8f8;
   border-radius: 12rpx;
-  border: 2rpx solid #eee;
+  border: 2rpx solid $facade-hairline-2;
 }
 
 .address-text {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   flex: 1;
 }
 
 .address-arrow {
   font-size: 32rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-left: 10rpx;
 }
 
@@ -409,7 +409,7 @@ export default {
 
 .picker-panel {
   width: 100%;
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx 24rpx 0 0;
   max-height: 70vh;
   display: flex;
@@ -422,24 +422,24 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 30rpx 30rpx 20rpx;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1px solid $facade-hairline-2;
 }
 
 .picker-btn {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
   padding: 10rpx 20rpx;
 }
 
 .picker-confirm {
-  color: #f97316;
+  color: $brand-primary;
   font-weight: bold;
 }
 
 .picker-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 /* 面包屑导航 */
@@ -447,27 +447,27 @@ export default {
   display: flex;
   align-items: center;
   padding: 20rpx 30rpx;
-  background: #fafafa;
-  border-bottom: 1px solid #eee;
+  background: $facade-fill-ghost;
+  border-bottom: 1px solid $facade-hairline-2;
   flex-wrap: wrap;
 }
 
 .crumb {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   padding: 8rpx 16rpx;
-  background: #eee;
+  background: $facade-hairline-2;
   border-radius: 20rpx;
 }
 
 .crumb-active {
-  background: #f97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
 }
 
 .crumb-arrow {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin: 0 8rpx;
 }
 
@@ -484,29 +484,29 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 28rpx 40rpx;
-  border-bottom: 1px solid #f5f5f5;
+  border-bottom: 1px solid $facade-fill-2;
 }
 
 .item-text {
   font-size: 30rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .item-check {
   font-size: 32rpx;
-  color: #f97316;
+  color: $brand-primary;
   font-weight: bold;
 }
 
 .picker-item-selected .item-text {
-  color: #f97316;
+  color: $brand-primary;
   font-weight: bold;
 }
 
 .picker-loading {
   padding: 40rpx;
   text-align: center;
-  color: #999;
+  color: $facade-text-muted;
   font-size: 28rpx;
 }
 </style>

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

@@ -122,12 +122,12 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .daily-task-card {
   margin: 24rpx 24rpx 0;
   padding: 28rpx;
   border-radius: 24rpx;
-  background: #FFFFFF;
+  background: $app-surface;
   box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
 }
 .daily-task-head {
@@ -184,12 +184,12 @@ export default {
 }
 .daily-task-go {
   font-size: 26rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: 500;
 }
 .daily-task-done {
   font-size: 26rpx;
-  color: #10B981;
+  color: $status-success;
   font-weight: 600;
 }
 .daily-task-all {
@@ -201,7 +201,7 @@ export default {
 }
 .daily-task-all-text {
   font-size: 28rpx;
-  color: #10B981;
+  color: $status-success;
   font-weight: 500;
 }
 </style>

cfc-frontend/components/gate-lock.vue

@@ -143,7 +143,7 @@ export default {
   height: 80rpx;
   line-height: 80rpx;
   font-size: 28rpx;
-  color: #fff;
+  color: $app-surface;
   background: linear-gradient(135deg, $brand-primary, $brand-primary-dark);
   border: none;
   border-radius: 40rpx;

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

@@ -259,7 +259,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .hand-signature {
   width: 100%;
 }
@@ -277,7 +277,7 @@ export default {
   margin-top: 2rpx;
   border: 2rpx solid #c8c9cc;
   border-radius: 6rpx;
-  background: #fff;
+  background: $app-surface;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -288,26 +288,26 @@ export default {
 }
 .agree-tick {
   font-size: 22rpx;
-  color: #fff;
+  color: $app-surface;
   line-height: 1;
 }
 .agree-text {
   flex: 1;
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
   line-height: 1.5;
 }
 .signature-canvas-wrap {
   position: relative;
   width: 100%;
-  border: 2rpx dashed #ccc;
+  border: 2rpx dashed $facade-text-ghost;
   border-radius: 12rpx;
-  background: #fff;
+  background: $app-surface;
   overflow: hidden;
 }
 .signature-canvas {
   display: block;
-  background: #fff;
+  background: $app-surface;
 }
 .signature-preview {
   position: absolute;
@@ -328,8 +328,8 @@ export default {
   line-height: 72rpx;
   margin-right: 20rpx;
   font-size: 26rpx;
-  color: #666;
-  background: #f5f5f5;
+  color: $facade-text-body;
+  background: $facade-fill-2;
   border: none;
   border-radius: 36rpx;
 }
@@ -341,7 +341,7 @@ export default {
   height: 72rpx;
   line-height: 72rpx;
   font-size: 26rpx;
-  color: #fff;
+  color: $app-surface;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   border: none;
   border-radius: 36rpx;

cfc-frontend/components/login-sheet.vue

@@ -227,7 +227,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 /* ===== 浮层遮罩 ===== */
 .login-sheet-overlay {
   position: fixed;
@@ -274,7 +274,7 @@ export default {
 .login-sheet-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 /* ===== 滚动区域 ===== */
@@ -305,17 +305,17 @@ export default {
 .app-name {
   font-size: 44rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-top: 16rpx;
 }
 .identity {
   font-size: 26rpx;
-  color: #f97316;
+  color: $brand-primary;
   margin-top: 8rpx;
 }
 .slogan {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 12rpx;
   text-align: center;
 }
@@ -333,7 +333,7 @@ export default {
   line-height: 1.6;
 }
 .concept-highlight {
-  color: #f97316;
+  color: $brand-primary;
   font-weight: 600;
 }
 .loop-row {
@@ -355,17 +355,17 @@ export default {
   flex-shrink: 0;  /* 防止被压缩导致文本换行 */
   white-space: nowrap;
 }
-.loop-pill-indigo { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
-.loop-pill-green { background: rgba(16, 185, 129, 0.12); color: #10b981; }
+.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-red { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
+.loop-pill-red { background: rgba(239, 68, 68, 0.12); color: $status-danger; }
 .loop-pill-text {
   margin-left: 4rpx;
   white-space: nowrap;  /* 禁止四字步骤文本换行 */
 }
 .loop-arrow {
   font-size: 24rpx;
-  color: #bbb;
+  color: $facade-text-ghost-light;
   padding: 0 2rpx;
   flex-shrink: 0;  /* 箭头不被压缩 */
 }
@@ -388,15 +388,15 @@ export default {
   border-radius: 999rpx;
   padding: 8rpx 14rpx;
   font-size: 22rpx;
-  color: #fff;
+  color: $app-surface;
   margin: 0 8rpx;  /* 使用 margin 替代 gap，微信小程序不支持 gap */
   white-space: nowrap;
 }
-.dim-tag-body { background: #10b981; }
-.dim-tag-wisdom { background: #6366f1; }
+.dim-tag-body { background: $status-success; }
+.dim-tag-wisdom { background: $dim-wisdom; }
 .dim-tag-wealth { background: #f59e0b; }
 .dim-tag-action { background: #14b8a6; }
-.dim-tag-mind { background: #ef4444; }
+.dim-tag-mind { background: $status-danger; }
 
 /* ===== 登录表单 ===== */
 .login-form {
@@ -406,8 +406,8 @@ export default {
   width: 100%;
   height: 96rpx;
   border-radius: 48rpx;
-  background: linear-gradient(135deg, #f97316, #fb923c);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
+  color: $app-surface;
   font-size: 32rpx;
   font-weight: 600;
   display: flex;
@@ -435,7 +435,7 @@ export default {
 }
 .skip-btn {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
   text-decoration: underline;
 }
 
@@ -448,9 +448,9 @@ export default {
   flex-wrap: wrap;
   margin-top: 24rpx;
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .link {
-  color: #f97316;
+  color: $brand-primary;
 }
 </style>

cfc-frontend/components/wuxing-sandbox.vue

@@ -651,7 +651,7 @@ export default {
   align-items: center;
   gap: 6rpx;
   font-size: 22rpx;
-  color: #fff;
+  color: $app-surface;
   background: linear-gradient(135deg, #667eea, #764ba2);
   padding: 10rpx 20rpx;
   border-radius: 28rpx;
@@ -803,7 +803,7 @@ export default {
   border-left: none;
 }
 .toggle-item--active {
-  color: #fff;
+  color: $app-surface;
   background: linear-gradient(135deg, $brand-primary, $brand-primary-dark);
   border-color: $brand-primary;
 }

cfc-frontend/custom-tab-bar/index.vue

@@ -163,7 +163,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .tab-bar-wrap {
   position: fixed;
   bottom: 0;
@@ -175,9 +175,9 @@ export default {
 .tab-bar {
   display: flex;
   height: 100rpx;
-  background: #fff;
+  background: $app-surface;
   padding-bottom: env(safe-area-inset-bottom);
-  border-top: 1rpx solid #eee;
+  border-top: 1rpx solid $facade-hairline-2;
   position: relative;
 }
 
@@ -200,11 +200,11 @@ export default {
 
 .tab-text {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .tab-item.active .tab-text {
-  color: #F97316;
+  color: $brand-primary;
 }
 
 /* 中间五维按钮（占 20% 槽位） */
@@ -224,7 +224,7 @@ export default {
   width: 88rpx;
   height: 88rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #F97316, #FB923C);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -239,7 +239,7 @@ export default {
 }
 .center-btn-label {
   font-size: 20rpx;
-  color: #999;
+  color: $facade-text-muted;
   text-align: center;
   margin-top: 2rpx;
 }
@@ -298,7 +298,7 @@ export default {
 }
 .dim-fan-label {
   font-size: 22rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: 600;
   margin-top: 8rpx;
   text-align: center;

cfc-frontend/pages/achievement/index.vue

@@ -106,7 +106,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   min-height: 100vh;
   background: #f5f7fa;
@@ -116,7 +116,7 @@ export default {
 }
 .stats-card {
   display: flex;
-  background: #fff;
+  background: $app-surface;
   padding: 40rpx 0;
   margin-bottom: 20rpx;
 }
@@ -128,16 +128,16 @@ export default {
   display: block;
   font-size: 48rpx;
   font-weight: 700;
-  color: #F97316;
+  color: $brand-primary;
 }
 .stat-label {
   display: block;
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 8rpx;
 }
 .badge-section, .goals-section {
-  background: #fff;
+  background: $app-surface;
   margin: 0 30rpx 20rpx;
   border-radius: 20rpx;
   padding: 30rpx;
@@ -145,7 +145,7 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 24rpx;
 }
 .badge-grid {
@@ -178,13 +178,13 @@ export default {
 .badge-name {
   display: block;
   font-size: 22rpx;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 4rpx;
 }
 .badge-desc {
   display: block;
   font-size: 18rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .empty-state {
   text-align: center;
@@ -198,13 +198,13 @@ export default {
 .empty-text {
   display: block;
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-bottom: 12rpx;
 }
 .empty-hint {
   display: block;
   font-size: 24rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
 }
 .goal-item {
   margin-bottom: 24rpx;
@@ -219,21 +219,21 @@ export default {
 }
 .goal-name {
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .goal-progress {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .progress-bar {
   height: 12rpx;
-  background: #f0f0f0;
+  background: $facade-fill;
   border-radius: 6rpx;
   overflow: hidden;
 }
 .progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, #F97316, #FB923C);
+  background: linear-gradient(90deg, $brand-primary, $brand-primary-light);
   border-radius: 6rpx;
   transition: width 0.3s;
 }

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

@@ -918,10 +918,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   min-height: 100vh;
-  background: #FFF7ED;
+  background: $uni-primary-pale;
 }
 
 /* 加载 / 错误 / 空状态 */
@@ -938,7 +938,7 @@ export default {
   width: 60rpx;
   height: 60rpx;
   border: 4rpx solid #FDE68A;
-  border-top-color: #F97316;
+  border-top-color: $brand-primary;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   margin-bottom: 20rpx;
@@ -950,7 +950,7 @@ export default {
 .error-text,
 .empty-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-bottom: 20rpx;
 }
 .error-icon {
@@ -958,8 +958,8 @@ export default {
   margin-bottom: 16rpx;
 }
 .retry-btn {
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
   border: none;
   border-radius: 40rpx;
   padding: 12rpx 40rpx;
@@ -978,7 +978,7 @@ export default {
 }
 .placeholder-cover {
   height: 400rpx;
-  background: #f0f0f0;
+  background: $facade-fill;
 }
 
 /* 信息区 */
@@ -988,7 +988,7 @@ export default {
 .activity-title {
   font-size: calc(36rpx * var(--font-scale, 1));
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.4;
 }
 .status-row {
@@ -1000,15 +1000,15 @@ export default {
   padding: 4rpx 16rpx;
   border-radius: 8rpx;
 }
-.status-draft { background: #F5F5F5; color: #999; }
+.status-draft { background: $facade-fill-2; color: $facade-text-muted; }
 .status-published { background: #F0FDF4; color: #22C55E; }
-.status-ended { background: #F5F5F5; color: #999; }
-.status-upcoming { background: #FFF7ED; color: #F97316; }
+.status-ended { background: $facade-fill-2; color: $facade-text-muted; }
+.status-upcoming { background: $uni-primary-pale; color: $brand-primary; }
 
 /* 元信息列表 */
 .meta-list {
   margin-top: 24rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
 }
@@ -1037,7 +1037,7 @@ export default {
   display: block;
 }
 .member-fee-link {
-  color: #F97316;
+  color: $brand-primary;
   font-weight: 500;
   text-decoration: underline;
   margin-top: 4rpx;
@@ -1046,7 +1046,7 @@ export default {
 /* 活动介绍 */
 .desc-section {
   margin-top: 30rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
 }
@@ -1094,7 +1094,7 @@ export default {
   left: 0;
   right: 0;
   bottom: 0;
-  background: #fff;
+  background: $app-surface;
   padding: 20rpx 30rpx;
   padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
   display: flex;
@@ -1109,11 +1109,11 @@ export default {
 }
 .bottom-type {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .bottom-vendor {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 4rpx;
 }
 .action-btns {
@@ -1122,8 +1122,8 @@ export default {
   gap: 16rpx;
 }
 .btn-checkin {
-  background: linear-gradient(135deg, #F97316, #FB923C);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
+  color: $app-surface;
   border: none;
   border-radius: 40rpx;
   padding: 16rpx 48rpx;
@@ -1145,8 +1145,8 @@ export default {
 
 /* 报名按钮 */
 .btn-register {
-  background: linear-gradient(135deg, #10B981, #34D399);
-  color: #fff;
+  background: linear-gradient(135deg, $status-success, #34D399);
+  color: $app-surface;
   border: none;
   border-radius: 40rpx;
   padding: 16rpx 32rpx;
@@ -1159,8 +1159,8 @@ export default {
 .btn-register:active { opacity: 0.85; }
 .btn-register-loading { opacity: 0.7; }
 .btn-register-done {
-  background: #F5F5F5;
-  color: #999;
+  background: $facade-fill-2;
+  color: $facade-text-muted;
   border: none;
   border-radius: 40rpx;
   padding: 16rpx 32rpx;
@@ -1170,9 +1170,9 @@ export default {
   text-align: center;
 }
 .btn-cancel {
-  background: #fff;
-  color: #999;
-  border: 2rpx solid #ddd;
+  background: $app-surface;
+  color: $facade-text-muted;
+  border: 2rpx solid $facade-border-soft;
   border-radius: 40rpx;
   padding: 14rpx 28rpx;
   font-size: 24rpx;
@@ -1196,7 +1196,7 @@ export default {
   z-index: 999;
 }
 .penalty-content {
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 48rpx 40rpx;
   width: 560rpx;
@@ -1205,20 +1205,20 @@ export default {
 .penalty-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #EF4444;
+  color: $status-danger;
   display: block;
   margin-bottom: 20rpx;
 }
 .penalty-desc {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   display: block;
   margin-bottom: 40rpx;
   line-height: 1.6;
 }
 .penalty-btn {
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
   border: none;
   border-radius: 40rpx;
   padding: 16rpx 60rpx;
@@ -1229,23 +1229,23 @@ export default {
 .feedback-section {
   padding: 30rpx;
   margin: 20rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
 }
 .feedback-header { margin-bottom: 20rpx; }
-.feedback-title { font-size: calc(32rpx * var(--font-scale, 1)); font-weight: bold; color: #333; }
+.feedback-title { font-size: calc(32rpx * var(--font-scale, 1)); font-weight: bold; color: $facade-text-strong; }
 .feedback-btn {
-  background: #F97316; color: #fff; border: none;
+  background: $brand-primary; color: $app-surface; border: none;
   border-radius: 40rpx; padding: 20rpx 40rpx; font-size: 28rpx;
   text-align: center;
 }
 .feedback-submitted { padding: 10rpx 0; }
 .feedback-ratings-display { margin-bottom: 16rpx; }
 .fr-row { display: flex; justify-content: space-between; padding: 8rpx 0; }
-.fr-label { font-size: 28rpx; color: #333; }
-.fr-stars { font-size: 28rpx; color: #F97316; }
-.feedback-comment-text { font-size: calc(26rpx * var(--font-scale, 1)); color: #666; margin: 10rpx 0; line-height: 1.5; }
-.feedback-thanks { font-size: 24rpx; color: #999; text-align: center; margin-top: 16rpx; }
+.fr-label { font-size: 28rpx; color: $facade-text-strong; }
+.fr-stars { font-size: 28rpx; color: $brand-primary; }
+.feedback-comment-text { font-size: calc(26rpx * var(--font-scale, 1)); color: $facade-text-body; margin: 10rpx 0; line-height: 1.5; }
+.feedback-thanks { font-size: 24rpx; color: $facade-text-muted; text-align: center; margin-top: 16rpx; }
 .feedback-modal-overlay {
   position: fixed;
   top: 0;
@@ -1259,40 +1259,40 @@ export default {
   z-index: 999;
 }
 .feedback-modal {
-  background: #fff; border-radius: 20rpx; padding: 40rpx;
+  background: $app-surface; border-radius: 20rpx; padding: 40rpx;
   width: 80%; max-width: 600rpx;
 }
 .feedback-modal-title {
-  font-size: 34rpx; font-weight: bold; color: #333;
+  font-size: 34rpx; font-weight: bold; color: $facade-text-strong;
   text-align: center; margin-bottom: 30rpx;
 }
 .rating-row {
   display: flex; justify-content: space-between; align-items: center;
   padding: 16rpx 0;
 }
-.rating-label { font-size: 28rpx; color: #333; min-width: 120rpx; }
+.rating-label { font-size: 28rpx; color: $facade-text-strong; min-width: 120rpx; }
 .stars { display: flex; }
-.star-icon { font-size: 40rpx; color: #ddd; padding: 0 6rpx; }
-.star-active { color: #F97316; }
+.star-icon { font-size: 40rpx; color: $facade-border-soft; padding: 0 6rpx; }
+.star-active { color: $brand-primary; }
 .feedback-textarea {
   width: 100%; height: 160rpx; margin-top: 20rpx;
-  border: 1rpx solid #eee; border-radius: 12rpx;
+  border: 1rpx solid $facade-hairline-2; border-radius: 12rpx;
   padding: 16rpx; font-size: 26rpx; box-sizing: border-box;
 }
 .feedback-modal-actions {
   display: flex; justify-content: space-between; margin-top: 30rpx;
 }
 .feedback-cancel-btn {
-  flex: 1; background: #f5f5f5; color: #666; border: none;
+  flex: 1; background: $facade-fill-2; color: $facade-text-body; border: none;
   border-radius: 40rpx; padding: 20rpx; font-size: 28rpx;
   text-align: center; margin-right: 20rpx;
 }
 .feedback-submit-btn {
-  flex: 1; background: #F97316; color: #fff; border: none;
+  flex: 1; background: $brand-primary; color: $app-surface; border: none;
   border-radius: 40rpx; padding: 20rpx; font-size: 28rpx;
   text-align: center;
 }
-.share-btn { height: 64rpx; line-height: 64rpx; background: #fff; border: 2rpx solid #F97316; color: #F97316; font-size: 24rpx; border-radius: 32rpx; padding: 0 24rpx; display: flex; align-items: center; flex-shrink: 0; }
+.share-btn { height: 64rpx; line-height: 64rpx; background: $app-surface; border: 2rpx solid $brand-primary; color: $brand-primary; font-size: 24rpx; border-radius: 32rpx; padding: 0 24rpx; display: flex; align-items: center; flex-shrink: 0; }
 .share-btn::after { border: none; }
 .share-btn-icon { font-size: 28rpx; margin-right: 6rpx; }
 .share-btn-text { font-size: 24rpx; font-weight: 600; }
@@ -1311,7 +1311,7 @@ export default {
   z-index: 999;
 }
 .reg-modal {
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 40rpx;
   width: 85%;
@@ -1321,7 +1321,7 @@ export default {
 .reg-modal-title {
   font-size: 34rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   text-align: center;
   display: block;
   margin-bottom: 30rpx;
@@ -1351,8 +1351,8 @@ export default {
   margin-bottom: 10rpx;
 }
 .reg-family-item-selected {
-  background: #FFF7ED;
-  border: 2rpx solid #F97316;
+  background: $uni-primary-pale;
+  border: 2rpx solid $brand-primary;
 }
 .reg-family-info {
   display: flex;
@@ -1361,18 +1361,18 @@ export default {
 }
 .reg-family-name {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   margin-right: 12rpx;
 }
 .reg-family-relation {
   font-size: 22rpx;
-  color: #999;
-  background: #eee;
+  color: $facade-text-muted;
+  background: $facade-hairline-2;
   padding: 2rpx 12rpx;
   border-radius: 8rpx;
 }
 .reg-checkmark {
-  color: #F97316;
+  color: $brand-primary;
   font-size: 32rpx;
   font-weight: bold;
 }
@@ -1388,12 +1388,12 @@ export default {
 }
 .reg-input {
   flex: 1;
-  background: #f5f5f5;
+  background: $facade-fill-2;
   border: none;
   border-radius: 12rpx;
   padding: 16rpx 20rpx;
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .reg-input-name {
   flex: 2;
@@ -1402,18 +1402,18 @@ export default {
   flex: 3;
 }
 .reg-remove {
-  color: #EF4444;
+  color: $status-danger;
   font-size: 28rpx;
   padding: 10rpx;
   flex-shrink: 0;
 }
 .reg-add-btn {
   background: none;
-  border: 2rpx dashed #ddd;
+  border: 2rpx dashed $facade-border-soft;
   border-radius: 12rpx;
   padding: 16rpx;
   font-size: 26rpx;
-  color: #F97316;
+  color: $brand-primary;
   text-align: center;
   width: 100%;
   margin-top: 6rpx;
@@ -1422,10 +1422,10 @@ export default {
   text-align: center;
   font-size: 30rpx;
   font-weight: bold;
-  color: #F97316;
+  color: $brand-primary;
   margin-bottom: 24rpx;
   padding: 16rpx;
-  background: #FFF7ED;
+  background: $uni-primary-pale;
   border-radius: 12rpx;
 }
 .reg-actions {
@@ -1436,8 +1436,8 @@ export default {
 }
 .reg-cancel {
   flex: 1;
-  background: #f5f5f5;
-  color: #666;
+  background: $facade-fill-2;
+  color: $facade-text-body;
   border: none;
   border-radius: 40rpx;
   padding: 20rpx;
@@ -1446,8 +1446,8 @@ export default {
 }
 .reg-submit {
   flex: 1;
-  background: linear-gradient(135deg, #10B981, #34D399);
-  color: #fff;
+  background: linear-gradient(135deg, $status-success, #34D399);
+  color: $app-surface;
   border: none;
   border-radius: 40rpx;
   padding: 20rpx;

cfc-frontend/pages/activity/create.vue

@@ -565,7 +565,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   min-height: 100vh;
   background: #F5F7FA;
@@ -573,7 +573,7 @@ export default {
 }
 
 .form-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 32rpx 28rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
@@ -697,7 +697,7 @@ export default {
 
 .cover-action-danger {
   font-size: 24rpx;
-  color: #ef4444;
+  color: $status-danger;
   text-decoration: underline;
 }
 
@@ -718,12 +718,12 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: #fff;
+  background: $app-surface;
 }
 
 .poster-tpl-active {
-  border-color: #F97316;
-  background: #FFF7ED;
+  border-color: $brand-primary;
+  background: $uni-primary-pale;
 }
 
 .tpl-colors {
@@ -761,8 +761,8 @@ export default {
 .btn-preview {
   padding: 12rpx 32rpx;
   border-radius: 32rpx;
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
   font-size: 26rpx;
 }
 
@@ -786,14 +786,14 @@ export default {
 }
 
 .btn-save {
-  background: #fff;
-  color: #F97316;
-  border: 2rpx solid #F97316;
+  background: $app-surface;
+  color: $brand-primary;
+  border: 2rpx solid $brand-primary;
 }
 
 .btn-publish {
-  background: linear-gradient(135deg, #F97316, #FB923C);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
+  color: $app-surface;
 }
 
 .loading {
@@ -814,7 +814,7 @@ export default {
   width: 60rpx;
   height: 60rpx;
   border: 4rpx solid #FED7AA;
-  border-top: 4rpx solid #F97316;
+  border-top: 4rpx solid $brand-primary;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   margin-bottom: 16rpx;

cfc-frontend/pages/activity/index.vue

@@ -889,19 +889,19 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .activity-container {
   min-height: 100vh;
-  background: #F5F5F5;
+  background: $facade-fill-2;
   display: flex;
   flex-direction: column;
 }
 
 .tab-bar {
-  background: #fff;
+  background: $app-surface;
   display: flex;
   flex-direction: row;
-  border-bottom: 1rpx solid #eee;
+  border-bottom: 1rpx solid $facade-hairline-2;
 }
 
 .tab-item {
@@ -912,16 +912,16 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 }
 
 .tab-item.active {
-  border-bottom-color: #F97316;
+  border-bottom-color: $brand-primary;
 }
 
 .tab-label {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 
 .tab-item.active .tab-label {
-  color: #F97316;
+  color: $brand-primary;
   font-weight: 600;
 }
 
@@ -932,7 +932,7 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 
 .filter-scroll {
   padding: 20rpx 24rpx;
-  background: #fff;
+  background: $app-surface;
 }
 
 .filter-chips {
@@ -944,23 +944,23 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 .filter-chip {
   padding: 12rpx 24rpx;
   border-radius: 16px;
-  background: #fff;
-  border: 1rpx solid #ddd;
+  background: $app-surface;
+  border: 1rpx solid $facade-border-soft;
   flex-shrink: 0;
 }
 
 .filter-chip.active {
-  background: #FFF7ED;
-  border-color: #F97316;
+  background: $uni-primary-pale;
+  border-color: $brand-primary;
 }
 
 .filter-label {
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 
 .filter-chip.active .filter-label {
-  color: #F97316;
+  color: $brand-primary;
   font-weight: 500;
 }
 
@@ -972,7 +972,7 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 }
 
 .activity-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 12rpx;
   padding: 20rpx;
   display: flex;
@@ -984,7 +984,7 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
   height: 144rpx;
   border-radius: 8rpx;
   flex-shrink: 0;
-  background: #f0f0f0;
+  background: $facade-fill;
 }
 
 .card-info {
@@ -997,7 +997,7 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 .card-title {
   font-size: calc(28rpx * var(--font-scale, 1));
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1006,7 +1006,7 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 
 .card-meta {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 8rpx;
 }
 
@@ -1026,8 +1026,8 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 }
 
 .status-pending {
-  background: #FFF7ED;
-  color: #F97316;
+  background: $uni-primary-pale;
+  color: $brand-primary;
 }
 
 .status-approved {
@@ -1037,12 +1037,12 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 
 .status-rejected {
   background: #FEF2F2;
-  color: #EF4444;
+  color: $status-danger;
 }
 
 .status-cancelled {
-  background: #F5F5F5;
-  color: #999;
+  background: $facade-fill-2;
+  color: $facade-text-muted;
 }
 
 .status-checked_in {
@@ -1051,13 +1051,13 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 }
 
 .status-upcoming {
-  background: #FFF7ED;
-  color: #F97316;
+  background: $uni-primary-pale;
+  color: $brand-primary;
 }
 
 .status-ended {
-  background: #F5F5F5;
-  color: #999;
+  background: $facade-fill-2;
+  color: $facade-text-muted;
 }
 
 .status-published {
@@ -1066,13 +1066,13 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 }
 
 .status-draft {
-  background: #FFF7ED;
-  color: #F97316;
+  background: $uni-primary-pale;
+  color: $brand-primary;
 }
 
 .card-price {
   font-size: 28rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: 600;
 }
 
@@ -1090,9 +1090,9 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 .btn-cancel {
   padding: 8rpx 20rpx;
   font-size: 22rpx;
-  color: #999;
-  background: #fff;
-  border: 1rpx solid #ddd;
+  color: $facade-text-muted;
+  background: $app-surface;
+  border: 1rpx solid $facade-border-soft;
   border-radius: 20rpx;
   line-height: 1.5;
 }
@@ -1100,8 +1100,8 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 .btn-checkin {
   padding: 8rpx 20rpx;
   font-size: 22rpx;
-  color: #fff;
-  background: linear-gradient(135deg, #F97316, #FB923C);
+  color: $app-surface;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
   border: none;
   border-radius: 20rpx;
   line-height: 1.5;
@@ -1123,21 +1123,21 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 .empty-title {
   font-size: 32rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 12rpx;
 }
 
 .empty-desc {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-bottom: 40rpx;
 }
 
 .empty-btn {
   padding: 16rpx 48rpx;
   font-size: 28rpx;
-  color: #fff;
-  background: linear-gradient(135deg, #F97316, #FB923C);
+  color: $app-surface;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
   border: none;
   border-radius: 40rpx;
 }
@@ -1154,7 +1154,7 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
   width: 60rpx;
   height: 60rpx;
   border: 4rpx solid #FDE68A;
-  border-top-color: #F97316;
+  border-top-color: $brand-primary;
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
   margin-bottom: 20rpx;
@@ -1166,7 +1166,7 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 
 .loading-text {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .load-more-tip {
@@ -1176,7 +1176,7 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 
 .load-more-text {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 /* Nav add button */
@@ -1195,7 +1195,7 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 }
 
 .nav-add-icon {
-  color: #fff;
+  color: $app-surface;
   font-size: 36rpx;
   font-weight: 300;
   line-height: 1;
@@ -1207,7 +1207,7 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
   flex-direction: row;
   padding: 24rpx;
   gap: 16rpx;
-  background: #fff;
+  background: $app-surface;
   margin: 24rpx 24rpx 0;
   border-radius: 12rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
@@ -1224,7 +1224,7 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 .manage-stat-num {
   font-size: 40rpx;
   font-weight: 700;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.2;
 }
 
@@ -1233,16 +1233,16 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 }
 
 .manage-draft {
-  color: #F97316;
+  color: $brand-primary;
 }
 
 .manage-ended {
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .manage-stat-label {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 8rpx;
 }
 
@@ -1258,19 +1258,19 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
   justify-content: center;
   gap: 12rpx;
   padding: 24rpx 0;
-  background: linear-gradient(135deg, #F97316, #FB923C);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
   border-radius: 12rpx;
   margin: 0 24rpx;
 }
 
 .manage-action-icon {
-  color: #fff;
+  color: $app-surface;
   font-size: 36rpx;
   font-weight: 300;
 }
 
 .manage-action-text {
-  color: #fff;
+  color: $app-surface;
   font-size: 28rpx;
   font-weight: 600;
 }
@@ -1283,7 +1283,7 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
 .manage-section-title text {
   font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 /* Manage action group in card */
@@ -1298,8 +1298,8 @@ uni.showToast({ title: '请先选择家庭成员身份', icon: 'none' })
   font-size: 22rpx;
   padding: 4rpx 16rpx;
   border-radius: 20rpx;
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
   font-weight: 500;
 }
 </style>

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

@@ -170,7 +170,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   min-height: 100vh;
   background: #F5F7FA;
@@ -194,7 +194,7 @@ export default {
 }
 
 .header-section {
-  background: #F97316;
+  background: $brand-primary;
   padding: 48rpx 32rpx;
   display: flex;
   flex-direction: column;
@@ -204,7 +204,7 @@ export default {
 .header-title {
   font-size: 36rpx;
   font-weight: bold;
-  color: #fff;
+  color: $app-surface;
 }
 
 .header-countdown {
@@ -220,7 +220,7 @@ export default {
 }
 
 .section {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   margin: 24rpx;
   padding: 28rpx;
@@ -258,7 +258,7 @@ export default {
 .order-amount {
   font-size: 32rpx;
   font-weight: bold;
-  color: #F97316;
+  color: $brand-primary;
 }
 
 .payment-method-row {
@@ -287,7 +287,7 @@ export default {
 
 .payment-checked {
   font-size: 28rpx;
-  color: #10B981;
+  color: $status-success;
 }
 
 .pay-section {
@@ -301,8 +301,8 @@ export default {
   width: 100%;
   height: 88rpx;
   border-radius: 44rpx;
-  background: linear-gradient(135deg, #F97316, #FB923C);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
+  color: $app-surface;
   font-size: 30rpx;
   font-weight: 600;
   display: flex;

cfc-frontend/pages/ai/chat.vue

@@ -508,12 +508,12 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .chat-container {
   display: flex;
   flex-direction: column;
   height: 100vh;
-  background: var(--bg, #FFF7ED);
+  background: var(--bg, $uni-primary-pale);
   position: relative;
 }
 
@@ -523,15 +523,15 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 88rpx 24rpx 16rpx;
-  background: #fff;
+  background: $app-surface;
   border-bottom: 1rpx solid var(--border-light, #E2E8F0);
   position: relative;
   z-index: 100;
 }
 
 .chat-nav.mascot-xibao {
-  background: linear-gradient(135deg, #FFF7ED 0%, #FFE4CC 100%);
-  border-bottom-color: #FF8C42;
+  background: linear-gradient(135deg, $uni-primary-pale 0%, #FFE4CC 100%);
+  border-bottom-color: $dim-body;
 }
 .chat-nav.mascot-xibao .chat-nav.mascot-fubao {
   background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
@@ -573,7 +573,7 @@ export default {
   right: -500rpx;
   width: 460rpx;
   height: 100vh;
-  background: #fff;
+  background: $app-surface;
   z-index: 210;
   transition: right 0.3s ease;
   display: flex;
@@ -600,7 +600,7 @@ export default {
 
 .conv-header-new {
   font-size: 24rpx;
-  color: var(--color-primary, #F97316);
+  color: var(--color-primary, $brand-primary);
   font-weight: 500;
 }
 
@@ -693,7 +693,7 @@ export default {
 .welcome-suggestion {
   display: flex;
   align-items: center;
-  background: #fff;
+  background: $app-surface;
   padding: 20rpx 24rpx;
   border-radius: 16rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
@@ -738,8 +738,8 @@ export default {
 }
 
 .mascot-xibao .message-avatar {
-  background: linear-gradient(135deg, #FFF7ED 0%, #FFE4CC 100%);
-  border: 2rpx solid #FF8C42;
+  background: linear-gradient(135deg, $uni-primary-pale 0%, #FFE4CC 100%);
+  border: 2rpx solid $dim-body;
 }
 .mascot-fubao .message-avatar {
   background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
@@ -756,13 +756,13 @@ export default {
 }
 
 .user-bubble {
-  background: var(--color-primary, #F97316);
-  color: #fff;
+  background: var(--color-primary, $brand-primary);
+  color: $app-surface;
   border-bottom-right-radius: 4rpx;
 }
 
 .ai-bubble {
-  background: #fff;
+  background: $app-surface;
   color: var(--text, #1E293B);
   border-bottom-left-radius: 4rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
@@ -774,13 +774,13 @@ export default {
   align-items: center;
   padding: 16rpx 24rpx;
   padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
-  background: #fff;
+  background: $app-surface;
   border-top: 1rpx solid var(--border-light, #E2E8F0);
 }
 
 .chat-input-wrap {
   flex: 1;
-  background: var(--bg, #FFF7ED);
+  background: var(--bg, $uni-primary-pale);
   border-radius: 40rpx;
   padding: 0 24rpx;
   margin-right: 12rpx;
@@ -824,12 +824,12 @@ export default {
 }
 
 .chat-send-active {
-  background: var(--color-primary, #F97316);
+  background: var(--color-primary, $brand-primary);
 }
 
 .send-icon {
   font-size: 28rpx;
-  color: #fff;
+  color: $app-surface;
 }
 
 /* 打字动画 */
@@ -894,7 +894,7 @@ export default {
 .rec-card {
   display: flex;
   flex-direction: row;
-  background: var(--bg, #FFF7ED);
+  background: var(--bg, $uni-primary-pale);
   border-radius: 12rpx;
   overflow: hidden;
   padding: 12rpx;
@@ -920,7 +920,7 @@ export default {
 .rec-type-tag {
   display: inline-block;
   font-size: 18rpx;
-  color: var(--color-primary, #F97316);
+  color: var(--color-primary, $brand-primary);
   background: rgba(249,115,22,0.1);
   padding: 2rpx 12rpx;
   border-radius: 8rpx;
@@ -946,7 +946,7 @@ export default {
 
 .rec-price {
   font-size: 26rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: 600;
 }
 
@@ -964,19 +964,19 @@ export default {
   font-size: 24rpx;
 }
 .mascot-badge-name {
-  color: #6366F1;
+  color: $dim-wisdom;
   font-weight: 500;
 }
 .chat-disclaimer {
   text-align: center;
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   padding: 16rpx 0 20rpx;
-  background: #f5f5f5;
+  background: $facade-fill-2;
 }
 .quota-bar-wrapper {
   padding: 16rpx 30rpx;
-  background: #fff;
-  border-top: 1rpx solid #f5f5f5;
+  background: $app-surface;
+  border-top: 1rpx solid $facade-fill-2;
 }
 </style>

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

@@ -130,9 +130,9 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .ai-task-card {
-  background-color: #FFFFFF;
+  background-color: $app-surface;
   border-radius: 16rpx;
   padding: 32rpx;
   margin: 24rpx;
@@ -164,7 +164,7 @@ export default {
 .dimension-text {
   font-size: 24rpx;
   font-weight: 500;
-  color: #FFFFFF;
+  color: $app-surface;
 }
 
 .card-body {
@@ -201,12 +201,12 @@ export default {
 .reward-points {
   font-size: 32rpx;
   font-weight: 700;
-  color: #F97316;
+  color: $brand-primary;
 }
 
 .accept-btn {
-  background-color: #F97316;
-  color: #FFFFFF;
+  background-color: $brand-primary;
+  color: $app-surface;
   border: none;
   border-radius: 12rpx;
   padding: 20rpx 40rpx;
@@ -224,6 +224,6 @@ export default {
 }
 
 .btn-text {
-  color: #FFFFFF;
+  color: $app-surface;
 }
 </style>

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

@@ -27,7 +27,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .quota-progress-bar {
   margin-bottom: 16rpx;
 }
@@ -35,18 +35,18 @@ export default {
   display: flex;
   justify-content: space-between;
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
   margin-bottom: 8rpx;
 }
 .quota-track {
   height: 12rpx;
-  background: #f0f0f0;
+  background: $facade-fill;
   border-radius: 6rpx;
   overflow: hidden;
 }
 .quota-fill {
   height: 100%;
-  background: #F97316;
+  background: $brand-primary;
   border-radius: 6rpx;
   transition: width 0.3s;
 }

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

@@ -69,7 +69,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .upgrade-guide-mask {
   position: fixed;
   top: 0; left: 0; right: 0; bottom: 0;
@@ -81,7 +81,7 @@ export default {
 }
 .upgrade-guide-content {
   width: 600rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 48rpx 36rpx 36rpx;
   text-align: center;
@@ -93,12 +93,12 @@ export default {
 .upgrade-guide-title {
   font-size: 32rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 16rpx;
 }
 .upgrade-guide-desc {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   line-height: 1.6;
   margin-bottom: 36rpx;
 }
@@ -114,16 +114,16 @@ export default {
   font-size: 28rpx;
 }
 .btn-know {
-  background: #f5f5f5;
-  color: #666;
+  background: $facade-fill-2;
+  color: $facade-text-body;
 }
 .btn-learn {
   background: transparent;
-  color: #F97316;
-  border: 2rpx solid #F97316;
+  color: $brand-primary;
+  border: 2rpx solid $brand-primary;
 }
 .btn-upgrade {
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
 }
 </style>

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

@@ -567,60 +567,60 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.detail-container { min-height: 100vh; background: #fff; }
+.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; }
 @keyframes spin { 0% { transform: rotate(0deg); } 360% { transform: rotate(360deg); } }
-.loading-text { font-size: 26rpx; color: #999; }
+.loading-text { font-size: 26rpx; color: $facade-text-muted; }
 .error-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 300rpx; }
 .error-icon { font-size: 100rpx; margin-bottom: 24rpx; }
-.error-text { font-size: 28rpx; color: #999; margin-bottom: 30rpx; }
-.retry-btn { width: 240rpx; height: 72rpx; line-height: 72rpx; background: $brand-primary; color: #fff; font-size: 28rpx; border-radius: 36rpx; text-align: center; border: none; }
+.error-text { font-size: 28rpx; color: $facade-text-muted; margin-bottom: 30rpx; }
+.retry-btn { width: 240rpx; height: 72rpx; line-height: 72rpx; background: $brand-primary; color: $app-surface; font-size: 28rpx; border-radius: 36rpx; text-align: center; border: none; }
 .content-scroll { height: calc(100vh - 120rpx); }
 .detail-cover { width: 100%; display: block; }
-.detail-title { display: block; font-size: calc(36rpx * var(--font-scale, 1)); font-weight: bold; color: #333; line-height: 1.4; padding: 30rpx 30rpx 0; }
-.detail-meta { display: flex; align-items: center; padding: 16rpx 30rpx 0; font-size: 22rpx; color: #999; flex-wrap: wrap; }
+.detail-title { display: block; font-size: calc(36rpx * var(--font-scale, 1)); font-weight: bold; color: $facade-text-strong; line-height: 1.4; padding: 30rpx 30rpx 0; }
+.detail-meta { display: flex; align-items: center; padding: 16rpx 30rpx 0; font-size: 22rpx; color: $facade-text-muted; flex-wrap: wrap; }
 .meta-author { color: $uni-info; }
-.meta-sep { margin: 0 12rpx; color: #ddd; }
+.meta-sep { margin: 0 12rpx; color: $facade-border-soft; }
 .reading-time-badge { margin-left: auto; font-size: 20rpx; color: $uni-info; background: rgba(14, 165, 233, 0.08); padding: 4rpx 12rpx; border-radius: 20rpx; white-space: nowrap; }
-.reading-time-badge.completed { color: #10B981; background: rgba(16,185,129,0.1); }
+.reading-time-badge.completed { color: $status-success; background: rgba(16,185,129,0.1); }
 .meta-readcount {
   font-size: 20rpx;
-  color: #bbb;
+  color: $facade-text-ghost-light;
 }
 .detail-category-row { padding: 16rpx 30rpx 0; }
 .detail-category { display: inline-block; font-size: 20rpx; color: $uni-info; background: rgba(14, 165, 233, 0.1); padding: 4rpx 16rpx; border-radius: 8rpx; }
 .detail-dimensions { padding: 16rpx 30rpx 0; display: flex; gap: 12rpx; }
 .dim-bar-item { flex: 1; }
 .dim-bar { height: 8rpx; border-radius: 4rpx; }
-.dim-label { font-size: 18rpx; color: #999; text-align: center; display: block; margin-top: 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 #F97316; padding-left: 20rpx; }
-.divider { height: 1rpx; background: #eee; margin: 24rpx 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; }
+.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; }
 
 /* 关联商品推荐 */
 .related-section { margin-top: 20rpx; padding: 0 30rpx 8rpx; }
 .related-header { display: flex; align-items: baseline; margin-bottom: 16rpx; }
-.related-title { font-size: 30rpx; font-weight: bold; color: #333; }
-.related-subtitle { font-size: 20rpx; color: #999; margin-left: 12rpx; }
-.related-loading-hint { text-align: center; font-size: 22rpx; color: #F97316; padding: 16rpx 0 8rpx; }
-.related-loading-hint.dim { color: #bbb; }
+.related-title { font-size: 30rpx; font-weight: bold; color: $facade-text-strong; }
+.related-subtitle { font-size: 20rpx; color: $facade-text-muted; margin-left: 12rpx; }
+.related-loading-hint { text-align: center; font-size: 22rpx; color: $brand-primary; padding: 16rpx 0 8rpx; }
+.related-loading-hint.dim { color: $facade-text-ghost-light; }
 
 /* 相关文章 */
 .ra-list { display: flex; flex-direction: column; gap: 16rpx; }
-.ra-item { display: flex; align-items: center; background: #fafafa; border-radius: 12rpx; padding: 16rpx; }
+.ra-item { display: flex; align-items: center; background: $facade-fill-ghost; border-radius: 12rpx; padding: 16rpx; }
 .ra-item-pressed { opacity: 0.7; }
-.ra-cover { width: 140rpx; height: 100rpx; border-radius: 8rpx; background: #eee; flex-shrink: 0; }
+.ra-cover { width: 140rpx; height: 100rpx; border-radius: 8rpx; background: $facade-hairline-2; flex-shrink: 0; }
 .ra-body { margin-left: 20rpx; flex: 1; min-width: 0; }
-.ra-title { display: block; font-size: 28rpx; font-weight: 600; color: #333; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ra-summary { display: block; margin-top: 8rpx; font-size: 22rpx; color: #999; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ra-title { display: block; font-size: 28rpx; font-weight: 600; color: $facade-text-strong; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ra-summary { display: block; margin-top: 8rpx; font-size: 22rpx; color: $facade-text-muted; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-.detail-footer { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 20rpx 30rpx; display: flex; align-items: center; gap: 16rpx; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.06); z-index: 10; }
-.share-btn { height: 72rpx; padding: 0 30rpx; background: linear-gradient(135deg, #F97316, #FB923C); border-radius: 36rpx; display: flex; align-items: center; justify-content: center; border: none; }
+.detail-footer { position: fixed; bottom: 0; left: 0; right: 0; background: $app-surface; padding: 20rpx 30rpx; display: flex; align-items: center; gap: 16rpx; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.06); z-index: 10; }
+.share-btn { height: 72rpx; padding: 0 30rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-light); border-radius: 36rpx; display: flex; align-items: center; justify-content: center; border: none; }
 .share-btn::after { border: none; }
 .share-btn-icon { font-size: 30rpx; margin-right: 8rpx; }
-.share-btn-text { font-size: 26rpx; color: #fff; font-weight: 600; }
+.share-btn-text { font-size: 26rpx; color: $app-surface; font-weight: 600; }
 
 .listen-btn { height: 72rpx; padding: 0 30rpx; background: rgba(14, 165, 233, 0.1); border: 2rpx solid $uni-info; border-radius: 36rpx; display: flex; align-items: center; justify-content: center; }
 .listen-btn.playing { background: rgba(14, 165, 233, 0.2); }
@@ -629,34 +629,34 @@ export default {
 
 /* 答题弹窗 */
 .quiz-mask, .result-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; display: flex; align-items: center; justify-content: center; }
-.quiz-dialog, .result-dialog { background: #fff; border-radius: 24rpx; width: 650rpx; padding: 32rpx; }
+.quiz-dialog, .result-dialog { background: $app-surface; border-radius: 24rpx; width: 650rpx; padding: 32rpx; }
 .quiz-mascot { display: flex; align-items: center; justify-content: center; gap: 12rpx; margin-bottom: 16rpx; }
 .mascot-icon { font-size: 60rpx; }
-.mascot-name { font-size: 32rpx; font-weight: 700; color: #F97316; }
+.mascot-name { font-size: 32rpx; font-weight: 700; color: $brand-primary; }
 .quiz-step-bar { display: flex; align-items: center; justify-content: center; margin-bottom: 24rpx; }
-.quiz-step-text { font-size: 24rpx; color: #999; margin-right: 12rpx; }
+.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.active { background: #F97316; }
+.quiz-dot.active { background: $brand-primary; }
 .quiz-dot.done { background: #FDBA74; }
-.q-title { font-size: 30rpx; font-weight: 600; color: #333; line-height: 1.5; margin-bottom: 20rpx; }
+.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.selected { border-color: #F97316; background: #FFF7ED; }
-.q-option-letter { width: 44rpx; font-size: 26rpx; font-weight: 600; color: #666; flex-shrink: 0; }
-.q-option-row.selected .q-option-letter { color: #F97316; }
-.q-option-text { flex: 1; min-width: 0; font-size: 26rpx; color: #333; }
+.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-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: #F97316; background: #F97316; color: #fff; }
+.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; }
-.quiz-prev { flex: 1; padding: 20rpx; background: #fff; color: #F97316; border: 2rpx solid #F97316; font-size: 28rpx; border-radius: 12rpx; }
+.quiz-prev { flex: 1; padding: 20rpx; background: $app-surface; color: $brand-primary; border: 2rpx solid $brand-primary; font-size: 28rpx; border-radius: 12rpx; }
 .quiz-prev::after { border: none; }
-.quiz-submit { flex: 1; padding: 20rpx; background: linear-gradient(135deg, #F97316, #FB923C); color: #fff; font-size: 28rpx; border-radius: 12rpx; border: none; }
+.quiz-submit { flex: 1; padding: 20rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-light); color: $app-surface; font-size: 28rpx; border-radius: 12rpx; border: none; }
 .quiz-submit::after { border: none; }
-.result-btn { width: 100%; padding: 20rpx; background: linear-gradient(135deg, #F97316, #FB923C); color: #fff; font-size: 28rpx; border-radius: 12rpx; border: none; margin-top: 20rpx; }
+.result-btn { width: 100%; padding: 20rpx; background: linear-gradient(135deg, $brand-primary, $brand-primary-light); color: $app-surface; font-size: 28rpx; border-radius: 12rpx; border: none; margin-top: 20rpx; }
 .result-dialog { text-align: center; }
 .result-icon { font-size: 80rpx; }
-.result-text { font-size: 32rpx; font-weight: 700; color: #333; margin: 16rpx 0; }
-.result-energy { font-size: 28rpx; color: #F97316; }
+.result-text { font-size: 32rpx; font-weight: 700; color: $facade-text-strong; margin: 16rpx 0; }
+.result-energy { font-size: 28rpx; color: $brand-primary; }
 </style>

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

@@ -248,7 +248,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 80rpx 30rpx 20rpx;
-  background: #fff;
+  background: $app-surface;
   position: sticky;
   top: 0;
   z-index: 10;
@@ -256,7 +256,7 @@ export default {
 .header-left { display: flex; align-items: center; }
 .back-icon { font-size: 36rpx; margin-right: 8rpx; }
 
-.header-title { font-size: 32rpx; font-weight: bold; color: #333; }
+.header-title { font-size: 32rpx; font-weight: bold; color: $facade-text-strong; }
 .header-right { }
 .history-text { font-size: 26rpx; color: $brand-primary; }
 .edit-form { padding: 20rpx 30rpx; }
@@ -264,7 +264,7 @@ export default {
 .form-cover {
   width: 100%;
   height: 300rpx;
-  background: #eee;
+  background: $facade-hairline-2;
   border-radius: 16rpx;
   overflow: hidden;
   margin-bottom: 20rpx;
@@ -279,20 +279,20 @@ export default {
   height: 100%;
 }
 .cover-icon { font-size: 60rpx; margin-bottom: 10rpx; }
-.cover-hint { font-size: 24rpx; color: #999; }
+.cover-hint { font-size: 24rpx; color: $facade-text-muted; }
 .cover-change {
   position: absolute;
   right: 16rpx;
   bottom: 16rpx;
   background: rgba(0,0,0,0.5);
-  color: #fff;
+  color: $app-surface;
   padding: 6rpx 20rpx;
   border-radius: 20rpx;
   font-size: 22rpx;
 }
 /* 表单组 */
 .form-group {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 20rpx;
@@ -300,29 +300,29 @@ export default {
 .form-input {
   width: 100%;
   font-size: 30rpx;
-  color: #333;
+  color: $facade-text-strong;
   border: none;
   outline: none;
 }
 .title-input { font-weight: bold; }
-.char-count { display: block; text-align: right; font-size: 20rpx; color: #bbb; margin-top: 8rpx; }
-.form-label { font-size: 24rpx; color: #666; display: block; margin-bottom: 16rpx; }
+.char-count { display: block; text-align: right; font-size: 20rpx; color: $facade-text-ghost-light; margin-top: 8rpx; }
+.form-label { font-size: 24rpx; color: $facade-text-body; display: block; margin-bottom: 16rpx; }
 /* 维度 */
 .dimension-chips { display: flex; flex-wrap: wrap; gap: 16rpx; }
 .dim-chip {
   padding: 10rpx 28rpx;
   border-radius: 30rpx;
   font-size: 24rpx;
-  border: 2rpx solid #ddd;
-  color: #666;
+  border: 2rpx solid $facade-border-soft;
+  color: $facade-text-body;
 }
-.dim-chip.active { color: #fff; border-color: transparent; }
+.dim-chip.active { color: $app-surface; border-color: transparent; }
 /* 文本框 */
 .form-textarea {
   width: 100%;
   height: 300rpx;
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.6;
   border: none;
   outline: none;
@@ -334,20 +334,20 @@ export default {
   flex: 1;
   padding: 24rpx;
   border-radius: 12rpx;
-  border: 2rpx solid #eee;
+  border: 2rpx solid $facade-hairline-2;
   text-align: center;
 }
 .vis-option.active { border-color: $brand-primary; background: $uni-primary-pale; }
 .vis-icon { font-size: 40rpx; display: block; margin-bottom: 8rpx; }
-.vis-text { font-size: 26rpx; font-weight: bold; color: #333; display: block; }
-.vis-desc { font-size: 20rpx; color: #999; display: block; margin-top: 4rpx; }
+.vis-text { font-size: 26rpx; font-weight: bold; color: $facade-text-strong; display: block; }
+.vis-desc { font-size: 20rpx; color: $facade-text-muted; display: block; margin-top: 4rpx; }
 /* 发布按钮 */
 .publish-btn {
   width: 100%;
   height: 88rpx;
   line-height: 88rpx;
-  background: linear-gradient(135deg, #F97316, #EA580C);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, #EA580C);
+  color: $app-surface;
   font-size: 32rpx;
   font-weight: bold;
   border-radius: 44rpx;

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

@@ -329,7 +329,7 @@ onLoad(options) {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 /* ====================================
    知识分享 — 重设计
    白色导航 + 药丸Tab + 精装卡片
@@ -347,7 +347,7 @@ onLoad(options) {
   align-items: center;
   justify-content: space-between;
   padding: 84rpx 28rpx 20rpx;
-  background: #fff;
+  background: $app-surface;
   position: sticky;
   top: 0;
   z-index: 100;
@@ -362,7 +362,7 @@ onLoad(options) {
 }
 .ac-nav-back {
   font-size: 36rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: bold;
 }
 .ac-nav-title {
@@ -380,11 +380,11 @@ onLoad(options) {
 }
 .ac-nav-search-icon {
   font-size: 32rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .ac-nav-add {
   font-size: 40rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: 300;
   line-height: 1;
 }
@@ -394,21 +394,21 @@ onLoad(options) {
   display: flex;
   align-items: center;
   padding: 12rpx 28rpx 16rpx;
-  background: #fff;
-  border-bottom: 1rpx solid #f0f0f0;
+  background: $app-surface;
+  border-bottom: 1rpx solid $facade-fill;
 }
 .ac-search-input {
   flex: 1;
   height: 60rpx;
-  background: #f5f5f5;
+  background: $facade-fill-2;
   border-radius: 30rpx;
   padding: 0 28rpx;
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .ac-search-cancel {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-left: 16rpx;
   flex-shrink: 0;
 }
@@ -416,8 +416,8 @@ onLoad(options) {
 /* ---- Tab 药丸导航 ---- */
 .ac-tabs {
   padding: 16rpx 28rpx;
-  background: #fff;
-  border-bottom: 1rpx solid #f0f0f0;
+  background: $app-surface;
+  border-bottom: 1rpx solid $facade-fill;
   position: sticky;
   z-index: 10;
 }
@@ -433,10 +433,10 @@ onLoad(options) {
   padding: 0 28rpx;
   margin-right: 16rpx;
   font-size: 24rpx;
-  color: #666;
-  background: #f0f0f0;
+  color: $facade-text-body;
+  background: $facade-fill;
   border-radius: 26rpx;
-  border: 2rpx solid #f0f0f0;
+  border: 2rpx solid $facade-fill;
   flex-shrink: 0;
   transition: font-weight 0.2s;
 }
@@ -452,7 +452,7 @@ onLoad(options) {
 /* ---- 骨架屏 ---- */
 .ac-skeleton-wrap { padding: 24rpx 28rpx; }
 .sk-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   overflow: hidden;
   margin-bottom: 24rpx;
@@ -460,14 +460,14 @@ onLoad(options) {
 }
 .sk-cover {
   height: 340rpx;
-  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+  background: linear-gradient(90deg, $facade-fill 25%, #e8e8e8 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, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+  background: linear-gradient(90deg, $facade-fill 25%, #e8e8e8 50%, $facade-fill 75%);
   background-size: 200% 100%;
   border-radius: 6rpx;
   margin-bottom: 14rpx;
@@ -496,7 +496,7 @@ onLoad(options) {
 }
 .ac-empty-text {
   font-size: 28rpx;
-  color: #bbb;
+  color: $facade-text-ghost-light;
 }
 
 /* ---- 文章卡片（新版） ---- */
@@ -504,7 +504,7 @@ onLoad(options) {
   padding: 24rpx 28rpx;
 }
 .ac-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   overflow: hidden;
   margin-bottom: 24rpx;
@@ -525,7 +525,7 @@ onLoad(options) {
   display: block;
   width: 100%;
   height: 340rpx;
-  background: #f0f0f0;
+  background: $facade-fill;
 }
 .ac-card-dimension-tags {
   position: absolute;
@@ -538,7 +538,7 @@ onLoad(options) {
   padding: 2rpx 14rpx;
   border-radius: 12rpx;
   font-size: 20rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: 500;
   line-height: 1.4;
 }
@@ -553,7 +553,7 @@ onLoad(options) {
 }
 .ac-card-category {
   font-size: 20rpx;
-  color: #F97316;
+  color: $brand-primary;
   background: rgba(249,115,22,0.08);
   padding: 2rpx 14rpx;
   border-radius: 8rpx;
@@ -579,7 +579,7 @@ onLoad(options) {
 .ac-card-summary {
   display: block;
   font-size: calc(24rpx * var(--font-scale, 1));
-  color: #999;
+  color: $facade-text-muted;
   line-height: 1.5;
   margin-bottom: 16rpx;
   overflow: hidden;
@@ -592,23 +592,23 @@ onLoad(options) {
   display: flex;
   align-items: center;
   font-size: 20rpx;
-  color: #bbb;
+  color: $facade-text-ghost-light;
 }
 .ac-card-author {
   color: #888;
 }
 .ac-card-sep {
   margin: 0 10rpx;
-  color: #ddd;
+  color: $facade-border-soft;
 }
 .ac-card-date {
   flex: 1;
 }
 .ac-card-fav {
-  color: #ccc;
+  color: $facade-text-ghost;
 }
 .ac-card-readcount {
-  color: #ccc;
+  color: $facade-text-ghost;
 }
 
 /* ---- 加载更多 / 没有更多 ---- */
@@ -619,11 +619,11 @@ onLoad(options) {
 }
 .ac-loading-text {
   font-size: 24rpx;
-  color: #bbb;
+  color: $facade-text-ghost-light;
 }
 .ac-no-more-text {
   font-size: 24rpx;
-  color: #ddd;
+  color: $facade-border-soft;
 }
 .ac-bottom-gap {
   height: 140rpx;
@@ -636,8 +636,8 @@ onLoad(options) {
   bottom: 100rpx;
   width: 96rpx;
   height: 96rpx;
-  background: linear-gradient(135deg, #F97316, #EA580C);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, #EA580C);
+  color: $app-surface;
   border-radius: 50%;
   display: flex;
   align-items: center;

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

@@ -134,15 +134,15 @@ export default {
 .posts-container { min-height: 100vh; background: #f5f7fa; }
 .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: #999; }
+.loading-text { font-size: 26rpx; color: $facade-text-muted; }
 .empty-icon { font-size: 100rpx; margin-bottom: 24rpx; }
-.empty-text { font-size: 28rpx; color: #999; margin-bottom: 30rpx; }
-.write-btn { width: 240rpx; height: 72rpx; line-height: 72rpx; background: $brand-primary; color: #fff; font-size: 28rpx; border-radius: 36rpx; border: none; }
+.empty-text { font-size: 28rpx; color: $facade-text-muted; margin-bottom: 30rpx; }
+.write-btn { width: 240rpx; height: 72rpx; line-height: 72rpx; background: $brand-primary; color: $app-surface; font-size: 28rpx; border-radius: 36rpx; border: none; }
 .write-btn::after { border: none; }
 .post-list { padding: 20rpx 24rpx; }
 .post-card {
   display: flex;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   overflow: hidden;
   margin-bottom: 20rpx;
@@ -150,15 +150,15 @@ export default {
 }
 .post-cover { width: 200rpx; height: 160rpx; flex-shrink: 0; }
 .post-body { flex: 1; padding: 20rpx; display: flex; flex-direction: column; justify-content: center; }
-.post-title { font-size: 28rpx; font-weight: bold; color: #333; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 8rpx; }
+.post-title { font-size: 28rpx; font-weight: bold; color: $facade-text-strong; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 8rpx; }
 .post-meta { display: flex; align-items: center; font-size: 22rpx; }
-.post-date { color: #999; margin-right: 16rpx; }
+.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-rejected { color: #ef4444; background: rgba(239,68,68,0.1); }
-.status-draft { color: #999; background: rgba(153,153,153,0.1); }
-.post-reason { font-size: 20rpx; color: #ef4444; margin-top: 6rpx; display: block; }
+.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; }
 .loading-more, .no-more { text-align: center; padding: 30rpx; }
-.no-more-text { font-size: 24rpx; color: #ccc; }
+.no-more-text { font-size: 24rpx; color: $facade-text-ghost; }
 </style>

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

@@ -155,13 +155,13 @@ export default {
 }
 .loading-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 /* ===== 详情卡片 ===== */
 .detail-card {
   margin: 30rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 32rpx 28rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
@@ -176,7 +176,7 @@ export default {
 .detail-title {
   font-size: 34rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   flex: 1;
   min-width: 0;
 }
@@ -191,7 +191,7 @@ export default {
 .status-cancelled { background: #ECEFF1; color: #78909C; }
 .status-generated { background: #FFF3E0; color: #E65100; }
 .status-reviewed { background: #E8F5E9; color: #2E7D32; }
-.status-rejected { background: #FDE8E8; color: #C62828; }
+.status-rejected { background: #FDE8E8; color: $status-danger-strong-2; }
 .status-unknown { background: #ECEFF1; color: #78909C; }
 
 /* ===== 元信息 ===== */
@@ -208,14 +208,14 @@ export default {
 .meta-label {
   width: 160rpx;
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
   flex-shrink: 0;
   line-height: 1.5;
 }
 .meta-value {
   flex: 1;
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.5;
   word-break: break-all;
 }
@@ -242,7 +242,7 @@ export default {
 }
 .progress-text {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 /* ===== 空状态 ===== */
@@ -259,12 +259,12 @@ export default {
 .empty-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 12rpx;
 }
 .empty-desc {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
   text-align: center;
   line-height: 1.5;
 }

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

@@ -122,7 +122,7 @@ export default {
 }
 .loading-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 /* ===== 方案列表 ===== */
@@ -130,7 +130,7 @@ export default {
   margin: 20rpx 30rpx;
 }
 .plan-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 28rpx 24rpx;
   margin-bottom: 16rpx;
@@ -149,7 +149,7 @@ export default {
 .plan-name {
   font-size: 30rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   flex: 1;
   min-width: 0;
 }
@@ -164,7 +164,7 @@ export default {
 .status-cancelled { background: #ECEFF1; color: #78909C; }
 .status-generated { background: #FFF3E0; color: #E65100; }
 .status-reviewed { background: #E8F5E9; color: #2E7D32; }
-.status-rejected { background: #FDE8E8; color: #C62828; }
+.status-rejected { background: #FDE8E8; color: $status-danger-strong-2; }
 .status-unknown { background: #ECEFF1; color: #78909C; }
 
 /* ===== 维度 ===== */
@@ -198,7 +198,7 @@ export default {
 }
 .progress-text {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 /* ===== 箭头 ===== */
@@ -208,7 +208,7 @@ export default {
   top: 50%;
   transform: translateY(-50%);
   font-size: 36rpx;
-  color: #CCC;
+  color: $facade-text-ghost;
 }
 
 /* ===== 空状态 ===== */
@@ -225,12 +225,12 @@ export default {
 .empty-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 12rpx;
 }
 .empty-desc {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
   text-align: center;
   margin-bottom: 40rpx;
   line-height: 1.5;

cfc-frontend/pages/assessment/apply.vue

@@ -349,7 +349,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   padding: 30rpx;
   background: #F8F8F8;
@@ -364,18 +364,18 @@ export default {
 .title {
   font-size: 48rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 20rpx;
 }
 
 .subtitle {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 
 .section {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 30rpx;
   margin-bottom: 30rpx;
@@ -384,7 +384,7 @@ export default {
 .section-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 20rpx;
 }
 
@@ -433,19 +433,19 @@ export default {
 .child-name {
   font-size: 28rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 5rpx;
 }
 
 .guide-price {
   font-size: 24rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: bold;
 }
 
 .child-age {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .guide-check,
@@ -456,7 +456,7 @@ export default {
   width: 40rpx;
   height: 40rpx;
   background: #667eea;
-  color: #fff;
+  color: $app-surface;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -473,14 +473,14 @@ export default {
 .type-name {
   font-size: 28rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 5rpx;
 }
 
 .type-desc {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .child-avatar {
@@ -488,7 +488,7 @@ export default {
   height: 60rpx;
   border-radius: 50%;
   background: linear-gradient(135deg, #667eea, #764ba2);
-  color: #fff;
+  color: $app-surface;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -511,12 +511,12 @@ export default {
   border-radius: 10rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .picker-arrow {
   font-size: 40rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .price-info {
@@ -538,24 +538,24 @@ export default {
 
 .price-label {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 
 .price-value {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .price-value.discount {
-  color: #F97316;
+  color: $brand-primary;
 }
 
 .btn-submit {
   width: 100%;
   height: 90rpx;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #fff;
+  color: $app-surface;
   border-radius: 45rpx;
   font-size: 32rpx;
   font-weight: bold;

cfc-frontend/pages/assessment/execution.vue

@@ -223,10 +223,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   padding: 40rpx;
-  background: #f5f5f5;
+  background: $facade-fill-2;
   min-height: 100vh;
 }
 
@@ -237,20 +237,20 @@ export default {
 .title {
   font-size: 40rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 10rpx;
 }
 
 .subtitle {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .loading, .empty {
   text-align: center;
   padding: 100rpx 0;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .status-card {
@@ -286,8 +286,8 @@ export default {
 .icon-check {
   width: 40rpx;
   height: 24rpx;
-  border-left: 6rpx solid #fff;
-  border-bottom: 6rpx solid #fff;
+  border-left: 6rpx solid $app-surface;
+  border-bottom: 6rpx solid $app-surface;
   transform: rotate(-45deg);
   margin-top: -6rpx;
   z-index: 1;
@@ -297,7 +297,7 @@ export default {
 .icon-alert {
   width: 6rpx;
   height: 36rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 3rpx;
   position: relative;
   z-index: 1;
@@ -310,7 +310,7 @@ export default {
   transform: translateX(-50%);
   width: 10rpx;
   height: 10rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 50%;
 }
 
@@ -325,7 +325,7 @@ export default {
 .icon-dots view {
   width: 12rpx;
   height: 12rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 50%;
 }
 
@@ -356,7 +356,7 @@ export default {
 .status-text {
   font-size: 36rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .timeline {
@@ -406,8 +406,8 @@ export default {
 .dot-check {
   width: 12rpx;
   height: 8rpx;
-  border-left: 3rpx solid #fff;
-  border-bottom: 3rpx solid #fff;
+  border-left: 3rpx solid $app-surface;
+  border-bottom: 3rpx solid $app-surface;
   transform: rotate(-45deg);
   margin-top: -2rpx;
 }
@@ -516,21 +516,21 @@ export default {
 .timeline-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 10rpx;
 }
 
 .timeline-desc {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   display: block;
   margin-bottom: 5rpx;
 }
 
 .timeline-time {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .notes-section {
@@ -543,7 +543,7 @@ export default {
 .section-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 20rpx;
 }
@@ -554,13 +554,13 @@ export default {
 
 .note-label {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
   font-weight: bold;
 }
 
 .note-content {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .actions {
@@ -590,7 +590,7 @@ export default {
 
 .btn-outline {
   background: white;
-  color: #666;
-  border: 2rpx solid #ddd;
+  color: $facade-text-body;
+  border: 2rpx solid $facade-border-soft;
 }
 </style>

cfc-frontend/pages/assessment/purchase.vue

@@ -353,7 +353,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   padding: 30rpx;
   background: #F8F8F8;
@@ -368,18 +368,18 @@ export default {
 .title {
   font-size: 48rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 20rpx;
 }
 
 .subtitle {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 
 .section {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 30rpx;
   margin-bottom: 30rpx;
@@ -388,7 +388,7 @@ export default {
 .section-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 20rpx;
 }
 
@@ -429,14 +429,14 @@ export default {
 .guide-name {
   font-size: 28rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 5rpx;
 }
 
 .guide-price {
   font-size: 24rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: bold;
 }
 
@@ -444,7 +444,7 @@ export default {
   width: 40rpx;
   height: 40rpx;
   background: #667eea;
-  color: #fff;
+  color: $app-surface;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -475,7 +475,7 @@ export default {
 .package-name {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .package-price {
@@ -485,20 +485,20 @@ export default {
 .price {
   font-size: 32rpx;
   font-weight: bold;
-  color: #F97316;
+  color: $brand-primary;
   display: block;
 }
 
 .original-price {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   text-decoration: line-through;
   margin-left: 10rpx;
 }
 
 .package-desc {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   margin-bottom: 15rpx;
 }
 
@@ -524,7 +524,7 @@ export default {
 
 .feature-text {
   font-size: 24rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .package-check {
@@ -534,7 +534,7 @@ export default {
   width: 40rpx;
   height: 40rpx;
   background: #667eea;
-  color: #fff;
+  color: $app-surface;
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -561,35 +561,35 @@ export default {
 
 .price-label {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 
 .price-value {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .price-value.discount {
-  color: #F97316;
+  color: $brand-primary;
 }
 
 .price-row.total .price-label {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .price-row.total .price-value {
   font-size: 36rpx;
-  color: #F97316;
+  color: $brand-primary;
 }
 
 .btn-submit {
   width: 100%;
   height: 90rpx;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #fff;
+  color: $app-surface;
   border-radius: 45rpx;
   font-size: 32rpx;
   font-weight: bold;
@@ -597,6 +597,6 @@ export default {
 }
 
 .btn-submit[disabled] {
-  background: #CCCCCC;
+  background: $facade-text-ghost;
 }
 </style>

cfc-frontend/pages/assessment/quota.vue

@@ -97,7 +97,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   padding: 30rpx;
   background: #F8F8F8;
@@ -110,13 +110,13 @@ export default {
 .title {
   font-size: 44rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 16rpx;
 }
 .subtitle {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .quota-list {
   display: flex;
@@ -124,7 +124,7 @@ export default {
   gap: 24rpx;
 }
 .quota-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 28rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -138,7 +138,7 @@ export default {
 .product-name {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .status-tag {
   font-size: 22rpx;
@@ -150,8 +150,8 @@ export default {
   color: #2E7D32;
 }
 .status-tag.used {
-  background: #F5F5F5;
-  color: #999;
+  background: $facade-fill-2;
+  color: $facade-text-muted;
 }
 .progress-section {
   display: flex;
@@ -162,7 +162,7 @@ export default {
 .progress-bar-bg {
   flex: 1;
   height: 12rpx;
-  background: #F0F0F0;
+  background: $facade-fill;
   border-radius: 6rpx;
   overflow: hidden;
 }
@@ -173,11 +173,11 @@ export default {
 }
 .progress-text {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   white-space: nowrap;
 }
 .card-info {
-  border-top: 1rpx solid #F0F0F0;
+  border-top: 1rpx solid $facade-fill;
   padding-top: 16rpx;
 }
 .info-row {
@@ -187,11 +187,11 @@ export default {
 }
 .info-label {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .info-value {
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .info-value.highlight {
   color: #667eea;
@@ -209,7 +209,7 @@ export default {
   height: 76rpx;
   line-height: 76rpx;
   background: linear-gradient(135deg, #667eea, #764ba2);
-  color: #fff;
+  color: $app-surface;
   border-radius: 38rpx;
   font-size: 28rpx;
   text-align: center;
@@ -226,7 +226,7 @@ export default {
 }
 .empty-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-bottom: 40rpx;
 }
 .btn-buy {
@@ -234,7 +234,7 @@ export default {
   height: 80rpx;
   line-height: 80rpx;
   background: linear-gradient(135deg, #667eea, #764ba2);
-  color: #fff;
+  color: $app-surface;
   border-radius: 40rpx;
   font-size: 28rpx;
   text-align: center;

cfc-frontend/pages/assessment/rating.vue

@@ -200,10 +200,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   padding: 40rpx;
-  background: #f5f5f5;
+  background: $facade-fill-2;
   min-height: 100vh;
 }
 
@@ -214,20 +214,20 @@ export default {
 .title {
   font-size: 40rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 10rpx;
 }
 
 .subtitle {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .loading, .empty {
   text-align: center;
   padding: 100rpx 0;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .rating-section {
@@ -281,7 +281,7 @@ export default {
 .section-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .rating-stars {
@@ -292,7 +292,7 @@ export default {
 
 .star-label {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
   margin-right: 20rpx;
 }
 
@@ -359,12 +359,12 @@ export default {
 }
 
 .btn-primary:disabled {
-  background: #ccc;
+  background: $facade-text-ghost;
 }
 
 .btn-outline {
   background: white;
-  color: #666;
-  border: 2rpx solid #ddd;
+  color: $facade-text-body;
+  border: 2rpx solid $facade-border-soft;
 }
 </style>

cfc-frontend/pages/assessment/results.vue

@@ -229,7 +229,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   padding: 30rpx;
   background: #F8F8F8;
@@ -244,19 +244,19 @@ export default {
 .title {
   font-size: 48rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 20rpx;
 }
 
 .subtitle {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 
 .tabs {
   display: flex;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 10rpx;
   margin-bottom: 30rpx;
@@ -268,16 +268,16 @@ export default {
   padding: 20rpx;
   border-radius: 10rpx;
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 
 .tab-item.active {
   background: #667eea;
-  color: #fff;
+  color: $app-surface;
 }
 
 .section {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 30rpx;
   margin-bottom: 30rpx;
@@ -286,7 +286,7 @@ export default {
 .section-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 20rpx;
 }
 
@@ -312,12 +312,12 @@ export default {
 .report-child {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .report-date {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 .report-guide {
@@ -339,7 +339,7 @@ export default {
 
 .score-label {
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
   display: block;
   margin-bottom: 5rpx;
 }
@@ -347,12 +347,12 @@ export default {
 .score-value {
   font-size: 28rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .report-preview {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
   line-height: 1.5;
 }
 
@@ -369,14 +369,14 @@ export default {
 
 .empty-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
   display: block;
   margin-bottom: 10rpx;
 }
 
 .empty-hint {
   font-size: 24rpx;
-  color: #CCC;
+  color: $facade-text-ghost;
 }
 
 .report-modal {
@@ -393,7 +393,7 @@ export default {
 }
 
 .modal-content {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 40rpx;
   width: 90%;
@@ -411,12 +411,12 @@ export default {
 .modal-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .modal-close {
   font-size: 40rpx;
-  color: #999;
+  color: $facade-text-muted;
   padding: 10rpx;
 }
 
@@ -431,7 +431,7 @@ export default {
 .detail-title {
   font-size: 28rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 15rpx;
 }
 
@@ -443,12 +443,12 @@ export default {
 
 .detail-label {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 
 .detail-value {
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: bold;
 }
 
@@ -460,7 +460,7 @@ export default {
 
 .content-text {
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.6;
 }
 
@@ -472,8 +472,8 @@ export default {
 .btn-close {
   flex: 1;
   height: 80rpx;
-  background: #F0F0F0;
-  color: #333;
+  background: $facade-fill;
+  color: $facade-text-strong;
   border-radius: 40rpx;
   font-size: 28rpx;
   font-weight: bold;

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

@@ -110,7 +110,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   padding: 30rpx;
   background: #F8F8F8;
@@ -123,16 +123,16 @@ export default {
 .title {
   font-size: 44rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 16rpx;
 }
 .subtitle {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .section {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 30rpx;
   margin-bottom: 24rpx;
@@ -140,7 +140,7 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 20rpx;
 }
 .child-selector {
@@ -163,7 +163,7 @@ export default {
 }
 .child-name {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .child-check {
   position: absolute;
@@ -172,7 +172,7 @@ export default {
   width: 36rpx;
   height: 36rpx;
   background: #667eea;
-  color: #fff;
+  color: $app-surface;
   border-radius: 50%;
   line-height: 36rpx;
   text-align: center;
@@ -185,7 +185,7 @@ export default {
   gap: 16rpx;
   height: 160rpx;
   background: #F8F8F8;
-  border: 2rpx dashed #CCC;
+  border: 2rpx dashed $facade-text-ghost;
   border-radius: 12rpx;
 }
 .upload-icon {
@@ -193,7 +193,7 @@ export default {
 }
 .upload-text {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .textarea {
   width: 100%;
@@ -209,7 +209,7 @@ export default {
   height: 88rpx;
   line-height: 88rpx;
   background: linear-gradient(135deg, #667eea, #764ba2);
-  color: #fff;
+  color: $app-surface;
   border-radius: 44rpx;
   font-size: 30rpx;
   margin-top: 30rpx;

cfc-frontend/pages/butler/apply.vue

@@ -107,7 +107,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
 .container {
   padding: 30rpx;
   background: #f8f8f8;
@@ -120,16 +120,16 @@ export default {
 .title {
   font-size: 40rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .subtitle {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
   margin-top: 16rpx;
   display: block;
 }
 .form {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 40rpx;
 }
@@ -138,7 +138,7 @@ export default {
 }
 .label {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 20rpx;
   font-weight: bold;
@@ -165,11 +165,11 @@ export default {
   box-sizing: border-box;
 }
 .placeholder {
-  color: #999;
+  color: $facade-text-muted;
 }
 .arrow {
   font-size: 32rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .textarea {
   width: 100%;
@@ -182,7 +182,7 @@ export default {
 }
 .counter {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   text-align: right;
   display: block;
   margin-top: 10rpx;
@@ -191,7 +191,7 @@ export default {
   width: 100%;
   height: 90rpx;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #fff;
+  color: $app-surface;
   border-radius: 45rpx;
   font-size: 32rpx;
   font-weight: bold;

cfc-frontend/pages/butler/select.vue

@@ -141,28 +141,28 @@ export default {
 
 <style scoped lang="scss">
 .select-page { min-height: 100vh; background: #f5fafe; padding: 24rpx; box-sizing: border-box; display: flex; flex-direction: column; }
-.status-card { background: #fff; border-radius: 20rpx; padding: 32rpx; margin-bottom: 24rpx; }
-.current-label { font-size: 24rpx; color: #999; margin-bottom: 16rpx; }
+.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; }
 .current-avatar { width: 96rpx; height: 96rpx; border-radius: 50%; margin-right: 20rpx; }
 .current-info { display: flex; flex-direction: column; }
-.current-name { font-size: 34rpx; font-weight: bold; color: #333; }
-.current-date { font-size: 22rpx; color: #999; margin-top: 6rpx; }
-.current-desc { font-size: 26rpx; color: #666; margin-top: 20rpx; line-height: 1.6; }
-.btn-change { margin-top: 24rpx; background: $brand-primary; color: #fff; font-size: 28rpx; border-radius: 40rpx; }
-.upgrade-banner { display: flex; justify-content: space-between; align-items: center; background: #fff7ed; border: 1rpx solid #ffb56b; border-radius: 16rpx; padding: 24rpx; margin-bottom: 24rpx; }
+.current-name { font-size: 34rpx; font-weight: bold; color: $facade-text-strong; }
+.current-date { font-size: 22rpx; color: $facade-text-muted; margin-top: 6rpx; }
+.current-desc { font-size: 26rpx; color: $facade-text-body; margin-top: 20rpx; line-height: 1.6; }
+.btn-change { margin-top: 24rpx; background: $brand-primary; color: $app-surface; font-size: 28rpx; border-radius: 40rpx; }
+.upgrade-banner { display: flex; justify-content: space-between; align-items: center; background: $uni-primary-pale; border: 1rpx solid #ffb56b; border-radius: 16rpx; padding: 24rpx; margin-bottom: 24rpx; }
 .upgrade-text { font-size: 26rpx; color: #d4770a; flex: 1; }
 .upgrade-arrow { font-size: 36rpx; color: #d4770a; margin-left: 12rpx; }
-.section-title { font-size: 30rpx; font-weight: bold; color: #333; margin: 8rpx 0 20rpx; }
-.butler-card { display: flex; align-items: center; background: #fff; border-radius: 20rpx; padding: 28rpx; margin-bottom: 20rpx; }
+.section-title { font-size: 30rpx; font-weight: bold; color: $facade-text-strong; margin: 8rpx 0 20rpx; }
+.butler-card { display: flex; align-items: center; background: $app-surface; border-radius: 20rpx; padding: 28rpx; margin-bottom: 20rpx; }
 .butler-card.active { border: 2rpx solid $brand-primary; }
 .card-avatar { width: 88rpx; height: 88rpx; border-radius: 50%; margin-right: 20rpx; flex-shrink: 0; }
 .card-body { flex: 1; min-width: 0; }
 .card-top { display: flex; align-items: center; justify-content: space-between; }
-.card-name { font-size: 30rpx; font-weight: bold; color: #333; }
-.card-slots { font-size: 22rpx; color: #10b981; }
+.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; }
-.btn-select { width: 120rpx; height: 60rpx; line-height: 60rpx; padding: 0; font-size: 26rpx; background: $brand-primary; color: #fff; border-radius: 30rpx; flex-shrink: 0; margin-left: 16rpx; }
-.btn-select[disabled] { background: #ccc; color: #fff; }
-.empty-tip { text-align: center; color: #999; font-size: 26rpx; padding: 60rpx 0; }
+.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; }
 </style>

cfc-frontend/pages/child/rewards.vue

@@ -135,22 +135,22 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container { padding: 30rpx; padding-bottom: 120rpx; }
-.exit-switch { background: #f5f5f5; padding: 20rpx; border-radius: 10rpx; margin-bottom: 20rpx; text-align: center; color: #666; font-size: 28rpx; }
-.reward-item { background: #fff; border-radius: 16rpx; padding: 30rpx; margin-bottom: 20rpx; }
-.reward-title { font-size: 30rpx; color: #333; margin-bottom: 15rpx; }
+.exit-switch { background: $facade-fill-2; padding: 20rpx; border-radius: 10rpx; margin-bottom: 20rpx; text-align: center; color: $facade-text-body; font-size: 28rpx; }
+.reward-item { background: $app-surface; border-radius: 16rpx; padding: 30rpx; margin-bottom: 20rpx; }
+.reward-title { font-size: 30rpx; color: $facade-text-strong; margin-bottom: 15rpx; }
 .reward-progress { width: 100%; }
-.progress-text { font-size: 22rpx; color: #999; display: block; margin-top: 8rpx; }
+.progress-text { font-size: 22rpx; color: $facade-text-muted; display: block; margin-top: 8rpx; }
 .add-btn { position: fixed; bottom: 30rpx; left: 30rpx; right: 30rpx; }
-.empty { text-align: center; color: #999; padding: 100rpx; }
+.empty { text-align: center; color: $facade-text-muted; padding: 100rpx; }
 .modal-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; }
-.modal { background: #fff; border-radius: 20rpx; padding: 40rpx; width: 80%; }
+.modal { background: $app-surface; border-radius: 20rpx; padding: 40rpx; width: 80%; }
 .modal-title { font-size: 32rpx; font-weight: bold; margin-bottom: 30rpx; text-align: center; }
 .form-item { margin-bottom: 20rpx; }
-.form-label { font-size: 28rpx; color: #333; margin-bottom: 10rpx; }
-.required { color: #F97316; }
-.form-tip { font-size: 24rpx; color: #999; padding: 20rpx; background: #f5f5f5; border-radius: 10rpx; margin-bottom: 20rpx; }
+.form-label { font-size: 28rpx; color: $facade-text-strong; margin-bottom: 10rpx; }
+.required { color: $brand-primary; }
+.form-tip { font-size: 24rpx; color: $facade-text-muted; padding: 20rpx; background: $facade-fill-2; border-radius: 10rpx; margin-bottom: 20rpx; }
 .modal-btns { display: flex; gap: 20rpx; margin-top: 30rpx; }
 .modal-btns button { flex: 1; }
 </style>

cfc-frontend/pages/child/tasks.vue

@@ -376,7 +376,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 /* =============================================
    页面基础
    ============================================= */
@@ -396,7 +396,7 @@ export default {
   gap: 12rpx;
   padding: 24rpx;
   margin: 24rpx 32rpx 0;
-  background: var(--surface, #FFFFFF);
+  background: var(--surface, $app-surface);
   border: 2rpx solid var(--border, #CBD5E1);
   border-radius: var(--radius-lg, 32rpx);
   box-shadow: var(--shadow-sm);
@@ -426,7 +426,7 @@ export default {
   margin: 24rpx 32rpx 0;
   padding: 8rpx;
   border-radius: var(--radius-xl, 40rpx);
-  background: var(--surface, #FFFFFF);
+  background: var(--surface, $app-surface);
   position: relative;
 }
 
@@ -448,7 +448,7 @@ export default {
 }
 
 .tab-item--active {
-  background: linear-gradient(145deg, var(--color-primary-light, #FB923C), var(--color-primary, #F97316));
+  background: linear-gradient(145deg, var(--color-primary-light, $brand-primary-light), var(--color-primary, $brand-primary));
   box-shadow: inset -2rpx -2rpx 8rpx rgba(255, 255, 255, 0.3),
     4rpx 4rpx 12rpx rgba(249,115,22,0.2);
 }
@@ -461,7 +461,7 @@ export default {
 }
 
 .tab-item--active .tab-item__label {
-  color: var(--text-color-inverse, #FFFFFF);
+  color: var(--text-color-inverse, $app-surface);
   font-weight: var(--font-weight-bold, 600);
 }
 
@@ -474,7 +474,7 @@ export default {
   padding: 0 8rpx;
   border-radius: 999rpx;
   background: rgba(249,115,22,0.12);
-  color: var(--color-primary, #F97316);
+  color: var(--color-primary, $brand-primary);
   font-size: 20rpx;
   font-weight: var(--font-weight-bold, 600);
   line-height: 1;
@@ -482,7 +482,7 @@ export default {
 
 .tab-item--active .tab-item__count {
   background: rgba(255, 255, 255, 0.25);
-  color: #FFFFFF;
+  color: $app-surface;
 }
 
 /* =============================================
@@ -518,7 +518,7 @@ export default {
 
 /* --- 超时状态 --- */
 .task-card--overdue {
-  border-color: var(--color-error, #EF4444);
+  border-color: var(--color-error, $status-danger);
   background: linear-gradient(145deg, #FEF2F2, #FEE2E2);
   box-shadow: inset -2rpx -2rpx 6rpx rgba(239, 68, 68, 0.05),
     3rpx 3rpx 10rpx rgba(239, 68, 68, 0.08);
@@ -628,7 +628,7 @@ export default {
 }
 
 .task-time--overdue {
-  color: var(--color-error, #EF4444);
+  color: var(--color-error, $status-danger);
   font-weight: var(--font-weight-medium, 500);
 }
 
@@ -660,7 +660,7 @@ export default {
 
 .status-badge--overdue {
   background: rgba(239, 68, 68, 0.12);
-  color: var(--color-error, #EF4444);
+  color: var(--color-error, $status-danger);
   border: 2rpx solid rgba(239, 68, 68, 0.2);
 }
 

cfc-frontend/pages/cognitive-hall.vue

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

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

@@ -242,7 +242,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .test-container {
   min-height: 100vh;
   background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
@@ -265,7 +265,7 @@ export default {
 .test-title {
   font-size: 48rpx;
   font-weight: bold;
-  color: #fff;
+  color: $app-surface;
   margin-bottom: 32rpx;
 }
 
@@ -359,7 +359,7 @@ export default {
   display: block;
   font-size: 32rpx;
   font-weight: bold;
-  color: #fff;
+  color: $app-surface;
   margin: 40rpx 0 32rpx;
   text-align: center;
 }
@@ -391,7 +391,7 @@ export default {
 
 .option-text {
   font-size: 34rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: 500;
 }
 
@@ -409,7 +409,7 @@ export default {
 .result-title {
   font-size: 40rpx;
   font-weight: bold;
-  color: #fff;
+  color: $app-surface;
   margin-bottom: 48rpx;
 }
 

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

@@ -267,7 +267,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   min-height: 100vh;
   background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
@@ -345,7 +345,7 @@ export default {
 }
 .quiz-progress {
   font-size: 30rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: bold;
 }
 .quiz-timer {
@@ -374,7 +374,7 @@ export default {
 }
 .q-text {
   font-size: 44rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: bold;
   text-align: center;
   display: block;
@@ -406,7 +406,7 @@ export default {
 }
 .q-option-text {
   font-size: 34rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: bold;
 }
 .q-option--selected .q-option-text {
@@ -465,7 +465,7 @@ export default {
 }
 .result-value {
   font-size: 28rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: bold;
 }
 .dim-tag {

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

@@ -302,7 +302,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .page {
   min-height: 100vh;
   background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
@@ -320,8 +320,8 @@ export default {
   height: 96rpx;
   line-height: 96rpx;
   border-radius: 48rpx;
-  background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
-  color: #ffffff;
+  background: linear-gradient(135deg, $dim-wisdom 0%, #818cf8 100%);
+  color: $app-surface;
   font-size: 34rpx;
   font-weight: 600;
   border: none;
@@ -332,8 +332,8 @@ export default {
 }
 .primary-btn[disabled] {
   opacity: 0.6;
-  color: #ffffff;
-  background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
+  color: $app-surface;
+  background: linear-gradient(135deg, $dim-wisdom 0%, #818cf8 100%);
 }
 
 .ghost-btn {
@@ -375,7 +375,7 @@ export default {
 .intro-title {
   font-size: 48rpx;
   font-weight: bold;
-  color: #ffffff;
+  color: $app-surface;
   margin-bottom: 30rpx;
 }
 .intro-desc {
@@ -417,7 +417,7 @@ export default {
 .progress-level {
   font-size: 44rpx;
   font-weight: bold;
-  color: #ffffff;
+  color: $app-surface;
 }
 .progress-digit {
   font-size: 26rpx;
@@ -435,7 +435,7 @@ export default {
 .progress-fill {
   height: 100%;
   border-radius: 4rpx;
-  background: linear-gradient(90deg, #6366f1, #818cf8);
+  background: linear-gradient(90deg, $dim-wisdom, #818cf8);
   transition: width 0.3s ease;
 }
 
@@ -471,7 +471,7 @@ export default {
 .show-digit text {
   font-size: 120rpx;
   font-weight: bold;
-  color: #ffffff;
+  color: $app-surface;
 }
 .timer-bar-wrap {
   width: 480rpx;
@@ -484,7 +484,7 @@ export default {
 .timer-bar {
   height: 100%;
   border-radius: 6rpx;
-  background: linear-gradient(90deg, #6366f1, #818cf8);
+  background: linear-gradient(90deg, $dim-wisdom, #818cf8);
   transition: width 0.05s linear;
 }
 
@@ -519,7 +519,7 @@ export default {
 }
 .input-cell.filled {
   background: rgba(99, 102, 241, 0.5);
-  border-color: #6366f1;
+  border-color: $dim-wisdom;
 }
 .pad {
   width: 100%;
@@ -544,11 +544,11 @@ export default {
 }
 .pad-key text {
   font-size: 44rpx;
-  color: #ffffff;
+  color: $app-surface;
   font-weight: 500;
 }
 .pad-key:active {
-  border-color: #6366f1;
+  border-color: $dim-wisdom;
   background: rgba(99, 102, 241, 0.2);
 }
 .pad-key-ctrl {
@@ -581,7 +581,7 @@ export default {
 .feedback-text {
   font-size: 56rpx;
   font-weight: bold;
-  color: #ffffff;
+  color: $app-surface;
   padding: 24rpx 60rpx;
   border-radius: 24rpx;
   background: rgba(0, 0, 0, 0.35);
@@ -613,7 +613,7 @@ export default {
   width: 280rpx;
   height: 280rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
+  background: linear-gradient(135deg, $dim-wisdom 0%, #818cf8 100%);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -623,7 +623,7 @@ export default {
 .score-num {
   font-size: 96rpx;
   font-weight: bold;
-  color: #ffffff;
+  color: $app-surface;
   line-height: 1;
 }
 .score-unit {
@@ -645,7 +645,7 @@ export default {
 .max-level-value {
   font-size: 40rpx;
   font-weight: bold;
-  color: #ffffff;
+  color: $app-surface;
 }
 .dimension-tag {
   margin-top: 24rpx;

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

@@ -241,7 +241,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .test-container {
   min-height: 100vh;
   background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
@@ -263,7 +263,7 @@ export default {
 .test-title {
   font-size: 48rpx;
   font-weight: bold;
-  color: #fff;
+  color: $app-surface;
   margin-bottom: 32rpx;
 }
 
@@ -284,7 +284,7 @@ export default {
 
 .btn-primary {
   background: linear-gradient(135deg, #4ECDC4, #45B7AA);
-  color: #fff;
+  color: $app-surface;
   font-size: 34rpx;
   font-weight: bold;
   width: 480rpx;
@@ -357,7 +357,7 @@ export default {
   display: block;
   font-size: 32rpx;
   font-weight: bold;
-  color: #fff;
+  color: $app-surface;
   margin: 40rpx 0 32rpx;
   text-align: center;
 }
@@ -404,7 +404,7 @@ export default {
 .result-title {
   font-size: 40rpx;
   font-weight: bold;
-  color: #fff;
+  color: $app-surface;
   margin-bottom: 48rpx;
 }
 

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

@@ -271,7 +271,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .page {
   min-height: 100vh;
   background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
@@ -306,7 +306,7 @@ export default {
 .hero-title {
   font-size: 44rpx;
   font-weight: bold;
-  color: #ffffff;
+  color: $app-surface;
   margin-bottom: 24rpx;
 }
 .hero-desc {
@@ -392,7 +392,7 @@ export default {
 }
 .direction-arrow {
   font-size: 100rpx;
-  color: #ffffff;
+  color: $app-surface;
   line-height: 1.2;
   margin-bottom: 20rpx;
 }
@@ -424,7 +424,7 @@ export default {
 }
 .option-arrow {
   font-size: 72rpx;
-  color: #ffffff;
+  color: $app-surface;
 }
 .feedback-row {
   margin-top: 10rpx;
@@ -445,7 +445,7 @@ export default {
 /* --- 结果页 --- */
 .result-title {
   font-size: 36rpx;
-  color: #ffffff;
+  color: $app-surface;
   margin-top: 60rpx;
   margin-bottom: 20rpx;
 }
@@ -463,7 +463,7 @@ export default {
 .score-number {
   font-size: 80rpx;
   font-weight: bold;
-  color: #ffffff;
+  color: $app-surface;
   line-height: 1.1;
 }
 .score-unit {
@@ -503,7 +503,7 @@ export default {
 }
 .btn-primary {
   background: #3B82F6;
-  color: #ffffff;
+  color: $app-surface;
 }
 .btn-secondary {
   background: transparent;

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

@@ -319,7 +319,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .page-container {
   min-height: 100vh;
   background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
@@ -335,7 +335,7 @@ export default {
 .title {
   font-size: 52rpx;
   font-weight: bold;
-  color: #ffffff;
+  color: $app-surface;
   margin-top: 40rpx;
 }
 
@@ -357,7 +357,7 @@ export default {
   display: block;
   font-size: 32rpx;
   font-weight: bold;
-  color: #F97316;
+  color: $brand-primary;
   margin-bottom: 24rpx;
 }
 
@@ -371,8 +371,8 @@ export default {
 /* 按钮 */
 .btn-primary {
   width: 70%;
-  background: linear-gradient(135deg, #F97316, #FB923C);
-  color: #ffffff;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
+  color: $app-surface;
   font-size: 34rpx;
   border-radius: 50rpx;
   border: none;
@@ -390,10 +390,10 @@ export default {
 .btn-secondary {
   width: 70%;
   background: transparent;
-  color: #F97316;
+  color: $brand-primary;
   font-size: 32rpx;
   border-radius: 50rpx;
-  border: 2rpx solid #F97316;
+  border: 2rpx solid $brand-primary;
   margin-top: 30rpx;
 }
 
@@ -413,7 +413,7 @@ export default {
 .round-text {
   font-size: 34rpx;
   font-weight: bold;
-  color: #ffffff;
+  color: $app-surface;
   margin-bottom: 20rpx;
 }
 
@@ -428,7 +428,7 @@ export default {
 .timer-fill {
   height: 100%;
   border-radius: 10rpx;
-  background: linear-gradient(90deg, #F97316, #FB923C);
+  background: linear-gradient(90deg, $brand-primary, $brand-primary-light);
   transition: width 0.1s linear;
 }
 
@@ -457,7 +457,7 @@ export default {
 }
 
 .symbol-big {
-  color: #ffffff;
+  color: $app-surface;
   font-weight: bold;
   line-height: 1;
 }
@@ -499,12 +499,12 @@ export default {
 
 .choice-cell.cell-miss {
   background: #3a1f22;
-  border-color: #ef4444;
+  border-color: $status-danger;
   box-shadow: 0 0 30rpx rgba(239, 68, 68, 0.3);
 }
 
 .symbol-opt {
-  color: #ffffff;
+  color: $app-surface;
   font-weight: bold;
   line-height: 1;
 }
@@ -514,7 +514,7 @@ export default {
   width: 280rpx;
   height: 280rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #F97316, #FB923C);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -526,7 +526,7 @@ export default {
 .score-num {
   font-size: 88rpx;
   font-weight: bold;
-  color: #ffffff;
+  color: $app-surface;
   line-height: 1;
 }
 
@@ -552,7 +552,7 @@ export default {
 .stat-value {
   font-size: 40rpx;
   font-weight: bold;
-  color: #ffffff;
+  color: $app-surface;
 }
 
 .stat-label {
@@ -563,7 +563,7 @@ export default {
 
 .dimension-tag {
   font-size: 28rpx;
-  color: #F97316;
+  color: $brand-primary;
   background: rgba(249, 115, 22, 0.12);
   border: 2rpx solid rgba(249, 115, 22, 0.4);
   border-radius: 30rpx;

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

@@ -154,7 +154,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .page {
   min-height: 100vh;
   background: #F5F9FC;
@@ -168,7 +168,7 @@ export default {
 }
 .filter-item {
   flex: 1;
-  background: #FFFFFF;
+  background: $app-surface;
   border: 1rpx solid #E2E8F0;
   border-radius: 16rpx;
   padding: 16rpx 24rpx;
@@ -180,7 +180,7 @@ export default {
 .filter-item:last-child { margin-right: 0; }
 
 /* 对比区 */
-.comparison-wrap { background: #FFFFFF; border-radius: 20rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 4rpx 16rpx rgba(30,41,59,0.06); }
+.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; }
 .info-item { display: flex; align-items: center; margin-bottom: 16rpx; }
 .label { font-size: 24rpx; color: #64748B; margin-right: 12rpx; }

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

@@ -636,7 +636,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container { min-height: 100vh; background: #F3F2FA; padding-bottom: 40rpx; }
 
 /* ==================== Hero ==================== */
@@ -653,10 +653,10 @@ export default {
 .hero-bg-circle-2 { width: 220rpx; height: 220rpx; left: -80rpx; bottom: -60rpx; }
 
 .hero-top { position: relative; z-index: 1; }
-.hero-name { font-size: 44rpx; font-weight: 700; color: #FFFFFF; display: block; }
+.hero-name { font-size: 44rpx; font-weight: 700; color: $app-surface; display: block; }
 .hero-dim-row { display: flex; align-items: center; margin-top: 14rpx; flex-wrap: wrap; }
 .hero-dim-badge {
-  font-size: 22rpx; color: #FFFFFF;
+  font-size: 22rpx; color: $app-surface;
   background: rgba(255,255,255,0.22);
   border-radius: 24rpx; padding: 6rpx 18rpx;
   margin-right: 14rpx;
@@ -676,7 +676,7 @@ export default {
 }
 .hero-score-col { flex: 1; display: flex; flex-direction: column; align-items: center; }
 .hero-score-divider { width: 1rpx; height: 72rpx; background: rgba(255,255,255,0.25); }
-.hero-score-num { font-size: 88rpx; font-weight: 700; color: #FFFFFF; line-height: 1; }
+.hero-score-num { font-size: 88rpx; font-weight: 700; color: $app-surface; line-height: 1; }
 .hero-score-num-pct { font-size: 72rpx; }
 .hero-score-pct-unit { font-size: 32rpx; font-weight: 400; margin-left: 2rpx; }
 .hero-score-label { font-size: 24rpx; color: rgba(255,255,255,0.75); margin-top: 12rpx; }
@@ -692,7 +692,7 @@ export default {
 }
 .hero-pct-marker {
   position: absolute; top: -6rpx; width: 4rpx; height: 26rpx;
-  background: #FFFFFF; border-radius: 2rpx; transform: translateX(-2rpx);
+  background: $app-surface; border-radius: 2rpx; transform: translateX(-2rpx);
 }
 .hero-pct-foot { margin-top: 12rpx; text-align: center; }
 .hero-pct-foot-text { font-size: 22rpx; color: rgba(255,255,255,0.85); }
@@ -700,7 +700,7 @@ export default {
 /* ==================== 通用卡片 ==================== */
 .body { padding: 28rpx 24rpx 0; }
 .card {
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 28rpx 26rpx;
   margin-bottom: 22rpx;
@@ -709,10 +709,10 @@ 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, #6366F1, #8B5CF6);
+  background: linear-gradient(180deg, $dim-wisdom, #8B5CF6);
   margin-right: 12rpx; align-self: center;
 }
-.card-title-bar-gold { background: linear-gradient(180deg, #F59E0B, #F97316); }
+.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; }
 
@@ -727,14 +727,14 @@ export default {
 .metric-unit { font-size: 20rpx; font-weight: 400; }
 .metric-warn-badge {
   font-size: 20rpx; color: #EA580C;
-  background: #FFF7ED; border: 1rpx solid #FDBA74;
+  background: $uni-primary-pale; border: 1rpx solid #FDBA74;
   border-radius: 16rpx; padding: 2rpx 12rpx; margin-right: 10rpx;
 }
 .metric-track {
   position: relative; height: 16rpx; border-radius: 8rpx; background: #EEF0F6;
 }
 .metric-fill { height: 100%; border-radius: 8rpx; }
-.metric-fill-main { background: linear-gradient(90deg, #818CF8, #6366F1); }
+.metric-fill-main { background: linear-gradient(90deg, #818CF8, $dim-wisdom); }
 .metric-fill-warn { background: linear-gradient(90deg, #FDBA74, #EA580C); }
 .metric-ref-line {
   position: absolute; top: -4rpx; width: 2rpx; height: 24rpx;
@@ -756,7 +756,7 @@ export default {
 .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-high { background: linear-gradient(90deg, #6EE7B7, #10B981); }
+.bf-high { background: linear-gradient(90deg, #6EE7B7, $status-success); }
 .bf-low { background: linear-gradient(90deg, #FCD34D, #F59E0B); }
 .bf-avg-line {
   position: absolute; top: -5rpx; left: 60%; width: 2rpx; height: 24rpx;
@@ -827,15 +827,15 @@ export default {
   mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
 }
 .advice-toggle { text-align: center; margin-top: 16rpx; }
-.advice-toggle-text { font-size: 24rpx; color: #6366F1; font-weight: 500; }
+.advice-toggle-text { font-size: 24rpx; color: $dim-wisdom; font-weight: 500; }
 
 .foot-note { text-align: center; padding: 18rpx 0 8rpx; }
 .foot-note-text { font-size: 20rpx; color: #B0B3C3; }
 
 /* ==================== 其他 ==================== */
 .loading-wrap { display: flex; justify-content: center; padding: 140rpx 0; }
-.loading-text { font-size: 28rpx; color: #999; }
+.loading-text { font-size: 28rpx; color: $facade-text-muted; }
 .empty-wrap { display: flex; justify-content: center; padding: 140rpx 0; }
-.empty-text { font-size: 28rpx; color: #999; }
+.empty-text { font-size: 28rpx; color: $facade-text-muted; }
 .bottom-spacer { height: 60rpx; }
 </style>

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

@@ -415,7 +415,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .food-query-page {
   height: 100vh;
   overflow: hidden;
@@ -429,8 +429,8 @@ export default {
   display: flex;
   overflow-x: auto;
   padding: 16rpx 30rpx 8rpx;
-  background: #fff;
-  border-bottom: 1rpx solid #f0f0f0;
+  background: $app-surface;
+  border-bottom: 1rpx solid $facade-fill;
   gap: 16rpx;
   -webkit-overflow-scrolling: touch;
 }
@@ -438,22 +438,22 @@ export default {
   flex-shrink: 0;
   padding: 8rpx 20rpx;
   border-radius: 20rpx;
-  background: #f5f5f5;
-  color: #666;
+  background: $facade-fill-2;
+  color: $facade-text-body;
   font-size: 26rpx;
   font-weight: 500;
 }
 .member-tab.active {
-  background: linear-gradient(135deg, #FF8C42, #FFB366);
-  color: #fff;
+  background: linear-gradient(135deg, $dim-body, #FFB366);
+  color: $app-surface;
 }
 
 /* 模式切换（排序） */
 .mode-bar {
   display: flex;
   padding: 16rpx 30rpx;
-  background: #fff;
-  border-bottom: 1rpx solid #f0f0f0;
+  background: $app-surface;
+  border-bottom: 1rpx solid $facade-fill;
   gap: 20rpx;
 }
 .mode-btn {
@@ -461,34 +461,34 @@ export default {
   padding: 12rpx 0;
   text-align: center;
   border-radius: 20rpx;
-  background: #f5f5f5;
-  color: #666;
+  background: $facade-fill-2;
+  color: $facade-text-body;
   font-size: 26rpx;
 }
 .mode-btn.active {
-  background: linear-gradient(135deg, #10B981, #34D399);
-  color: #fff;
+  background: linear-gradient(135deg, $status-success, #34D399);
+  color: $app-surface;
 }
 
 /* 搜索栏 */
 .search-bar {
   display: flex;
   padding: 20rpx 30rpx;
-  background-color: #FFFFFF;
+  background-color: $app-surface;
 }
 .search-input {
   flex: 1;
-  border: 1rpx solid #ddd;
+  border: 1rpx solid $facade-border-soft;
   border-radius: 30rpx;
   padding: 16rpx 24rpx;
   font-size: 26rpx;
-  background-color: #FAFAFA;
+  background-color: $facade-fill-ghost;
 }
 .search-btn {
   margin-left: 20rpx;
   padding: 16rpx 32rpx;
-  background-color: #FF8C42;
-  color: #FFFFFF;
+  background-color: $dim-body;
+  color: $app-surface;
   border-radius: 30rpx;
   font-size: 26rpx;
 }
@@ -510,15 +510,15 @@ export default {
 }
 .tab-item {
   padding: 12rpx 24rpx;
-  border: 1rpx solid #ddd;
+  border: 1rpx solid $facade-border-soft;
   border-radius: 30rpx;
   font-size: 24rpx;
-  color: #666;
-  background-color: #FFFFFF;
+  color: $facade-text-body;
+  background-color: $app-surface;
 }
 .tab-active {
-  border-color: #FF8C42;
-  color: #FF8C42;
+  border-color: $dim-body;
+  color: $dim-body;
   background-color: #FFF5EB;
 }
 
@@ -530,11 +530,11 @@ export default {
 }
 .filter-item {
   padding: 12rpx 24rpx;
-  border: 1rpx solid #ddd;
+  border: 1rpx solid $facade-border-soft;
   border-radius: 30rpx;
   font-size: 24rpx;
-  color: #666;
-  background-color: #FFFFFF;
+  color: $facade-text-body;
+  background-color: $app-surface;
 }
 .filter-active {
   border-color: #4CAF50;
@@ -544,7 +544,7 @@ export default {
 
 /* 家庭总览 */
 .family-overview {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 20rpx;
   margin-bottom: 20rpx;
@@ -552,14 +552,14 @@ export default {
 .overview-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 16rpx;
   padding-bottom: 16rpx;
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid $facade-fill;
 }
 .overview-item {
   padding: 16rpx 0;
-  border-bottom: 1rpx solid #f5f5f5;
+  border-bottom: 1rpx solid $facade-fill-2;
 }
 .overview-item:last-child {
   border-bottom: none;
@@ -577,7 +577,7 @@ export default {
 }
 .category-label {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .member-scores {
   display: flex;
@@ -588,14 +588,14 @@ export default {
   font-size: 20rpx;
   padding: 4rpx 12rpx;
   border-radius: 12rpx;
-  background: #f5f5f5;
+  background: $facade-fill-2;
 }
 .score-green {
-  color: #10B981;
+  color: $status-success;
   background: #E8F5E9;
 }
 .score-red {
-  color: #EF4444;
+  color: $status-danger;
   background: #FEE2E2;
 }
 
@@ -606,7 +606,7 @@ export default {
   gap: 16rpx;
 }
 .food-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 18rpx 20rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
@@ -626,7 +626,7 @@ export default {
   width: 36rpx;
   height: 36rpx;
   border-radius: 10rpx;
-  background: linear-gradient(135deg, #FF8C42, #FFB366);
+  background: linear-gradient(135deg, $dim-body, #FFB366);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -634,14 +634,14 @@ export default {
   flex-shrink: 0;
 }
 .ingredient-badge.good {
-  background: linear-gradient(135deg, #10B981, #34D399);
+  background: linear-gradient(135deg, $status-success, #34D399);
 }
 .ingredient-badge.bad {
-  background: linear-gradient(135deg, #EF4444, #DC2626);
+  background: linear-gradient(135deg, $status-danger, #DC2626);
 }
 .ingredient-badge-text {
   font-size: 18rpx;
-  color: #FFFFFF;
+  color: $app-surface;
   font-weight: 600;
 }
 .food-info {
@@ -670,7 +670,7 @@ export default {
   flex-shrink: 0;
   font-size: 20rpx;
   color: #888;
-  background: #f5f5f5;
+  background: $facade-fill-2;
   padding: 4rpx 14rpx;
   border-radius: 8rpx;
 }
@@ -686,8 +686,8 @@ export default {
   min-width: 60rpx;
   text-align: right;
 }
-.score-value.good { color: #10B981; }
-.score-value.bad { color: #EF4444; }
+.score-value.good { color: $status-success; }
+.score-value.bad { color: $status-danger; }
 .status-badge {
   padding: 6rpx 16rpx;
   border-radius: 20rpx;
@@ -715,7 +715,7 @@ export default {
 }
 .empty-text {
   font-size: 30rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
   display: block;
   margin-bottom: 12rpx;
@@ -726,7 +726,7 @@ export default {
 }
 .loading-text {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .bottom-spacer { height: 40rpx; }
 </style>

cfc-frontend/pages/diet/index.vue

@@ -401,15 +401,15 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 /* ===== 页面令牌（暖灶·家的味道） ===== */
 .diet-page {
   min-height: 100vh;
-  background: linear-gradient(180deg, #FFF7ED 0%, #FFF3E6 100%);
+  background: linear-gradient(180deg, $uni-primary-pale 0%, #FFF3E6 100%);
   overflow: hidden;
 }
 .dining-hero {
-  background: linear-gradient(135deg, #FF8C42, #FFB366);
+  background: linear-gradient(135deg, $dim-body, #FFB366);
   border-radius: 32rpx;
   padding: 36rpx 32rpx;
   margin-bottom: 24rpx;
@@ -423,7 +423,7 @@ export default {
   margin-right: 20rpx; flex-shrink: 0;
 }
 .hero-icon { font-size: 44rpx; }
-.hero-title { font-size: 38rpx; font-weight: 700; color: #FFFFFF; display: block; }
+.hero-title { font-size: 38rpx; font-weight: 700; color: $app-surface; display: block; }
 .hero-subtitle { font-size: 24rpx; color: rgba(255,255,255,0.85); margin-top: 6rpx; display: block; }
 .hero-meals { display: flex; }
 .hero-meal {
@@ -435,12 +435,12 @@ export default {
 .hero-meal:first-child { margin-left: 0; }
 .hero-meal:last-child { margin-right: 0; }
 .hero-meal-emoji { font-size: 40rpx; margin-bottom: 8rpx; }
-.hero-meal-label { font-size: 24rpx; color: #FFFFFF; }
+.hero-meal-label { font-size: 24rpx; color: $app-surface; }
 .hero-meal-count { font-size: 22rpx; color: rgba(255,255,255,0.9); margin-top: 6rpx; font-weight: 600; }
 .hero-empty { display: flex; flex-direction: column; align-items: center; padding: 12rpx 0; }
-.hero-empty-text { font-size: 26rpx; color: #FFFFFF; margin-bottom: 20rpx; }
+.hero-empty-text { font-size: 26rpx; color: $app-surface; margin-bottom: 20rpx; }
 .hero-empty-btn {
-  background: #FFFFFF; color: #C2410C; font-size: 28rpx; font-weight: 600;
+  background: $app-surface; color: #C2410C; font-size: 28rpx; font-weight: 600;
   padding: 18rpx 44rpx; border-radius: 999rpx;
 }
 .content {
@@ -452,7 +452,7 @@ export default {
 
 /* 共餐格子 */
 .card {
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 24rpx;
   margin-bottom: 24rpx;
   box-shadow: 0 4rpx 20rpx rgba(255, 140, 66, 0.08);
@@ -467,7 +467,7 @@ export default {
 }
 .card-basket-icon {
   width: 64rpx; height: 64rpx; border-radius: 18rpx;
-  background: linear-gradient(135deg, #FF8C42, #FFB366);
+  background: linear-gradient(135deg, $dim-body, #FFB366);
   display: flex; align-items: center; justify-content: center;
   margin-right: 16rpx; flex-shrink: 0;
 }
@@ -475,7 +475,7 @@ export default {
 .card-title {
   font-size: 30rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .card-body {
   padding: 24rpx 28rpx 28rpx;
@@ -491,27 +491,27 @@ export default {
 .action-btn {
   padding: 14rpx 24rpx;
   border-radius: 32rpx;
-  background: #F5F5F5;
+  background: $facade-fill-2;
   margin-right: 16rpx;
 }
 .action-btn:last-child {
   margin-right: 0;
 }
 .action-btn-primary {
-  background: #FF8C42;
+  background: $dim-body;
 }
-.action-btn-accent { background: linear-gradient(135deg, #10B981, #34D399); }
-.action-btn-text-accent { font-size: 24rpx; color: #FFFFFF; }
+.action-btn-accent { background: linear-gradient(135deg, $status-success, #34D399); }
+.action-btn-text-accent { font-size: 24rpx; color: $app-surface; }
 .action-btn-disabled {
   opacity: 0.4;
 }
 .action-btn-text {
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .action-btn-text-primary {
   font-size: 24rpx;
-  color: #FFFFFF;
+  color: $app-surface;
 }
 
 /* 食材列表 */
@@ -524,7 +524,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 20rpx 0;
-  border-bottom: 1rpx solid #F5F5F5;
+  border-bottom: 1rpx solid $facade-fill-2;
 }
 .ingredient-item:last-child {
   border-bottom: none;
@@ -538,7 +538,7 @@ export default {
   width: 40rpx;
   height: 40rpx;
   border-radius: 12rpx;
-  background: linear-gradient(135deg, #FF8C42, #FFB366);
+  background: linear-gradient(135deg, $dim-body, #FFB366);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -547,7 +547,7 @@ export default {
 }
 .ingredient-badge-text {
   font-size: 20rpx;
-  color: #FFFFFF;
+  color: $app-surface;
   font-weight: 600;
 }
 .ingredient-info {
@@ -557,17 +557,17 @@ export default {
 }
 .ingredient-name {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
 }
 .ingredient-reason {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 4rpx;
 }
 .ingredient-balance {
   font-size: 20rpx;
-  color: #FF8C42;
+  color: $dim-body;
   margin-top: 2rpx;
 }
 .ingredient-remove {
@@ -580,7 +580,7 @@ export default {
 }
 .remove-text {
   font-size: 28rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
 }
 
 /* 区域标签 */
@@ -590,7 +590,7 @@ export default {
 .section-label-text {
   font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 /* 快捷入口网格 */
@@ -621,8 +621,8 @@ export default {
   transition: transform 0.15s ease;
 }
 .nav-icon-green { background: linear-gradient(135deg, #FFF1E6, #FFE0C0); }
-.nav-icon-blue  { background: linear-gradient(135deg, #FFF7ED, #FFEEDD); }
-.nav-icon-orange{ background: linear-gradient(135deg, #FF8C42, #FFB366); }
+.nav-icon-blue  { background: linear-gradient(135deg, $uni-primary-pale, #FFEEDD); }
+.nav-icon-orange{ background: linear-gradient(135deg, $dim-body, #FFB366); }
 .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); }
@@ -631,7 +631,7 @@ export default {
 }
 .nav-label {
   font-size: 22rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 /* 趋势卡片 */
@@ -655,16 +655,16 @@ export default {
 .trend-num {
   font-size: 48rpx;
   font-weight: 700;
-  color: #FF8C42;
+  color: $dim-body;
 }
 .trend-unit {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 4rpx;
 }
 .trend-label {
   font-size: 22rpx;
-  color: #666;
+  color: $facade-text-body;
   margin-top: 4rpx;
 }
 
@@ -681,11 +681,11 @@ export default {
 }
 .empty-text {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .empty-sub {
   font-size: 22rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
   margin-top: 8rpx;
 }
 
@@ -713,7 +713,7 @@ export default {
   position: relative;
   width: 100%;
   max-height: 80vh;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 32rpx 32rpx 0 0;
   padding: 32rpx;
   z-index: 1;
@@ -727,7 +727,7 @@ export default {
 .modal-title {
   font-size: 32rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .modal-close {
   width: 48rpx;
@@ -738,13 +738,13 @@ export default {
 }
 .close-text {
   font-size: 32rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .search-wrap {
   margin-bottom: 20rpx;
 }
 .search-input {
-  border: 1rpx solid #eee;
+  border: 1rpx solid $facade-hairline-2;
   border-radius: 40rpx;
   padding: 20rpx 28rpx;
   font-size: 28rpx;
@@ -758,15 +758,15 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 24rpx 0;
-  border-bottom: 1rpx solid #F5F5F5;
+  border-bottom: 1rpx solid $facade-fill-2;
 }
 .food-name {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .food-tag {
   font-size: 22rpx;
-  color: #FF8C42;
+  color: $dim-body;
   background: #FFF0E0;
   padding: 6rpx 16rpx;
   border-radius: 20rpx;

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

@@ -230,11 +230,11 @@ export default {
 }
 .tab-active {
   background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
-  color: #FFFFFF; font-weight: 600;
+  color: $app-surface; font-weight: 600;
   box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.3);
 }
 .meal-section {
-  background-color: #FFFFFF;
+  background-color: $app-surface;
   border-radius: 24rpx;
   margin-bottom: 30rpx;
   overflow: hidden;
@@ -266,7 +266,7 @@ export default {
   box-sizing: border-box; position: relative;
   display: flex; align-items: center;
   padding: 16rpx 24rpx; border: 2rpx solid #E2E8F0; border-radius: 20rpx;
-  background: #FFFFFF; min-width: 160rpx;
+  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);
 }
 .member-info {
@@ -285,7 +285,7 @@ export default {
   width: 32rpx;
   height: 32rpx;
   border-radius: 50%;
-  background-color: #FFFFFF;
+  background-color: $app-surface;
   color: $brand-primary;
   font-size: 20rpx;
   font-weight: 900;
@@ -297,7 +297,7 @@ export default {
 }
 .member-avatar {
   width: 48rpx; height: 48rpx; border-radius: 50%;
-  color: #FFFFFF; display: flex; align-items: center; justify-content: center;
+  color: $app-surface; display: flex; align-items: center; justify-content: center;
   font-size: 24rpx; font-weight: 600;
 }
 .member-avatar-male   { background: linear-gradient(135deg, $brand-primary, $brand-primary-light); }
@@ -312,11 +312,11 @@ export default {
   white-space: nowrap;
 }
 .member-selected .member-name {
-  color: #FFFFFF;
+  color: $app-surface;
   font-weight: 600;
 }
 .member-selected .member-avatar {
-  border: 2rpx solid #FFFFFF;
+  border: 2rpx solid $app-surface;
 }
 .member-empty {
   width: 100%;
@@ -332,7 +332,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #FFFFFF;
+  background-color: $app-surface;
   border: 2rpx dashed $brand-primary;
   border-radius: 20rpx;
   padding: 24rpx 30rpx;
@@ -373,7 +373,7 @@ export default {
 }
 .save-btn {
   background: linear-gradient(135deg, $brand-primary, $brand-primary-dark);
-  color: #FFFFFF; text-align: center; padding: 28rpx 0; border-radius: 999rpx;
+  color: $app-surface; text-align: center; padding: 28rpx 0; border-radius: 999rpx;
   font-size: 30rpx; font-weight: 600;
   box-shadow: 0 6rpx 20rpx rgba(249, 115, 22, 0.3);
   transition: opacity 0.2s ease, transform 0.2s ease;

cfc-frontend/pages/diet/preferences.vue

@@ -375,10 +375,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .preferences-page {
   min-height: 100vh;
-  background: linear-gradient(180deg, #FFF7ED 0%, #FFF3E6 100%);
+  background: linear-gradient(180deg, $uni-primary-pale 0%, #FFF3E6 100%);
   display: flex;
   flex-direction: column;
 }
@@ -389,12 +389,12 @@ export default {
   height: 12rpx; background: #FFE3C7; border-radius: 6rpx; overflow: hidden;
 }
 .progress-fill {
-  height: 100%; background: linear-gradient(90deg, #FF8C42, #FFB366);
+  height: 100%; background: linear-gradient(90deg, $dim-body, #FFB366);
   border-radius: 6rpx; transition: width 0.3s ease;
 }
 .progress-labels { display: flex; justify-content: space-between; margin-top: 12rpx; }
 .progress-label { font-size: 22rpx; color: #C2A78A; flex: 1; text-align: center; }
-.progress-label-active { color: #FF8C42; font-weight: 600; }
+.progress-label-active { color: $dim-body; font-weight: 600; }
 
 /* ===== 内容 ===== */
 .content { flex: 1; padding: 10rpx 32rpx 30rpx; box-sizing: border-box; }
@@ -406,7 +406,7 @@ export default {
 
 /* ===== 卡片 ===== */
 .card {
-  background: #FFFFFF; border-radius: 24rpx; padding: 28rpx;
+  background: $app-surface; border-radius: 24rpx; padding: 28rpx;
   margin-bottom: 24rpx; box-shadow: 0 4rpx 20rpx rgba(255, 140, 66, 0.08);
 }
 .card-title { font-size: 28rpx; font-weight: 600; color: #4A2E1A; margin-bottom: 20rpx; display: block; }
@@ -419,13 +419,13 @@ export default {
   border: 2rpx solid transparent;
 }
 .chip-active {
-  background: #FF8C42; color: #FFFFFF; font-weight: 600;
+  background: $dim-body; color: $app-surface; font-weight: 600;
   border-color: #E8732A;
 }
 
 /* ===== 自定义添加 ===== */
 .custom-add {
-  padding: 14rpx 0; font-size: 26rpx; color: #FF8C42; font-weight: 500;
+  padding: 14rpx 0; font-size: 26rpx; color: $dim-body; font-weight: 500;
 }
 .custom-row { display: flex; align-items: center; margin-top: 8rpx; margin-bottom: 12rpx; }
 .custom-input {
@@ -433,7 +433,7 @@ export default {
   padding: 14rpx 24rpx; font-size: 26rpx; background: #FFF9F2;
 }
 .custom-confirm {
-  background: #FF8C42; color: #fff; font-size: 26rpx; font-weight: 600;
+  background: $dim-body; color: $app-surface; font-size: 26rpx; font-weight: 600;
   padding: 14rpx 32rpx; border-radius: 999rpx; margin-left: 16rpx;
 }
 
@@ -441,7 +441,7 @@ export default {
 .slider-row { display: flex; align-items: center; }
 .slider-label { font-size: 24rpx; color: #A08B72; width: 72rpx; }
 .slider { flex: 1; }
-.spice-level-label { font-size: 24rpx; color: #FF8C42; text-align: center; margin-top: 8rpx; display: block; }
+.spice-level-label { font-size: 24rpx; color: $dim-body; text-align: center; margin-top: 8rpx; display: block; }
 
 /* ===== 底栏 ===== */
 .footer-bar {
@@ -456,6 +456,6 @@ export default {
   background: #F5F0EA; color: #6B5340; margin-right: 20rpx;
 }
 .footer-btn-primary {
-  background: linear-gradient(135deg, #FF8C42, #FFB366); color: #FFFFFF;
+  background: linear-gradient(135deg, $dim-body, #FFB366); color: $app-surface;
 }
 </style>

cfc-frontend/pages/diet/recommendation.vue

@@ -256,7 +256,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .recommendation-page {
   min-height: 100vh;
   background-color: #F5F7FA;
@@ -273,29 +273,29 @@ 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, #FF8C42, #FFB366);
+  background: linear-gradient(135deg, $dim-body, #FFB366);
   display: flex; align-items: center; justify-content: center;
   box-shadow: 0 10rpx 30rpx rgba(255, 140, 66, 0.3);
   margin-bottom: 40rpx;
 }
 .empty-icon { font-size: 72rpx; }
-.empty-title { font-size: calc(34rpx * var(--font-scale, 1)); font-weight: 700; color: #333; display: block; margin-bottom: 16rpx; }
-.empty-sub { font-size: calc(26rpx * var(--font-scale, 1)); color: #999; display: block; margin-bottom: 48rpx; }
+.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, #FF8C42, #FFB366);
-  color: #FFFFFF; padding: 28rpx 60rpx; border-radius: 999rpx;
+  background: linear-gradient(135deg, $dim-body, #FFB366);
+  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);
 }
 .card {
   display: flex;
-  background-color: #FFFFFF;
+  background-color: $app-surface;
   border-radius: 20rpx;
   margin-bottom: 30rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
   overflow: hidden;
 }
-.card-accent { width: 8rpx; background: linear-gradient(180deg, #FF8C42, #FFB366); flex-shrink: 0; }
+.card-accent { width: 8rpx; background: linear-gradient(180deg, $dim-body, #FFB366); flex-shrink: 0; }
 .card-body {
   flex: 1;
   padding: 30rpx;
@@ -303,7 +303,7 @@ export default {
 .card-title {
   font-size: calc(30rpx * var(--font-scale, 1));
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 20rpx;
   display: block;
 }
@@ -314,7 +314,7 @@ export default {
 }
 .date-text {
   font-size: calc(28rpx * var(--font-scale, 1));
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
 }
 .status-badge {
@@ -332,7 +332,7 @@ export default {
   color: #4CAF50;
 }
 .meal-section {
-  background-color: #FFFFFF;
+  background-color: $app-surface;
   border-radius: 20rpx;
   margin-bottom: 30rpx;
   overflow: hidden;
@@ -350,12 +350,12 @@ export default {
 .meal-name {
   font-size: calc(28rpx * var(--font-scale, 1));
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   flex: 1;
 }
 .meal-count {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .dish-list {
   padding: 20rpx 30rpx;
@@ -367,7 +367,7 @@ export default {
   justify-content: space-between;
   margin-bottom: 12rpx;
 }
-.dish-name { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: #333; }
+.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-ingredients {
   display: flex;
@@ -377,17 +377,17 @@ export default {
 }
 .ingredient-tag {
   padding: 6rpx 16rpx;
-  background-color: #F5F5F5;
+  background-color: $facade-fill-2;
   border-radius: 20rpx;
   font-size: 22rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .dish-method {
   margin-bottom: 16rpx;
 }
 .method-text {
   font-size: calc(24rpx * var(--font-scale, 1));
-  color: #999;
+  color: $facade-text-muted;
 }
 .dish-actions { display: flex; gap: 16rpx; margin-top: 8rpx; }
 .action-btn { padding: 12rpx 26rpx; border-radius: 999rpx; font-size: 24rpx; }
@@ -405,11 +405,11 @@ export default {
 .nutrition-value { font-size: 40rpx; font-weight: 700; color: #C2410C; display: block; }
 .nutrition-unit {
   font-size: calc(22rpx * var(--font-scale, 1));
-  color: #999;
+  color: $facade-text-muted;
 }
 .nutrition-label {
   font-size: calc(22rpx * var(--font-scale, 1));
-  color: #666;
+  color: $facade-text-body;
   display: block;
   margin-top: 4rpx;
 }
@@ -421,15 +421,15 @@ export default {
   gap: 20rpx;
 }
 .btn-secondary {
-  flex: 1; padding: 28rpx 0; background: #FFFFFF;
-  border: 2rpx solid #FF8C42; border-radius: 999rpx;
+  flex: 1; padding: 28rpx 0; background: $app-surface;
+  border: 2rpx solid $dim-body; border-radius: 999rpx;
   text-align: center; font-size: 28rpx; color: #C2410C;
 }
 .btn-primary {
   flex: 1; padding: 28rpx 0;
-  background: linear-gradient(135deg, #FF8C42, #FFB366);
+  background: linear-gradient(135deg, $dim-body, #FFB366);
   border-radius: 999rpx; text-align: center;
-  font-size: 28rpx; color: #FFFFFF; font-weight: 600;
+  font-size: 28rpx; color: $app-surface; font-weight: 600;
   box-shadow: 0 6rpx 20rpx rgba(255, 140, 66, 0.25);
 }
 </style>

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

@@ -171,7 +171,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .record-detail-page {
   min-height: 100vh;
   background-color: #F5F7FA;
@@ -193,11 +193,11 @@ export default {
 .detail-photo {
   width: 100%;
   height: 400rpx;
-  background-color: #f0f0f0;
+  background-color: $facade-fill;
 }
 .card {
   display: flex;
-  background-color: #FFFFFF;
+  background-color: $app-surface;
   border-radius: 20rpx;
   margin-bottom: 30rpx;
   box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
@@ -205,7 +205,7 @@ export default {
 }
 .card-accent {
   width: 8rpx;
-  background-color: #FF8C42;
+  background-color: $dim-body;
   flex-shrink: 0;
 }
 .card-body {
@@ -215,7 +215,7 @@ export default {
 .card-title {
   font-size: calc(28rpx * var(--font-scale, 1));
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 20rpx;
   display: block;
 }
@@ -223,18 +223,18 @@ export default {
   display: flex;
   justify-content: space-between;
   padding: 16rpx 0;
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid $facade-fill;
 }
 .info-row:last-child {
   border-bottom: none;
 }
 .info-label {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .info-value {
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
 }
 .ai-item {
@@ -242,14 +242,14 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 16rpx 0;
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid $facade-fill;
 }
 .ai-item:last-child {
   border-bottom: none;
 }
 .ai-name {
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .ai-confidence {
   display: flex;
@@ -278,7 +278,7 @@ export default {
   background-color: #FFF5EB;
   border-radius: 30rpx;
   font-size: 24rpx;
-  color: #FF8C42;
+  color: $dim-body;
 }
 .action-area {
   display: flex;
@@ -288,12 +288,12 @@ export default {
 .btn-secondary {
   flex: 1;
   padding: 28rpx 0;
-  background-color: #FFFFFF;
-  border: 1rpx solid #ddd;
+  background-color: $app-surface;
+  border: 1rpx solid $facade-border-soft;
   border-radius: 16rpx;
   text-align: center;
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .btn-delete {
   flex: 1;
@@ -310,6 +310,6 @@ export default {
   align-items: center;
   justify-content: center;
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 </style>

cfc-frontend/pages/diet/records.vue

@@ -374,38 +374,38 @@ export default {
 }
 </script>
 
-<style scoped>
-.page { min-height: 100vh; background: #FFF7ED; display: flex; flex-direction: column; }
+<stylescoped lang="scss">
+.page { min-height: 100vh; background: $uni-primary-pale; display: flex; flex-direction: column; }
 
 /* 成员切换栏 */
 .member-bar {
-  display: flex; overflow-x: auto; padding: 16rpx 30rpx 8rpx; background: #fff;
-  border-bottom: 1rpx solid #f0f0f0; gap: 16rpx; -webkit-overflow-scrolling: touch;
+  display: flex; overflow-x: auto; padding: 16rpx 30rpx 8rpx; background: $app-surface;
+  border-bottom: 1rpx solid $facade-fill; gap: 16rpx; -webkit-overflow-scrolling: touch;
 }
 .member-tab {
-  flex-shrink: 0; padding: 8rpx 20rpx; border-radius: 20rpx; background: #f5f5f5; color: #666;
+  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, #FF8C42, #FFB366); color: #fff; }
+.member-tab.active { background: linear-gradient(135deg, $dim-body, #FFB366); color: $app-surface; }
 
 /* 周历条 */
 .week-strip {
   display: flex; align-items: center; justify-content: space-around;
-  background: #fff; padding: 12rpx 20rpx 16rpx; border-bottom: 1rpx solid #f0f0f0;
+  background: $app-surface; padding: 12rpx 20rpx 16rpx; border-bottom: 1rpx solid $facade-fill;
 }
 .week-day {
   display: flex; flex-direction: column; align-items: center;
   padding: 8rpx 12rpx; border-radius: 16rpx; min-width: 68rpx;
 }
-.week-day-today .week-day-label { color: #FF8C42; font-weight: 700; }
-.week-day-active { background: linear-gradient(135deg, #FF8C42, #FFB366); }
+.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 .week-day-label,
-.week-day-active .week-day-num { color: #fff; }
+.week-day-active .week-day-num { color: $app-surface; }
 .week-day-has .week-dot-wrap { margin-top: 6rpx; }
-.week-day-label { font-size: 20rpx; color: #999; }
-.week-day-num { font-size: 28rpx; font-weight: 600; color: #333; }
+.week-day-label { font-size: 20rpx; color: $facade-text-muted; }
+.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: #FF8C42; }
+.week-dot { width: 10rpx; height: 10rpx; border-radius: 50%; background: $dim-body; }
 .week-day-count { font-size: 18rpx; color: #C2410C; }
 
 /* 内容区 */
@@ -413,35 +413,35 @@ export default {
 
 /* 通用卡片 */
 .card {
-  display: flex; background: #fff; border-radius: 20rpx; margin-bottom: 24rpx;
+  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, #FF8C42, #FFB366); flex-shrink: 0; }
+.card-accent { width: 8rpx; background: linear-gradient(180deg, $dim-body, #FFB366); flex-shrink: 0; }
 .card-body { flex: 1; padding: 24rpx 28rpx; }
-.card-title { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: #333; margin-bottom: 16rpx; display: block; }
+.card-title { font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; margin-bottom: 16rpx; display: block; }
 
 /* 统计行 */
 .stat-row { display: flex; justify-content: space-around; }
 .stat-item { text-align: center; }
-.stat-val { font-size: 36rpx; font-weight: 700; color: #FF8C42; display: block; }
-.stat-unit { font-size: 20rpx; color: #999; }
-.stat-label { font-size: 22rpx; color: #666; display: block; margin-top: 4rpx; }
+.stat-val { font-size: 36rpx; font-weight: 700; color: $dim-body; display: block; }
+.stat-unit { font-size: 20rpx; color: $facade-text-muted; }
+.stat-label { font-size: 22rpx; color: $facade-text-body; display: block; margin-top: 4rpx; }
 
 /* 食材提示 */
 .alert-card {
-  background: #fff; border-radius: 20rpx; margin-bottom: 24rpx;
+  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-icon { font-size: 36rpx; }
-.alert-title { font-size: 28rpx; font-weight: 600; color: #333; }
+.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: #C62828; }
+.alert-label.over { color: $status-danger-strong-2; }
 .alert-label.under { color: #1565C0; }
 .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: #C62828; }
+.tag-over { background: #FFEBEE; color: $status-danger-strong-2; }
 .tag-under { background: #E3F2FD; color: #1565C0; }
 .tag-count { font-size: 20rpx; opacity: 0.8; }
 .alert-hint { font-size: 22rpx; color: #888; margin-top: 8rpx; display: block; }
@@ -450,29 +450,29 @@ export default {
 .top-foods-list { display: flex; flex-direction: column; gap: 12rpx; }
 .top-food-item { display: flex; align-items: center; gap: 16rpx; }
 .top-food-rank {
-  width: 36rpx; height: 36rpx; border-radius: 50%; background: #FFF1E6; color: #FF8C42;
+  width: 36rpx; height: 36rpx; border-radius: 50%; background: #FFF1E6; color: $dim-body;
   font-size: 22rpx; font-weight: 700; display: flex; align-items: center; justify-content: center;
 }
-.top-food-name { flex: 1; font-size: 26rpx; color: #333; }
-.top-food-count { font-size: 24rpx; color: #999; }
+.top-food-name { flex: 1; font-size: 26rpx; color: $facade-text-strong; }
+.top-food-count { font-size: 24rpx; color: $facade-text-muted; }
 
 /* 日期切换栏 */
 .date-bar {
   display: flex; align-items: center; justify-content: space-between;
-  background: #fff; border-radius: 16rpx; padding: 16rpx 24rpx; margin-bottom: 20rpx;
+  background: $app-surface; border-radius: 16rpx; padding: 16rpx 24rpx; margin-bottom: 20rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
 }
-.date-prev, .date-next { font-size: 26rpx; color: #FF8C42; font-weight: 600; padding: 8rpx 16rpx; }
-.date-display { font-size: 28rpx; font-weight: 600; color: #333; }
+.date-prev, .date-next { font-size: 26rpx; color: $dim-body; font-weight: 600; padding: 8rpx 16rpx; }
+.date-display { font-size: 28rpx; font-weight: 600; color: $facade-text-strong; }
 
 /* 记录卡片 */
 .records-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16rpx; }
-.records-label { font-size: 28rpx; font-weight: 600; color: #333; }
-.records-count { font-size: 24rpx; color: #999; }
+.records-label { font-size: 28rpx; font-weight: 600; color: $facade-text-strong; }
+.records-count { font-size: 24rpx; color: $facade-text-muted; }
 
 .record-card {
-  background: #fff; border-radius: 16rpx; padding: 20rpx 24rpx; margin-bottom: 16rpx;
-  box-shadow: 0 2rpx 8rpx rgba(255,140,66,0.06); border-left: 6rpx solid #FF8C42;
+  background: $app-surface; border-radius: 16rpx; padding: 20rpx 24rpx; margin-bottom: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(255,140,66,0.06); border-left: 6rpx solid $dim-body;
 }
 .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; }
@@ -481,30 +481,30 @@ export default {
 .meal-dinner    { background: #F3E5F5; color: #7B1FA2; }
 .meal-snack     { background: #E8F5E9; color: #2E7D32; }
 .record-meta { display: flex; align-items: center; gap: 12rpx; }
-.record-time { font-size: 24rpx; color: #999; }
+.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-body { margin-bottom: 8rpx; }
-.record-foods { font-size: calc(26rpx * var(--font-scale, 1)); color: #333; line-height: 1.5; }
+.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: #FF8C42; font-weight: 600; }
-.record-nut { font-size: 22rpx; color: #999; }
+.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; }
 
 /* 空态 */
 .empty-state { text-align: center; padding: 80rpx 40rpx; }
 .empty-icon { font-size: 80rpx; display: block; margin-bottom: 20rpx; }
-.empty-text { font-size: 28rpx; color: #333; font-weight: 500; display: block; margin-bottom: 8rpx; }
-.empty-hint { font-size: 24rpx; color: #999; display: block; }
+.empty-text { font-size: 28rpx; color: $facade-text-strong; font-weight: 500; display: block; margin-bottom: 8rpx; }
+.empty-hint { font-size: 24rpx; color: $facade-text-muted; display: block; }
 .loading-state { text-align: center; padding: 80rpx 0; }
-.loading-text { font-size: 26rpx; color: #999; }
+.loading-text { font-size: 26rpx; color: $facade-text-muted; }
 .bottom-spacer { height: 40rpx; }
 
 /* 浮动按钮 */
 .fab {
   position: fixed; right: 40rpx; bottom: 60rpx; width: 100rpx; height: 100rpx;
-  background: linear-gradient(135deg, #FF8C42, #FFB366); border-radius: 50%;
+  background: linear-gradient(135deg, $dim-body, #FFB366); border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
   box-shadow: 0 4rpx 20rpx rgba(255,140,66,0.4);
 }
-.fab-icon { font-size: 48rpx; color: #fff; font-weight: 300; }
+.fab-icon { font-size: 48rpx; color: $app-surface; font-weight: 300; }
 </style>

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

@@ -826,10 +826,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $facade-fill-2;
 }
 .loading-wrap,
 .empty-wrap {
@@ -840,7 +840,7 @@ export default {
 .loading-text,
 .empty-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .content {
   height: calc(100vh - 120rpx);
@@ -849,14 +849,14 @@ export default {
 .cover-swiper {
   width: 100%;
   height: 750rpx;
-  background: #f0f0f0;
+  background: $facade-fill;
 }
 .swiper-image {
   width: 100%;
   height: 750rpx;
 }
 .info-section {
-  background: #fff;
+  background: $app-surface;
   padding: 30rpx;
   margin-bottom: 20rpx;
 }
@@ -866,7 +866,7 @@ export default {
 .product-name {
   font-size: calc(34rpx * var(--font-scale, 1));
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.4;
 }
 .price-row {
@@ -881,14 +881,14 @@ export default {
 }
 .price {
   font-size: 40rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: bold;
 }
 .member-tag {
   display: inline-block;
   font-size: 22rpx;
-  color: #F97316;
-  background: #FFF7ED;
+  color: $brand-primary;
+  background: $uni-primary-pale;
   border: 1rpx solid #FED7AA;
   padding: 2rpx 10rpx;
   border-radius: 6rpx;
@@ -902,18 +902,18 @@ export default {
 }
 .original-label {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .original-text {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   text-decoration: line-through;
 }
 .member-hint {
   margin-top: 10rpx;
   font-size: 24rpx;
-  color: #F97316;
-  background: #FFF7ED;
+  color: $brand-primary;
+  background: $uni-primary-pale;
   padding: 6rpx 16rpx;
   border-radius: 8rpx;
   align-self: flex-start;
@@ -935,8 +935,8 @@ export default {
 }
 .meta-item {
   font-size: 22rpx;
-  color: #999;
-  background: #f5f5f5;
+  color: $facade-text-muted;
+  background: $facade-fill-2;
   padding: 4rpx 16rpx;
   border-radius: 4rpx;
   margin-right: 12rpx;
@@ -948,58 +948,58 @@ export default {
 }
 .vendor-label {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .vendor-name {
   font-size: calc(24rpx * var(--font-scale, 1));
-  color: #666;
+  color: $facade-text-body;
 }
 .desc-section,
 .intro-section {
-  background: #fff;
+  background: $app-surface;
   padding: 30rpx;
   margin-bottom: 20rpx;
 }
 .section-title {
   font-size: calc(28rpx * var(--font-scale, 1));
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 16rpx;
   display: block;
 }
 .desc-text,
 .intro-text {
   font-size: calc(26rpx * var(--font-scale, 1));
-  color: #666;
+  color: $facade-text-body;
   line-height: 1.6;
   display: block;
 }
 /* 套餐包含 */
-.bundle-section { background: #fff; margin: 20rpx; border-radius: 16rpx; padding: 24rpx; }
-.bundle-item { display: flex; align-items: center; padding: 12rpx 0; border-bottom: 1rpx solid #f5f5f5; }
+.bundle-section { background: $app-surface; margin: 20rpx; border-radius: 16rpx; padding: 24rpx; }
+.bundle-item { display: flex; align-items: center; padding: 12rpx 0; border-bottom: 1rpx solid $facade-fill-2; }
 .bundle-item:last-child { border-bottom: none; }
 .bundle-item-img { width: 80rpx; height: 80rpx; border-radius: 12rpx; margin-right: 16rpx; flex-shrink: 0; background: #f7f7f7; }
 .bundle-item-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-.bundle-item-name { font-size: calc(28rpx * var(--font-scale, 1)); color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.bundle-item-spec { font-size: calc(24rpx * var(--font-scale, 1)); color: #999; margin-top: 4rpx; }
-.bundle-item-qty { font-size: 30rpx; font-weight: bold; color: #F97316; margin-left: 16rpx; flex-shrink: 0; }
+.bundle-item-name { font-size: calc(28rpx * var(--font-scale, 1)); color: $facade-text-strong; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.bundle-item-spec { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-muted; margin-top: 4rpx; }
+.bundle-item-qty { font-size: 30rpx; font-weight: bold; color: $brand-primary; margin-left: 16rpx; flex-shrink: 0; }
 /* 关联区块（相关文章 + 相关商品，商城样式） */
 .related-section { margin: 20rpx; }
 .related-header { display: flex; align-items: baseline; margin-bottom: 16rpx; padding: 0 4rpx; }
-.related-title { font-size: 30rpx; font-weight: bold; color: #333; }
-.related-subtitle { font-size: 20rpx; color: #999; margin-left: 12rpx; }
-.related-loading-hint { text-align: center; font-size: 22rpx; color: #F97316; padding: 16rpx 0 8rpx; }
-.related-loading-hint.dim { color: #bbb; }
-.ra-list { display: flex; flex-direction: column; gap: 16rpx; background: #fff; border-radius: 16rpx; padding: 8rpx 24rpx 24rpx; }
-.ra-item { display: flex; align-items: center; background: #fafafa; border-radius: 12rpx; padding: 16rpx; margin-top: 16rpx; }
+.related-title { font-size: 30rpx; font-weight: bold; color: $facade-text-strong; }
+.related-subtitle { font-size: 20rpx; color: $facade-text-muted; margin-left: 12rpx; }
+.related-loading-hint { text-align: center; font-size: 22rpx; color: $brand-primary; padding: 16rpx 0 8rpx; }
+.related-loading-hint.dim { color: $facade-text-ghost-light; }
+.ra-list { display: flex; flex-direction: column; gap: 16rpx; background: $app-surface; border-radius: 16rpx; padding: 8rpx 24rpx 24rpx; }
+.ra-item { display: flex; align-items: center; background: $facade-fill-ghost; border-radius: 12rpx; padding: 16rpx; margin-top: 16rpx; }
 .ra-item-pressed { opacity: 0.7; }
-.ra-cover { width: 140rpx; height: 100rpx; border-radius: 8rpx; background: #eee; flex-shrink: 0; }
+.ra-cover { width: 140rpx; height: 100rpx; border-radius: 8rpx; background: $facade-hairline-2; flex-shrink: 0; }
 .ra-body { margin-left: 20rpx; flex: 1; min-width: 0; }
-.ra-title { display: block; font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: #333; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ra-summary { display: block; margin-top: 8rpx; font-size: 22rpx; color: #999; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ra-title { display: block; font-size: calc(28rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ra-summary { display: block; margin-top: 8rpx; font-size: 22rpx; color: $facade-text-muted; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* SKU 选择器 */
 .sku-section {
-  background: #fff;
+  background: $app-surface;
   padding: 20rpx 30rpx;
   margin-bottom: 20rpx;
 }
@@ -1011,7 +1011,7 @@ export default {
 }
 .spec-group-name {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   margin-bottom: 12rpx;
   display: block;
 }
@@ -1021,36 +1021,36 @@ export default {
 }
 .spec-option {
   padding: 12rpx 28rpx;
-  border: 2rpx solid #ddd;
+  border: 2rpx solid $facade-border-soft;
   border-radius: 8rpx;
   margin-right: 16rpx;
   margin-bottom: 12rpx;
-  background: #fff;
+  background: $app-surface;
 }
 .spec-option-selected {
-  border-color: #F97316;
-  background: #F97316;
+  border-color: $brand-primary;
+  background: $brand-primary;
 }
 .spec-option-selected .spec-option-text {
-  color: #fff;
+  color: $app-surface;
 }
 .spec-option-disabled {
-  border-color: #eee;
+  border-color: $facade-hairline-2;
   background: #f9f9f9;
   opacity: 0.5;
 }
 .spec-option-text {
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .selected-summary {
   margin-top: 10rpx;
   padding-top: 14rpx;
-  border-top: 1rpx solid #f0f0f0;
+  border-top: 1rpx solid $facade-fill;
 }
 .selected-text {
   font-size: 24rpx;
-  color: #F97316;
+  color: $brand-primary;
 }
 .linked-link {
   display: inline-block;
@@ -1074,13 +1074,13 @@ export default {
 }
 .cf-hint-text {
   font-size: 24rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: 500;
 }
 
 /* 积分兑换优惠券 */
 .coupon-exchange-section {
-  background: #fff;
+  background: $app-surface;
   padding: 30rpx;
   margin-bottom: 20rpx;
 }
@@ -1088,7 +1088,7 @@ export default {
   display: flex;
   align-items: center;
   padding: 20rpx 0;
-  border-bottom: 1rpx solid #f5f5f5;
+  border-bottom: 1rpx solid $facade-fill-2;
 }
 .coupon-item:last-child {
   border-bottom: none;
@@ -1099,25 +1099,25 @@ export default {
 }
 .coupon-name {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: bold;
   display: block;
 }
 .coupon-desc {
   font-size: 24rpx;
-  color: #F97316;
+  color: $brand-primary;
   margin-top: 6rpx;
   display: block;
 }
 .coupon-price {
   font-size: 26rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: bold;
   margin-right: 24rpx;
 }
 .coupon-exchange-btn {
-  background: linear-gradient(135deg, #F97316, #FB923C);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
+  color: $app-surface;
   font-size: 26rpx;
   padding: 0 32rpx;
   height: 64rpx;
@@ -1139,8 +1139,8 @@ export default {
   left: 0;
   right: 0;
   height: 100rpx;
-  background: #fff;
-  border-top: 1rpx solid #eee;
+  background: $app-surface;
+  border-top: 1rpx solid $facade-hairline-2;
   display: flex;
   align-items: center;
   padding: 0 30rpx;
@@ -1161,18 +1161,18 @@ export default {
 }
 .bottom-price {
   font-size: 36rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: bold;
 }
 .bottom-member {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-left: 10rpx;
 }
 
 .btn-buy {
-  background: linear-gradient(135deg, #F97316, #FB923C);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
+  color: $app-surface;
   font-size: 28rpx;
   font-weight: bold;
   padding: 0 60rpx;
@@ -1195,9 +1195,9 @@ export default {
   padding: 0 8rpx;
 }
 .btn-cart {
-  background: #fff;
-  color: #F97316;
-  border: 2rpx solid #F97316;
+  background: $app-surface;
+  color: $brand-primary;
+  border: 2rpx solid $brand-primary;
   font-size: 28rpx;
   padding: 0 24rpx;
   height: 72rpx;
@@ -1208,8 +1208,8 @@ export default {
   border: none;
 }
 .btn-share {
-  background: #fff;
-  border: 2rpx solid #F97316;
+  background: $app-surface;
+  border: 2rpx solid $brand-primary;
   font-size: 24rpx;
   padding: 0 24rpx;
   height: 64rpx;
@@ -1218,7 +1218,7 @@ export default {
   margin-right: 16rpx;
   display: flex;
   align-items: center;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: 600;
   text-align: center;
 }
@@ -1227,15 +1227,15 @@ export default {
 
 /* 配送信息 */
 .delivery-info-section {
-  background: #fff;
+  background: $app-surface;
   margin: 20rpx;
   border-radius: 16rpx;
   padding: 24rpx;
 }
 .delivery-method-tag {
   display: inline-block;
-  background: linear-gradient(135deg, #F97316, #FB923C);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
+  color: $app-surface;
   font-size: 24rpx;
   padding: 6rpx 20rpx;
   border-radius: 20rpx;
@@ -1253,7 +1253,7 @@ export default {
 }
 .hint-text {
   font-size: calc(24rpx * var(--font-scale, 1));
-  color: #666;
+  color: $facade-text-body;
   line-height: 1.6;
   flex: 1;
 }
@@ -1263,7 +1263,7 @@ export default {
 
 /* 赠品选择 */
 .gift-select-section {
-  background: #fff;
+  background: $app-surface;
   margin: 20rpx;
   border-radius: 16rpx;
   padding: 24rpx;
@@ -1271,7 +1271,7 @@ export default {
 .gift-select-title {
   font-size: calc(28rpx * var(--font-scale, 1));
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 16rpx;
   display: block;
 }
@@ -1283,14 +1283,14 @@ export default {
   display: flex;
   align-items: center;
   padding: 16rpx;
-  border: 2rpx solid #eee;
+  border: 2rpx solid $facade-hairline-2;
   border-radius: 12rpx;
   margin-bottom: 12rpx;
-  background: #fff;
+  background: $app-surface;
 }
 .gift-select-item-active {
-  border-color: #F97316;
-  background: #FFF7ED;
+  border-color: $brand-primary;
+  background: $uni-primary-pale;
 }
 .gift-select-img {
   width: 80rpx;
@@ -1319,18 +1319,18 @@ export default {
 }
 .gift-select-name {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .gift-select-type {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 4rpx;
 }
 .gift-select-check {
-  color: #F97316;
+  color: $brand-primary;
   font-size: 32rpx;
   font-weight: bold;
   margin-left: 16rpx;

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

@@ -465,7 +465,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .feed-page {
   min-height: 100vh;
   background: #F5F7FA;
@@ -476,11 +476,11 @@ export default {
   justify-content: space-between;
   height: 88rpx;
   padding-top: env(safe-area-inset-top);
-  background: #FFFFFF;
+  background: $app-surface;
   position: sticky;
   top: 0;
   z-index: 100;
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid $facade-fill;
 }
 .nav-back {
   width: 80rpx;
@@ -490,12 +490,12 @@ export default {
 }
 .nav-back-icon {
   font-size: 48rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .nav-title {
   font-size: calc(32rpx * var(--font-scale, 1));
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .nav-placeholder { width: 80rpx; }
 
@@ -503,7 +503,7 @@ export default {
 .circle-header-card {
   display: flex;
   align-items: center;
-  background: #FFFFFF;
+  background: $app-surface;
   padding: 24rpx 32rpx;
   margin-bottom: 16rpx;
 }
@@ -511,8 +511,8 @@ export default {
   width: 72rpx;
   height: 72rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #FF8C42, #FFB366);
-  color: #fff;
+  background: linear-gradient(135deg, $dim-body, #FFB366);
+  color: $app-surface;
   font-size: calc(32rpx * var(--font-scale, 1));
   font-weight: 700;
   display: flex;
@@ -525,27 +525,27 @@ export default {
 .ch-name {
   font-size: calc(30rpx * var(--font-scale, 1));
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
 }
 .ch-meta {
   font-size: calc(22rpx * var(--font-scale, 1));
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 4rpx;
   display: block;
 }
-.ch-arrow { font-size: 36rpx; color: #ccc; }
+.ch-arrow { font-size: 36rpx; color: $facade-text-ghost; }
 
 /* 发布框 */
 .post-input-card {
   display: flex;
   align-items: center;
-  background: #FFFFFF;
+  background: $app-surface;
   padding: 24rpx 32rpx;
   margin-bottom: 16rpx;
 }
 .pi-icon { font-size: 40rpx; margin-right: 20rpx; }
-.pi-placeholder { font-size: calc(28rpx * var(--font-scale, 1)); color: #bbb; }
+.pi-placeholder { font-size: calc(28rpx * var(--font-scale, 1)); color: $facade-text-ghost-light; }
 
 /* 滚动区域 */
 .feed-scroll {
@@ -554,7 +554,7 @@ export default {
 
 /* 动态项 */
 .feed-item {
-  background: #FFFFFF;
+  background: $app-surface;
   margin-bottom: 16rpx;
   padding: 24rpx 32rpx;
 }
@@ -578,19 +578,19 @@ export default {
   flex-shrink: 0;
 }
 .fa-info { flex: 1; display: flex; flex-direction: column; }
-.fa-name { font-size: calc(26rpx * var(--font-scale, 1)); font-weight: 600; color: #333; }
-.fa-time { font-size: calc(20rpx * var(--font-scale, 1)); color: #999; margin-top: 2rpx; }
+.fa-name { font-size: calc(26rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; }
+.fa-time { font-size: calc(20rpx * var(--font-scale, 1)); color: $facade-text-muted; margin-top: 2rpx; }
 .fa-type-badge {
   font-size: 20rpx;
   padding: 4rpx 12rpx;
   border-radius: 12rpx;
   background: #FFF0E0;
-  color: #FF8C42;
+  color: $dim-body;
 }
 
 /* 内容 */
 .feed-content { margin-bottom: 16rpx; }
-.fc-text { font-size: calc(28rpx * var(--font-scale, 1)); color: #333; line-height: 1.7; }
+.fc-text { font-size: calc(28rpx * var(--font-scale, 1)); color: $facade-text-strong; line-height: 1.7; }
 .feed-images { display: flex; flex-wrap: wrap; margin-bottom: 16rpx; }
 .feed-img {
   width: 220rpx;
@@ -603,7 +603,7 @@ export default {
 /* 操作栏 */
 .feed-actions {
   display: flex;
-  border-top: 1rpx solid #f5f5f5;
+  border-top: 1rpx solid $facade-fill-2;
   padding-top: 16rpx;
 }
 .fa-item {
@@ -612,13 +612,13 @@ export default {
   margin-right: 40rpx;
 }
 .fa-icon { font-size: 32rpx; margin-right: 6rpx; }
-.fa-count { font-size: 22rpx; color: #999; }
+.fa-count { font-size: 22rpx; color: $facade-text-muted; }
 .fa-active .fa-icon { transform: scale(1.1); }
 .fa-delete { margin-left: auto; margin-right: 0; }
 .fa-delete .fa-icon { font-size: 28rpx; }
 
 /* 评论 */
-.feed-comments { margin-top: 16rpx; padding-top: 16rpx; border-top: 1rpx solid #f5f5f5; }
+.feed-comments { margin-top: 16rpx; padding-top: 16rpx; border-top: 1rpx solid $facade-fill-2; }
 .comment-item { display: flex; align-items: flex-start; margin-bottom: 12rpx; }
 .c-avatar {
   width: 40rpx;
@@ -628,32 +628,32 @@ export default {
   margin-right: 10rpx;
   flex-shrink: 0;
 }
-.c-name { font-size: calc(24rpx * var(--font-scale, 1)); color: #FF8C42; font-weight: 600; margin-right: 8rpx; flex-shrink: 0; }
-.c-text { font-size: calc(24rpx * var(--font-scale, 1)); color: #666; flex: 1; line-height: 1.5; }
-.more-comments { font-size: calc(22rpx * var(--font-scale, 1)); color: #999; margin-top: 8rpx; display: block; padding: 8rpx 0; }
+.c-name { font-size: calc(24rpx * var(--font-scale, 1)); color: $dim-body; font-weight: 600; margin-right: 8rpx; flex-shrink: 0; }
+.c-text { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-body; flex: 1; line-height: 1.5; }
+.more-comments { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-muted; margin-top: 8rpx; display: block; padding: 8rpx 0; }
 .comment-input-area {
   display: flex;
   align-items: center;
   margin-top: 12rpx;
   padding-top: 12rpx;
-  border-top: 1rpx solid #f5f5f5;
+  border-top: 1rpx solid $facade-fill-2;
 }
 .ci-input {
   flex: 1;
-  background: #F5F5F5;
+  background: $facade-fill-2;
   border-radius: 30rpx;
   padding: 12rpx 20rpx;
   font-size: calc(26rpx * var(--font-scale, 1));
   margin-right: 16rpx;
 }
-.ci-send { font-size: calc(26rpx * var(--font-scale, 1)); color: #FF8C42; font-weight: 600; }
+.ci-send { font-size: calc(26rpx * var(--font-scale, 1)); color: $dim-body; font-weight: 600; }
 
 /* 加载状态 */
 .loading-more, .end-hint { text-align: center; padding: 24rpx 0; }
-.lm-text, .eh-text { font-size: calc(24rpx * var(--font-scale, 1)); color: #ccc; }
+.lm-text, .eh-text { font-size: calc(24rpx * var(--font-scale, 1)); color: $facade-text-ghost; }
 .empty-state { text-align: center; padding: 120rpx 0; }
 .empty-icon { font-size: 80rpx; display: block; margin-bottom: 16rpx; }
-.empty-text { font-size: calc(26rpx * var(--font-scale, 1)); color: #ccc; }
+.empty-text { font-size: calc(26rpx * var(--font-scale, 1)); color: $facade-text-ghost; }
 .bottom-space { height: 40rpx; }
 
 /* 弹窗 */
@@ -669,7 +669,7 @@ export default {
 .modal-content {
   width: 100%;
   max-height: 80vh;
-  background: #FFFFFF;
+  background: $app-surface;
   border-radius: 32rpx 32rpx 0 0;
   padding: 32rpx;
   overflow-y: auto;
@@ -680,8 +680,8 @@ export default {
   align-items: center;
   margin-bottom: 24rpx;
 }
-.modal-title { font-size: calc(32rpx * var(--font-scale, 1)); font-weight: 600; color: #333; }
-.modal-close { font-size: 32rpx; color: #999; }
+.modal-title { font-size: calc(32rpx * var(--font-scale, 1)); font-weight: 600; color: $facade-text-strong; }
+.modal-close { font-size: 32rpx; color: $facade-text-muted; }
 .type-selector {
   display: flex;
   flex-wrap: wrap;
@@ -694,13 +694,13 @@ export default {
   padding: 16rpx 24rpx;
   margin-right: 16rpx;
   margin-bottom: 16rpx;
-  background: #F5F5F5;
+  background: $facade-fill-2;
   border-radius: 16rpx;
   border: 2rpx solid transparent;
 }
-.type-active { border-color: #FF8C42; background: #FFF0E0; }
+.type-active { border-color: $dim-body; background: #FFF0E0; }
 .to-icon { font-size: 36rpx; margin-bottom: 6rpx; }
-.to-label { font-size: calc(22rpx * var(--font-scale, 1)); color: #666; }
+.to-label { font-size: calc(22rpx * var(--font-scale, 1)); color: $facade-text-body; }
 .post-textarea {
   width: 100%;
   height: 200rpx;
@@ -713,8 +713,8 @@ export default {
 }
 .modal-footer { margin-top: 20rpx; }
 .btn-publish {
-  background: linear-gradient(135deg, #FF8C42, #FFB366);
-  color: #fff;
+  background: linear-gradient(135deg, $dim-body, #FFB366);
+  color: $app-surface;
   border: none;
   border-radius: 40rpx;
   font-size: 30rpx;
@@ -730,7 +730,7 @@ export default {
   display: flex;
   align-items: center;
   padding: 20rpx 0;
-  border-bottom: 1rpx solid #f5f5f5;
+  border-bottom: 1rpx solid $facade-fill-2;
 }
 .mi-avatar {
   width: 56rpx;
@@ -745,6 +745,6 @@ export default {
   justify-content: center;
   margin-right: 16rpx;
 }
-.mi-name { font-size: calc(26rpx * var(--font-scale, 1)); color: #333; flex: 1; }
-.mi-role { font-size: calc(20rpx * var(--font-scale, 1)); color: #FF8C42; background: #FFF0E0; padding: 4rpx 12rpx; border-radius: 12rpx; }
+.mi-name { font-size: calc(26rpx * var(--font-scale, 1)); color: $facade-text-strong; flex: 1; }
+.mi-role { font-size: calc(20rpx * var(--font-scale, 1)); color: $dim-body; background: #FFF0E0; padding: 4rpx 12rpx; border-radius: 12rpx; }
 </style>

cfc-frontend/pages/discover/circles.vue

@@ -347,15 +347,15 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .circles-container {
   min-height: 100vh;
-  background: #FFF7ED;
+  background: $uni-primary-pale;
 }
 /* 自定义导航栏 */
 .custom-nav {
   padding-top: var(--status-bar-height);
-  background: #fff;
+  background: $app-surface;
 }
 .nav-header {
   display: flex;
@@ -368,7 +368,7 @@ export default {
 }
 .nav-back-icon {
   font-size: 48rpx;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1;
 }
 .nav-placeholder {
@@ -384,7 +384,7 @@ export default {
 }
 .loading-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 /* 列表 */
 .circle-list {
@@ -402,7 +402,7 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .circle-grid {
   display: flex;
@@ -428,7 +428,7 @@ export default {
   width: 88rpx;
   height: 88rpx;
   margin-left: 12rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
   flex-shrink: 0;
@@ -459,7 +459,7 @@ export default {
 }
 .edit-content {
   width: 620rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 32rpx;
 }
@@ -472,11 +472,11 @@ export default {
 .modal-title {
   font-size: 32rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .modal-close {
   font-size: 36rpx;
-  color: #999;
+  color: $facade-text-muted;
   padding: 0 8rpx;
 }
 .form-item {
@@ -485,7 +485,7 @@ export default {
 .form-label {
   display: block;
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   margin-bottom: 12rpx;
 }
 .form-input {
@@ -524,7 +524,7 @@ export default {
 }
 .cond-opt-text {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .cond-active {
   background: #FFF3E0;
@@ -542,7 +542,7 @@ export default {
   height: 80rpx;
   line-height: 80rpx;
   background: #FF9800;
-  color: #fff;
+  color: $app-surface;
   font-size: 30rpx;
   border-radius: 40rpx;
   text-align: center;
@@ -552,7 +552,7 @@ export default {
 }
 /* 待审核成员卡片 */
 .pending-list {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 8rpx 20rpx;
 }
@@ -560,7 +560,7 @@ export default {
   display: flex;
   align-items: center;
   padding: 20rpx 0;
-  border-bottom: 1rpx solid #f5f5f5;
+  border-bottom: 1rpx solid $facade-fill-2;
 }
 .pending-item:last-child {
   border-bottom: none;
@@ -570,7 +570,7 @@ export default {
   height: 72rpx;
   border-radius: 50%;
   flex-shrink: 0;
-  background: #f0f0f0;
+  background: $facade-fill;
 }
 .pending-info {
   flex: 1;
@@ -585,7 +585,7 @@ export default {
 .pending-name-text {
   font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   max-width: 200rpx;
   overflow: hidden;
   white-space: nowrap;
@@ -593,7 +593,7 @@ export default {
 }
 .pending-circle {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-left: 12rpx;
   overflow: hidden;
   white-space: nowrap;
@@ -602,7 +602,7 @@ export default {
 .pending-time {
   display: block;
   font-size: 22rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
   margin-top: 6rpx;
 }
 .pending-actions {
@@ -619,16 +619,16 @@ export default {
 }
 .approve-btn-text {
   font-size: 24rpx;
-  color: #fff;
+  color: $app-surface;
 }
 .reject-btn {
-  background: #f5f5f5;
+  background: $facade-fill-2;
   border-radius: 30rpx;
   padding: 10rpx 26rpx;
 }
 .reject-btn-text {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 /* 空状态 */
 .empty-state {
@@ -637,6 +637,6 @@ export default {
 }
 .empty-text {
   font-size: 26rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
 }
 </style>

cfc-frontend/pages/discover/components/CircleCard.vue

@@ -80,12 +80,12 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .circle-card {
   display: flex;
   flex-direction: row;
   align-items: center;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 20rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -120,19 +120,19 @@ export default {
 .circle-name {
   font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .circle-source {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .circle-card-right {
   margin-left: 12rpx;
 }
 .circle-count {
   font-size: 22rpx;
-  color: #F97316;
-  background: #FFF7ED;
+  color: $brand-primary;
+  background: $uni-primary-pale;
   padding: 4rpx 12rpx;
   border-radius: 20rpx;
 }

cfc-frontend/pages/discover/components/CircleDetail.vue

@@ -98,7 +98,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .circle-overlay {
   position: fixed;
   top: 0;
@@ -114,7 +114,7 @@ export default {
 .circle-modal {
   width: 600rpx;
   max-height: 80vh;
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   display: flex;
   flex-direction: column;
@@ -125,13 +125,13 @@ export default {
   flex-direction: column;
   align-items: center;
   padding: 40rpx 30rpx 20rpx;
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid $facade-fill;
 }
 .circle-modal-icon-wrap {
   width: 88rpx;
   height: 88rpx;
   border-radius: 50%;
-  background: #FFF7ED;
+  background: $uni-primary-pale;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -143,12 +143,12 @@ export default {
 .circle-modal-name {
   font-size: 34rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 8rpx;
 }
 .circle-modal-source {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .circle-modal-body {
   flex: 1;
@@ -161,7 +161,7 @@ export default {
 .circle-modal-section-title {
   font-size: 26rpx;
   font-weight: 600;
-  color: #666;
+  color: $facade-text-body;
   margin-bottom: 12rpx;
   display: block;
 }
@@ -170,11 +170,11 @@ export default {
 }
 .circle-modal-members-placeholder {
   font-size: 24rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
 }
 .circle-modal-footer {
   padding: 20rpx 30rpx 30rpx;
-  border-top: 1rpx solid #f0f0f0;
+  border-top: 1rpx solid $facade-fill;
 }
 .circle-btn {
   width: 100%;
@@ -192,16 +192,16 @@ export default {
   opacity: 0.8;
 }
 .circle-btn-join {
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
 }
 .circle-btn-leave {
-  background: #fff;
+  background: $app-surface;
   color: #FF4444;
   border: 2rpx solid #FF4444;
 }
 .circle-btn-close {
-  background: #f5f5f5;
-  color: #999;
+  background: $facade-fill-2;
+  color: $facade-text-muted;
 }
 </style>

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

@@ -126,60 +126,60 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .create-circle-page { min-height: 100vh; background: #F5F7FA; padding-bottom: 160rpx; }
 .nav-bar {
   display: flex; align-items: center; justify-content: space-between;
   height: 88rpx; padding-top: env(safe-area-inset-top);
-  background: #fff; position: sticky; top: 0; z-index: 100;
-  border-bottom: 1rpx solid #f0f0f0;
+  background: $app-surface; position: sticky; top: 0; z-index: 100;
+  border-bottom: 1rpx solid $facade-fill;
 }
 .nav-back { width: 80rpx; padding-left: 24rpx; }
-.nav-back-icon { font-size: 48rpx; color: #333; }
-.nav-title { font-size: 32rpx; font-weight: 600; color: #333; }
+.nav-back-icon { font-size: 48rpx; color: $facade-text-strong; }
+.nav-title { font-size: 32rpx; font-weight: 600; color: $facade-text-strong; }
 .nav-placeholder { width: 80rpx; }
 .content { padding: 24rpx 32rpx; }
-.form-card { background: #fff; border-radius: 20rpx; padding: 24rpx; }
-.form-item { padding: 24rpx 0; border-bottom: 1rpx solid #f5f5f5; }
+.form-card { background: $app-surface; border-radius: 20rpx; padding: 24rpx; }
+.form-item { padding: 24rpx 0; border-bottom: 1rpx solid $facade-fill-2; }
 .form-item:last-child { border-bottom: none; }
-.form-label { font-size: 28rpx; font-weight: 600; color: #333; display: block; margin-bottom: 16rpx; }
+.form-label { font-size: 28rpx; font-weight: 600; color: $facade-text-strong; display: block; margin-bottom: 16rpx; }
 .required { color: #F44336; }
 .form-input {
-  width: 100%; height: 72rpx; background: #F5F5F5; border-radius: 12rpx;
+  width: 100%; height: 72rpx; background: $facade-fill-2; border-radius: 12rpx;
   padding: 0 20rpx; font-size: 28rpx; box-sizing: border-box;
 }
 .form-textarea {
-  width: 100%; height: 160rpx; background: #F5F5F5; border-radius: 12rpx;
+  width: 100%; height: 160rpx; background: $facade-fill-2; border-radius: 12rpx;
   padding: 16rpx 20rpx; font-size: 26rpx; line-height: 1.6; box-sizing: border-box;
 }
 .type-grid { display: flex; flex-wrap: wrap; }
 .type-opt {
   display: flex; flex-direction: column; align-items: center;
   padding: 20rpx 28rpx; margin-right: 16rpx; margin-bottom: 16rpx;
-  background: #F5F5F5; border-radius: 16rpx; border: 2rpx solid transparent;
+  background: $facade-fill-2; border-radius: 16rpx; border: 2rpx solid transparent;
 }
-.type-active { border-color: #FF8C42; background: #FFF0E0; }
+.type-active { border-color: $dim-body; background: #FFF0E0; }
 .to-icon { font-size: 40rpx; margin-bottom: 8rpx; }
-.to-label { font-size: 24rpx; color: #666; }
+.to-label { font-size: 24rpx; color: $facade-text-body; }
 .join-options { display: flex; flex-direction: column; }
 .join-opt {
   display: flex; align-items: center; padding: 20rpx;
-  background: #FAFAFA; border-radius: 12rpx; border: 2rpx solid transparent;
+  background: $facade-fill-ghost; border-radius: 12rpx; border: 2rpx solid transparent;
 }
-.join-active { border-color: #FF8C42; background: #FFF8F0; }
+.join-active { border-color: $dim-body; background: #FFF8F0; }
 .jo-icon { font-size: 36rpx; margin-right: 16rpx; }
-.jo-label { font-size: 26rpx; font-weight: 600; color: #333; margin-right: 16rpx; }
-.jo-desc { font-size: 22rpx; color: #999; }
+.jo-label { font-size: 26rpx; font-weight: 600; color: $facade-text-strong; margin-right: 16rpx; }
+.jo-desc { font-size: 22rpx; color: $facade-text-muted; }
 .switch-row { display: flex; align-items: center; justify-content: space-between; }
-.switch-desc { font-size: 22rpx; color: #999; margin-top: 8rpx; display: block; }
+.switch-desc { font-size: 22rpx; color: $facade-text-muted; margin-top: 8rpx; display: block; }
 .fixed-bottom {
   position: fixed; bottom: 0; left: 0; right: 0;
   padding: 20rpx 32rpx; padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-  background: #fff; border-top: 1rpx solid #f0f0f0;
+  background: $app-surface; border-top: 1rpx solid $facade-fill;
 }
 .btn-create {
-  background: linear-gradient(135deg, #FF8C42, #FFB366);
-  color: #fff; border: none; border-radius: 40rpx;
+  background: linear-gradient(135deg, $dim-body, #FFB366);
+  color: $app-surface; border: none; border-radius: 40rpx;
   font-size: 30rpx; font-weight: 600; padding: 24rpx 0;
 }
 .btn-create[disabled] { opacity: 0.4; }

cfc-frontend/pages/discover/index.vue

@@ -264,7 +264,7 @@ export default {
 .section-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .section-more {
   font-size: 24rpx;
@@ -278,14 +278,14 @@ export default {
   display: inline-block;
   padding: 8rpx 24rpx;
   font-size: 24rpx;
-  color: #666;
-  background: #f0f0f0;
+  color: $facade-text-body;
+  background: $facade-fill;
   border-radius: 30rpx;
   margin-right: 16rpx;
 }
 .filter-chip.active {
   background: $brand-primary;
-  color: #fff;
+  color: $app-surface;
 }
 .loading-state,
 .empty-state {
@@ -296,7 +296,7 @@ export default {
 .loading-text,
 .empty-text {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .product-grid {
   display: flex;
@@ -305,7 +305,7 @@ export default {
 }
 .product-card {
   width: 48%;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   overflow: hidden;
   margin-bottom: 20rpx;
@@ -314,7 +314,7 @@ export default {
 .product-cover {
   width: 100%;
   height: 200rpx;
-  background: #f0f0f0;
+  background: $facade-fill;
 }
 .product-info {
   padding: 14rpx;
@@ -322,7 +322,7 @@ export default {
 .product-name {
   display: block;
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 10rpx;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -340,7 +340,7 @@ export default {
 }
 .product-member {
   font-size: 20rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .recommend-scroll {
   display: flex;
@@ -352,7 +352,7 @@ export default {
   display: inline-flex;
   flex-direction: column;
   width: 260rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   overflow: hidden;
   margin-right: 20rpx;
@@ -361,7 +361,7 @@ export default {
 .card-banner {
   padding: 14rpx 20rpx;
   background: $brand-primary;
-  color: #fff;
+  color: $app-surface;
   font-size: 22rpx;
   font-weight: bold;
   text-align: center;
@@ -373,13 +373,13 @@ export default {
 .card-title {
   font-size: 24rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 6rpx;
 }
 .card-desc {
   font-size: 20rpx;
-  color: #999;
+  color: $facade-text-muted;
   display: block;
   margin-bottom: 10rpx;
 }
@@ -408,7 +408,7 @@ export default {
 .member-card-bg {
   display: flex;
   align-items: center;
-  background: linear-gradient(135deg, #F97316, #FB923C);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
   border-radius: 20rpx;
   padding: 24rpx 30rpx;
 }
@@ -424,7 +424,7 @@ export default {
 .member-card-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #fff;
+  color: $app-surface;
 }
 .member-card-desc {
   font-size: 22rpx;
@@ -437,8 +437,8 @@ export default {
 .member-card-btn {
   display: inline-block;
   padding: 8rpx 24rpx;
-  background: #fff;
-  color: #F97316;
+  background: $app-surface;
+  color: $brand-primary;
   font-size: 24rpx;
   font-weight: bold;
   border-radius: 30rpx;
@@ -455,7 +455,7 @@ export default {
 }
 .article-card {
   display: flex;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   overflow: hidden;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
@@ -481,7 +481,7 @@ export default {
 .article-title {
   font-size: 26rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -489,7 +489,7 @@ export default {
 }
 .article-desc {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   line-height: 1.3;
   margin-top: 6rpx;
   overflow: hidden;
@@ -498,7 +498,7 @@ export default {
 }
 .article-meta {
   font-size: 20rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
   margin-top: 6rpx;
 }
 
@@ -515,7 +515,7 @@ export default {
 .feature-item {
   width: calc(50% - 10rpx);
   box-sizing: border-box;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx;
   margin-bottom: 20rpx;
@@ -533,12 +533,12 @@ export default {
 .feature-title {
   font-size: 24rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 6rpx;
 }
 .feature-desc {
   font-size: 20rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 /* ===== 底部登录 ===== */
@@ -553,7 +553,7 @@ export default {
   height: 88rpx;
   line-height: 88rpx;
   background: linear-gradient(135deg, $brand-primary, $brand-primary-dark);
-  color: #fff;
+  color: $app-surface;
   font-size: 32rpx;
   font-weight: bold;
   border-radius: 44rpx;
@@ -565,7 +565,7 @@ export default {
 }
 .login-footer-text {
   font-size: 20rpx;
-  color: #bbb;
+  color: $facade-text-ghost-light;
   margin-top: 16rpx;
 }
 </style>

cfc-frontend/pages/energy/detail.vue

@@ -131,7 +131,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   min-height: 100vh;
   background: #0F1B2D;
@@ -171,7 +171,7 @@ export default {
 .dim-icon--metal { background: linear-gradient(135deg, #FFD700, #FF8F00); }
 .dim-icon--wood { background: linear-gradient(135deg, #4CAF50, #2E7D32); }
 .dim-icon { font-size: 44rpx; }
-.dim-name { font-size: 36rpx; font-weight: bold; color: #FFFFFF; }
+.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; }
 .dim-energy {
   display: flex;
@@ -179,7 +179,7 @@ export default {
   align-items: center;
   margin-top: 20rpx;
 }
-.dim-energy-value { font-size: 56rpx; font-weight: bold; color: #F97316; }
+.dim-energy-value { font-size: 56rpx; font-weight: bold; color: $brand-primary; }
 .dim-energy-label { font-size: 20rpx; color: rgba(143,197,232,0.4); }
 
 /* ---- 流水 ---- */

cfc-frontend/pages/energy/index.vue

@@ -416,7 +416,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container {
   min-height: 100vh;
   background: linear-gradient(180deg, #0F1B2D 0%, #1A2744 100%);
@@ -441,7 +441,7 @@ export default {
 }
 .nav-back-icon {
   font-size: 36rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: bold;
 }
 .nav-right {
@@ -461,7 +461,7 @@ export default {
 }
 .nav-right-label {
   font-size: 24rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: 500;
 }
 .nav-right-arrow {
@@ -470,7 +470,7 @@ export default {
 }
 .nav-current-member {
   font-size: 24rpx;
-  color: #fff;
+  color: $app-surface;
 }
 .nav-arrow {
   font-size: 20rpx;
@@ -493,14 +493,14 @@ export default {
   padding: 200rpx 40rpx;
 }
 .empty-icon { font-size: 100rpx; margin-bottom: 20rpx; }
-.empty-title { font-size: 32rpx; color: #fff; font-weight: 600; margin-bottom: 12rpx; }
+.empty-title { font-size: 32rpx; color: $app-surface; font-weight: 600; margin-bottom: 12rpx; }
 .empty-desc { font-size: 24rpx; color: rgba(255,255,255,0.5); text-align: center; margin-bottom: 40rpx; }
 .login-btn {
   width: 280rpx;
   height: 80rpx;
   line-height: 80rpx;
-  background: linear-gradient(135deg, #F97316, #FB923C);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
+  color: $app-surface;
   border-radius: 40rpx;
   font-size: 28rpx;
   border: none;
@@ -530,10 +530,10 @@ export default {
 }
 .avatar-text { font-size: 36rpx; }
 .overview-info { flex: 1; }
-.overview-name { font-size: 32rpx; font-weight: 600; color: #fff; display: block; }
+.overview-name { font-size: 32rpx; font-weight: 600; color: $app-surface; display: block; }
 .overview-role { font-size: 22rpx; color: rgba(255,255,255,0.5); margin-top: 4rpx; display: block; }
 .overview-score { text-align: right; }
-.score-value { font-size: 48rpx; font-weight: 700; color: #F97316; display: block; line-height: 1; }
+.score-value { font-size: 48rpx; font-weight: 700; color: $brand-primary; display: block; line-height: 1; }
 .score-label { font-size: 20rpx; color: rgba(255,255,255,0.4); }
 /* ===== 五维能量条 ===== */
 .dims-row {
@@ -573,7 +573,7 @@ export default {
   text-align: right;
   font-size: 26rpx;
   font-weight: 600;
-  color: #fff;
+  color: $app-surface;
   flex-shrink: 0;
 }
 .dim-bar-label {
@@ -596,7 +596,7 @@ export default {
 .section-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #fff;
+  color: $app-surface;
 }
 .section-hint {
   font-size: 22rpx;
@@ -636,9 +636,9 @@ export default {
   margin-right: 20rpx;
   flex-shrink: 0;
 }
-.compare-avatar-text { font-size: 28rpx; color: #fff; font-weight: 600; }
+.compare-avatar-text { font-size: 28rpx; color: $app-surface; font-weight: 600; }
 .compare-info { flex: 1; }
-.compare-name { font-size: 28rpx; color: #fff; font-weight: 500; display: block; }
+.compare-name { font-size: 28rpx; color: $app-surface; font-weight: 500; display: block; }
 .compare-role { font-size: 22rpx; color: rgba(255,255,255,0.4); margin-top: 4rpx; display: block; }
 .compare-score { text-align: right; }
 .compare-score-value { font-size: 36rpx; font-weight: 700; }
@@ -673,7 +673,7 @@ export default {
 }
 .quick-icon { font-size: 36rpx; }
 .quick-label { font-size: 22rpx; color: rgba(255,255,255,0.7); margin-bottom: 6rpx; }
-.quick-score { font-size: 28rpx; font-weight: 600; color: #fff; }
+.quick-score { font-size: 28rpx; font-weight: 600; color: $app-surface; }
 /* ===== 成员选择弹窗 ===== */
 .modal-mask {
   position: fixed;
@@ -697,7 +697,7 @@ export default {
   align-items: center;
   margin-bottom: 24rpx;
 }
-.picker-title { font-size: 30rpx; font-weight: 600; color: #fff; }
+.picker-title { font-size: 30rpx; font-weight: 600; color: $app-surface; }
 .picker-close { font-size: 40rpx; color: rgba(255,255,255,0.4); line-height: 1; }
 .picker-item {
   display: flex;
@@ -718,8 +718,8 @@ export default {
   margin-right: 20rpx;
   flex-shrink: 0;
 }
-.picker-avatar-text { font-size: 28rpx; color: #fff; font-weight: 600; }
-.picker-label { font-size: 28rpx; color: #fff; font-weight: 500; flex: 1; }
+.picker-avatar-text { font-size: 28rpx; color: $app-surface; font-weight: 600; }
+.picker-label { font-size: 28rpx; color: $app-surface; font-weight: 500; flex: 1; }
 .picker-desc { font-size: 22rpx; color: rgba(255,255,255,0.4); margin-top: 4rpx; display: block; }
 .bottom-spacer { height: 40rpx; }
 </style>

cfc-frontend/pages/family/add-member.vue

@@ -364,21 +364,21 @@ this.submitting = false
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .container { padding: 30rpx; }
-.form-container { background: #fff; border-radius: 20rpx; padding: 30rpx; }
-.page-title { font-size: 34rpx; font-weight: bold; color: #333; margin-bottom: 30rpx; }
+.form-container { background: $app-surface; border-radius: 20rpx; padding: 30rpx; }
+.page-title { font-size: 34rpx; font-weight: bold; color: $facade-text-strong; margin-bottom: 30rpx; }
 .form-item { margin-bottom: 30rpx; }
 .form-item.required .label { font-weight: bold; }
 .admin-row { display: flex; align-items: center; justify-content: space-between; }
-.admin-row-text { font-size: 30rpx; color: #333; }
-.label { display: block; font-size: 28rpx; color: #333; margin-bottom: 10rpx; }
-.required-mark { color: #F97316; margin-right: 4rpx; }
-.input { border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; font-size: 28rpx; }
-.picker { border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; font-size: 28rpx; color: #666; }
-.age-display { border: 1rpx solid #ddd; border-radius: 10rpx; padding: 20rpx; font-size: 28rpx; color: #999; background: #f9f9f9; }
-.hint { font-size: 24rpx; color: #999; margin-top: 8rpx; display: block; }
-.btn-primary { background: #F97316; color: #fff; border-radius: 20rpx; margin-top: 40rpx; }
+.admin-row-text { font-size: 30rpx; color: $facade-text-strong; }
+.label { display: block; font-size: 28rpx; color: $facade-text-strong; margin-bottom: 10rpx; }
+.required-mark { color: $brand-primary; margin-right: 4rpx; }
+.input { border: 1rpx solid $facade-border-soft; border-radius: 10rpx; padding: 20rpx; font-size: 28rpx; }
+.picker { border: 1rpx solid $facade-border-soft; border-radius: 10rpx; padding: 20rpx; font-size: 28rpx; color: $facade-text-body; }
+.age-display { border: 1rpx solid $facade-border-soft; border-radius: 10rpx; padding: 20rpx; font-size: 28rpx; color: $facade-text-muted; background: #f9f9f9; }
+.hint { font-size: 24rpx; color: $facade-text-muted; margin-top: 8rpx; display: block; }
+.btn-primary { background: $brand-primary; color: $app-surface; border-radius: 20rpx; margin-top: 40rpx; }
 
 /* 监护人同意弹窗 */
 .modal-overlay {
@@ -391,7 +391,7 @@ this.submitting = false
   z-index: 999;
 }
 .modal-content {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 40rpx;
   margin: 40rpx;
@@ -401,21 +401,21 @@ this.submitting = false
 .modal-title {
   font-size: 32rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   text-align: center;
   margin-bottom: 20rpx;
 }
 .modal-desc {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   display: block;
   line-height: 1.7;
   margin-bottom: 16rpx;
 }
 .modal-link {
   font-size: 24rpx;
-  color: #F97316;
+  color: $brand-primary;
   display: block;
   text-align: center;
   margin-bottom: 24rpx;
@@ -426,7 +426,7 @@ this.submitting = false
 }
 .checkbox-label {
   font-size: 24rpx;
-  color: #333;
+  color: $facade-text-strong;
   margin-left: 8rpx;
 }
 .modal-buttons {
@@ -435,8 +435,8 @@ this.submitting = false
 }
 .modal-btn-cancel {
   flex: 1;
-  background: #f5f5f5;
-  color: #666;
+  background: $facade-fill-2;
+  color: $facade-text-body;
   border-radius: 44rpx;
   font-size: 28rpx;
   padding: 20rpx;
@@ -444,14 +444,14 @@ this.submitting = false
 }
 .modal-btn-confirm {
   flex: 1;
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
   border-radius: 44rpx;
   font-size: 28rpx;
   padding: 20rpx;
   text-align: center;
 }
 .modal-btn-confirm[disabled] {
-  background: #ccc;
+  background: $facade-text-ghost;
 }
 </style>

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

@@ -109,22 +109,22 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .family-address {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $facade-fill-2;
   padding: 20rpx;
 }
 
 .page-title {
   font-size: 36rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   padding: 30rpx 0;
 }
 
 .form-section {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   margin-bottom: 20rpx;
   padding: 20rpx;
@@ -132,7 +132,7 @@ export default {
 
 .section-title {
   font-size: 30rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: bold;
   margin-bottom: 20rpx;
 }
@@ -145,7 +145,7 @@ export default {
 
 .current-address text {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 
 .save-btn {
@@ -153,7 +153,7 @@ export default {
   width: 100%;
   height: 88rpx;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #fff;
+  color: $app-surface;
   border-radius: 44rpx;
   font-size: 32rpx;
   display: flex;

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

@@ -101,32 +101,32 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .mse-page { min-height: 100vh; background: #F5FAFE; 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: #999 }
+.mse-loading-text { font-size: 28rpx; color: $facade-text-muted }
 .mse-hero { text-align: center; padding: 40rpx 0 20rpx }
-.mse-hero-title { font-size: 36rpx; font-weight: 600; color: #333; display: block; margin-bottom: 8rpx }
-.mse-hero-desc { font-size: 24rpx; color: #999; display: block }
-.mse-section { background: #fff; border-radius: 24rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05) }
-.mse-section-title { font-size: 28rpx; font-weight: 600; color: #333; margin-bottom: 20rpx; display: block }
+.mse-hero-title { font-size: 36rpx; font-weight: 600; color: $facade-text-strong; display: block; margin-bottom: 8rpx }
+.mse-hero-desc { font-size: 24rpx; color: $facade-text-muted; display: block }
+.mse-section { background: $app-surface; border-radius: 24rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05) }
+.mse-section-title { font-size: 28rpx; font-weight: 600; color: $facade-text-strong; margin-bottom: 20rpx; display: block }
 .mse-member-list { display: flex; overflow-x: auto; gap: 20rpx; padding-bottom: 10rpx }
 .mse-member-item { flex: 0 0 140rpx; display: flex; flex-direction: column; align-items: center; border: 4rpx solid transparent; border-radius: 20rpx; padding: 16rpx 10rpx; transition: border-color .2s }
-.mse-member-item.active { border-color: #F97316 }
+.mse-member-item.active { border-color: $brand-primary }
 .mse-member-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-bottom: 12rpx }
-.mse-member-name { font-size: 26rpx; font-weight: 500; color: #333; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
+.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: #FFF7ED; color: #E65100 }
+.role-parent { background: $uni-primary-pale; color: #E65100 }
 .role-child { background: #E8F5E9; color: #2E7D32 }
 .role-teacher { background: #E0E7FF; color: #3730A3 }
-.mse-member-check { margin-top: 8rpx; font-size: 24rpx; color: #F97316 }
+.mse-member-check { margin-top: 8rpx; font-size: 24rpx; color: $brand-primary }
 .mse-slider-item { margin-bottom: 28rpx }
 .mse-slider-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8rpx }
 .mse-slider-dot { width: 16rpx; height: 16rpx; border-radius: 50%; margin-right: 10rpx }
 .mse-slider-label { font-size: 28rpx; font-weight: 500; flex: 1 }
-.mse-slider-value { font-size: 28rpx; font-weight: 700; color: #333 }
+.mse-slider-value { font-size: 28rpx; font-weight: 700; color: $facade-text-strong }
 .mse-slider { width: 100% }
-.mse-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 20rpx 30rpx; background: #fff; border-top: 1rpx solid #F0F0F0; box-sizing: border-box }
+.mse-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 }
 .mse-btn { width: 100%; height: 88rpx; line-height: 88rpx; font-size: 30rpx; border-radius: 44rpx; border: none; text-align: center }
-.mse-btn-primary { background: linear-gradient(135deg, #F97316, #FF8C42); color: #fff; font-weight: 600 }
+.mse-btn-primary { background: linear-gradient(135deg, $brand-primary, $dim-body); color: $app-surface; font-weight: 600 }
 </style>

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

@@ -71,27 +71,27 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .mbe-page { min-height: 100vh; background: #F5FAFE; 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: #999 }
+.mbe-loading-text { font-size: 28rpx; color: $facade-text-muted }
 .mbe-hero { text-align: center; padding: 40rpx 0 10rpx }
-.mbe-hero-title { font-size: 36rpx; font-weight: 600; color: #333; display: block; margin-bottom: 8rpx }
-.mbe-hero-desc { font-size: 24rpx; color: #999; display: block }
-.mbe-section { background: #fff; border-radius: 24rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05) }
-.mbe-section-title { font-size: 28rpx; font-weight: 600; color: #333; margin-bottom: 20rpx; display: block }
+.mbe-hero-title { font-size: 36rpx; font-weight: 600; color: $facade-text-strong; display: block; margin-bottom: 8rpx }
+.mbe-hero-desc { font-size: 24rpx; color: $facade-text-muted; display: block }
+.mbe-section { background: $app-surface; border-radius: 24rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05) }
+.mbe-section-title { font-size: 28rpx; font-weight: 600; color: $facade-text-strong; margin-bottom: 20rpx; display: block }
 .mbe-member-list { display: flex; overflow-x: auto; gap: 20rpx; padding-bottom: 10rpx }
 .mbe-member-item { flex: 0 0 140rpx; display: flex; flex-direction: column; align-items: center; border: 4rpx solid transparent; border-radius: 20rpx; padding: 16rpx 10rpx; transition: border-color .2s }
-.mbe-member-item.active { border-color: #6366F1 }
+.mbe-member-item.active { border-color: $dim-wisdom }
 .mbe-member-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; margin-bottom: 12rpx }
-.mbe-member-name { font-size: 26rpx; font-weight: 500; color: #333; text-align: center; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
+.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: #FFF7ED; color: #E65100 }
+.role-parent { background: $uni-primary-pale; color: #E65100 }
 .role-child { background: #E8F5E9; color: #2E7D32 }
 .role-teacher { background: #E0E7FF; color: #3730A3 }
-.mbe-member-check { margin-top: 8rpx; font-size: 24rpx; color: #6366F1 }
-.mbe-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 20rpx 30rpx; background: #fff; border-top: 1rpx solid #F0F0F0; box-sizing: border-box }
+.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, #6366F1, #818CF8); color: #fff; font-weight: 600 }
-.mbe-tip { display: block; text-align: center; margin-top: 16rpx; font-size: 22rpx; color: #999 }
+.mbe-btn-primary { background: linear-gradient(135deg, $dim-wisdom, #818CF8); 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

@@ -95,29 +95,29 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .mbp-page { min-height: 100vh; background: #F5FAFE; 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: #333; display: block }
-.mbp-subtitle { font-size: 22rpx; color: #999; display: block; margin-top: 4rpx }
+.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 }
 .mbp-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16rpx }
-.mbp-card { width: 48%; background: #fff; border-radius: 20rpx; padding: 20rpx 10rpx; display: flex; flex-direction: column; align-items: center; border: 2rpx solid transparent; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05); transition: border-color .2s }
+.mbp-card { width: 48%; background: $app-surface; border-radius: 20rpx; padding: 20rpx 10rpx; display: flex; flex-direction: column; align-items: center; border: 2rpx solid transparent; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05); transition: border-color .2s }
 .mbp-card:active { transform: scale(0.98) }
-.mbp-card-active { border-color: #6366F1 }
-.mbp-card-code { font-size: 30rpx; font-weight: 700; color: #6366F1; margin-bottom: 4rpx }
-.mbp-card-name { font-size: 24rpx; color: #333; margin-bottom: 8rpx }
-.mbp-card-tag { font-size: 20rpx; color: #fff; padding: 2rpx 10rpx; border-radius: 10rpx }
+.mbp-card-active { border-color: $dim-wisdom }
+.mbp-card-code { font-size: 30rpx; font-weight: 700; color: $dim-wisdom; margin-bottom: 4rpx }
+.mbp-card-name { font-size: 24rpx; color: $facade-text-strong; margin-bottom: 8rpx }
+.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: #fff; border-radius: 24rpx 24rpx 0 0; display: flex; flex-direction: column }
-.mbp-drawer-header { padding: 30rpx 20rpx; background: linear-gradient(135deg, #6366F1, #818CF8); color: #fff; display: flex; flex-direction: column; align-items: center }
+.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-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: #999; font-weight: 600; margin-bottom: 8rpx }
-.mbp-drawer-value { font-size: 24rpx; color: #333; line-height: 1.6 }
+.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-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, #6366F1, #818CF8); color: #fff; font-weight: 600; border: none; text-align: center }
+.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 }
 </style>

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

@@ -160,31 +160,31 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .mbr-page { min-height: 100vh; background: #F5FAFE; 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, #6366F1, #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, #818CF8); 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: #fff; letter-spacing: 8rpx }
+.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 }
 .mbr-type-desc { font-size: 24rpx; color: rgba(255,255,255,0.8); margin-top: 16rpx; text-align: center; max-width: 600rpx }
-.mbr-section { background: #fff; border-radius: 24rpx; padding: 30rpx 26rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05) }
-.mbr-section-title { font-size: 30rpx; font-weight: 600; color: #333; margin-bottom: 20rpx }
+.mbr-section { background: $app-surface; border-radius: 24rpx; padding: 30rpx 26rpx; margin-bottom: 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05) }
+.mbr-section-title { font-size: 30rpx; font-weight: 600; color: $facade-text-strong; margin-bottom: 20rpx }
 .mbr-canvas-wrap { display: flex; justify-content: center }
 .mbr-canvas { width: 340px; height: 340px }
 .mbr-profile-list { display: flex; flex-direction: column }
-.mbr-profile-item { padding: 20rpx 0; border-top: 1rpx solid #F0F0F0 }
+.mbr-profile-item { padding: 20rpx 0; border-top: 1rpx solid $facade-fill }
 .mbr-profile-item:first-child { border-top: none }
-.mbr-profile-label { display: block; font-size: 24rpx; color: #999; margin-bottom: 8rpx }
-.mbr-profile-value { font-size: 26rpx; color: #333; line-height: 1.5 }
+.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-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-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 20rpx 30rpx; background: #fff; border-top: 1rpx solid #F0F0F0; display: flex; gap: 20rpx; box-sizing: border-box }
+.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, #6366F1, #818CF8); color: #fff; font-weight: 600 }
-.mbr-btn-outline { background: #fff; color: #6366F1; border: 2rpx solid #6366F1 }
+.mbr-btn-primary { background: linear-gradient(135deg, $dim-wisdom, #818CF8); 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

@@ -104,24 +104,24 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .mbt-page { min-height: 100vh; background: #F5FAFE; padding-bottom: 180rpx }
 .mbt-header { padding: 20rpx 30rpx; text-align: right }
-.mbt-progress-text { font-size: 24rpx; color: #999 }
+.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 }
 .mbt-progress-fill { height: 100%; transition: width .3s }
 .mbt-loading { display: flex; justify-content: center; padding: 100rpx 0 }
-.mbt-card { background: #fff; margin: 20rpx 30rpx; border-radius: 24rpx; padding: 30rpx 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05) }
-.mbt-dim-tag { display: inline-block; font-size: 22rpx; color: #fff; padding: 4rpx 16rpx; border-radius: 16rpx; margin-bottom: 16rpx }
-.mbt-q-text { font-size: 30rpx; font-weight: 500; color: #333; line-height: 1.5; margin-bottom: 24rpx }
+.mbt-card { background: $app-surface; margin: 20rpx 30rpx; border-radius: 24rpx; padding: 30rpx 24rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05) }
+.mbt-dim-tag { display: inline-block; font-size: 22rpx; color: $app-surface; padding: 4rpx 16rpx; border-radius: 16rpx; margin-bottom: 16rpx }
+.mbt-q-text { font-size: 30rpx; font-weight: 500; color: $facade-text-strong; line-height: 1.5; margin-bottom: 24rpx }
 .mbt-opts { display: flex; flex-direction: column; gap: 16rpx }
-.mbt-opt { flex: 1; padding: 24rpx; border: 2rpx solid #F0F0F0; border-radius: 16rpx; display: flex; align-items: center; justify-content: space-between; transition: border-color .2s, background .2s }
-.mbt-opt-sel { border-color: #6366F1; background: #F0F4FF }
-.mbt-opt-label { font-size: 26rpx; color: #333; line-height: 1.4 }
+.mbt-opt { flex: 1; padding: 24rpx; border: 2rpx solid $facade-fill; border-radius: 16rpx; display: flex; align-items: center; justify-content: space-between; transition: border-color .2s, background .2s }
+.mbt-opt-sel { border-color: $dim-wisdom; background: #F0F4FF }
+.mbt-opt-label { font-size: 26rpx; color: $facade-text-strong; line-height: 1.4 }
 .mbt-opt-radio { width: 24rpx; height: 24rpx; border: 2rpx solid #D1D5DB; border-radius: 50%; flex-shrink: 0 }
-.mbt-opt-radio.on { background: #6366F1; border-color: #6366F1 }
-.mbt-footer { position: fixed; bottom: 0; left: 0; right: 0; padding: 20rpx 30rpx; background: #fff; border-top: 1rpx solid #F0F0F0; display: flex; gap: 20rpx; box-sizing: border-box }
+.mbt-opt-radio.on { background: $dim-wisdom; border-color: $dim-wisdom }
+.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: #fff; color: #6366F1; border: 2rpx solid #6366F1 }
-.mbt-btn-next { background: linear-gradient(135deg, #6366F1, #818CF8); color: #fff; font-weight: 600 }
+.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 }
 </style>

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

@@ -237,7 +237,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .sc-page {
   min-height: 100vh;
   background: #F5FAFE;
@@ -251,8 +251,8 @@ export default {
 }
 .sc-hero-badge {
   display: inline-block;
-  background: linear-gradient(135deg, #6366F1, #8B5CF6);
-  color: #fff;
+  background: linear-gradient(135deg, $dim-wisdom, #8B5CF6);
+  color: $app-surface;
   font-size: 22rpx;
   padding: 6rpx 16rpx;
   border-radius: 20rpx;
@@ -262,12 +262,12 @@ export default {
   display: block;
   font-size: 40rpx;
   font-weight: 700;
-  color: #333;
+  color: $facade-text-strong;
 }
 .sc-hero-sub {
   display: block;
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 8rpx;
 }
 
@@ -283,7 +283,7 @@ export default {
   width: 60rpx;
   height: 60rpx;
   border: 4rpx solid #E5E7EB;
-  border-top-color: #6366F1;
+  border-top-color: $dim-wisdom;
   border-radius: 50%;
   animation: spin 1s linear infinite;
 }
@@ -292,13 +292,13 @@ export default {
 }
 .sc-loading-text {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   margin-top: 24rpx;
   font-weight: 500;
 }
 .sc-loading-hint {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 12rpx;
 }
 
@@ -326,7 +326,7 @@ export default {
 .sc-dim-nav {
   display: flex;
   justify-content: space-between;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx 20rpx;
   margin-bottom: 24rpx;
@@ -346,7 +346,7 @@ export default {
   justify-content: center;
 }
 .sc-dim-nav-char {
-  color: #fff;
+  color: $app-surface;
   font-size: 26rpx;
   font-weight: 600;
 }
@@ -362,7 +362,7 @@ export default {
   margin: 0 4rpx;
 }
 .sc-dim-nav-dot-mini.done {
-  background: #6366F1;
+  background: $dim-wisdom;
 }
 
 /* Progress */
@@ -374,11 +374,11 @@ export default {
 }
 .sc-progress-text {
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .sc-progress-pct {
   font-size: 24rpx;
-  color: #6366F1;
+  color: $dim-wisdom;
   font-weight: 600;
 }
 .sc-progress-bar {
@@ -390,7 +390,7 @@ export default {
 }
 .sc-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, #6366F1, #8B5CF6);
+  background: linear-gradient(90deg, $dim-wisdom, #8B5CF6);
   border-radius: 5rpx;
   transition: width 0.3s ease;
 }
@@ -403,14 +403,14 @@ export default {
   display: flex;
   align-items: center;
   padding: 16rpx 20rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx 16rpx 0 0;
   border-left: 6rpx solid;
 }
 .sc-section-name {
   font-size: 30rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   margin-right: 12rpx;
 }
 .sc-section-element {
@@ -419,17 +419,17 @@ export default {
 }
 .sc-section-slogan {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   flex: 1;
 }
 .sc-section-count {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 /* Question */
 .sc-question {
-  background: #fff;
+  background: $app-surface;
   padding: 24rpx 28rpx;
   border-bottom: 1rpx solid #F3F4F6;
 }
@@ -446,7 +446,7 @@ export default {
 .sc-q-text {
   display: block;
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.6;
   margin-bottom: 20rpx;
 }
@@ -462,7 +462,7 @@ export default {
   align-items: center;
   justify-content: space-between;
   padding: 20rpx 24rpx;
-  background: #F9FAFB;
+  background: $facade-fill-gray-50;
   border-radius: 12rpx;
   border: 2rpx solid transparent;
   transition: background-color 0.2s;
@@ -472,7 +472,7 @@ export default {
 }
 .sc-opt-sel {
   background: #EEF2FF;
-  border-color: #6366F1;
+  border-color: $dim-wisdom;
 }
 .sc-opt-label {
   font-size: 26rpx;
@@ -487,8 +487,8 @@ export default {
   margin-left: 16rpx;
 }
 .sc-opt-radio-on {
-  border-color: #6366F1;
-  background: #6366F1;
+  border-color: $dim-wisdom;
+  background: $dim-wisdom;
   position: relative;
 }
 .sc-opt-radio-on::after {
@@ -496,7 +496,7 @@ export default {
   position: absolute;
   width: 12rpx;
   height: 12rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 50%;
   top: 50%;
   left: 50%;
@@ -509,7 +509,7 @@ export default {
   bottom: 0;
   left: 0;
   right: 0;
-  background: #fff;
+  background: $app-surface;
   padding: 24rpx 30rpx;
   padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
   box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
@@ -518,8 +518,8 @@ export default {
   width: 100%;
   height: 88rpx;
   line-height: 88rpx;
-  background: linear-gradient(135deg, #6366F1, #8B5CF6);
-  color: #fff;
+  background: linear-gradient(135deg, $dim-wisdom, #8B5CF6);
+  color: $app-surface;
   font-size: 32rpx;
   font-weight: 600;
   border-radius: 44rpx;
@@ -532,7 +532,7 @@ export default {
   display: block;
   text-align: center;
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 16rpx;
 }
 
@@ -549,21 +549,21 @@ export default {
 }
 .sc-error-text {
   font-size: 32rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 600;
   margin-bottom: 12rpx;
 }
 .sc-error-hint {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-bottom: 40rpx;
 }
 .sc-error-btn {
   width: 300rpx;
   height: 80rpx;
   line-height: 80rpx;
-  background: #6366F1;
-  color: #fff;
+  background: $dim-wisdom;
+  color: $app-surface;
   font-size: 28rpx;
   border-radius: 40rpx;
   border: none;

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

@@ -182,7 +182,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .sce-page {
   min-height: 100vh;
   background: #F5FAFE;
@@ -197,10 +197,10 @@ export default {
 }
 .sce-loading-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .sce-hero {
-  background: linear-gradient(135deg, #F97316, #FF8C42);
+  background: linear-gradient(135deg, $brand-primary, $dim-body);
   border-radius: 24rpx;
   padding: 40rpx 30rpx;
   margin-bottom: 24rpx;
@@ -223,7 +223,7 @@ export default {
 .sce-hero-score {
   font-size: 88rpx;
   font-weight: 700;
-  color: #fff;
+  color: $app-surface;
 }
 .sce-hero-total {
   font-size: 30rpx;
@@ -238,7 +238,7 @@ export default {
   margin-top: 16rpx;
 }
 .sce-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 30rpx 26rpx;
   margin-bottom: 24rpx;
@@ -250,7 +250,7 @@ export default {
 .sce-card-title-text {
   font-size: 32rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .sce-dim-list {
   display: flex;
@@ -280,7 +280,7 @@ export default {
 .sce-dim-name {
   font-size: 30rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .sce-dim-score-wrap {
   display: flex;
@@ -292,11 +292,11 @@ export default {
 }
 .sce-dim-max {
   font-size: 22rpx;
-  color: #BBB;
+  color: $facade-text-ghost-light;
 }
 .sce-dim-bar {
   height: 12rpx;
-  background: #F0F0F0;
+  background: $facade-fill;
   border-radius: 6rpx;
   margin-top: 14rpx;
   overflow: hidden;
@@ -307,7 +307,7 @@ export default {
   transition: width 0.5s ease;
 }
 .sce-status {
-  background: #FFF7ED;
+  background: $uni-primary-pale;
   border-radius: 16rpx;
   padding: 24rpx 20rpx;
   margin-bottom: 24rpx;
@@ -335,22 +335,22 @@ export default {
   margin-right: 0;
 }
 .sce-btn-primary {
-  background: linear-gradient(135deg, #F97316, #FF8C42);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $dim-body);
+  color: $app-surface;
   font-weight: 600;
 }
 .sce-btn-outline {
-  background: #fff;
-  color: #F97316;
-  border: 2rpx solid #F97316;
+  background: $app-surface;
+  color: $brand-primary;
+  border: 2rpx solid $brand-primary;
 }
 .sce-btn-disabled {
   background: #E5E7EB;
-  color: #999;
+  color: $facade-text-muted;
   font-weight: 400;
 }
 .sce-trend {
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 30rpx 26rpx;
   margin-bottom: 24rpx;
@@ -365,11 +365,11 @@ export default {
 .sce-trend-title {
   font-size: 30rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .sce-trend-summary {
   font-size: 24rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: 600;
 }
 .sce-trend-insight {
@@ -381,7 +381,7 @@ export default {
 .sce-info-text {
   display: block;
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   line-height: 1.6;
 }
 </style>

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

@@ -323,7 +323,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .scr-page {
   min-height: 100vh;
   background: #F5FAFE;
@@ -338,12 +338,12 @@ export default {
 }
 .scr-loading-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 /* 总分横幅 */
 .scr-hero {
-  background: linear-gradient(135deg, #F97316, #FF8C42);
+  background: linear-gradient(135deg, $brand-primary, $dim-body);
   border-radius: 24rpx;
   padding: 40rpx 30rpx;
   margin-bottom: 24rpx;
@@ -366,7 +366,7 @@ export default {
 .scr-hero-score {
   font-size: 88rpx;
   font-weight: 700;
-  color: #fff;
+  color: $app-surface;
 }
 .scr-hero-total {
   font-size: 30rpx;
@@ -383,7 +383,7 @@ export default {
 }
 .scr-hero-level.level-healthy { color: #2E7D32; }
 .scr-hero-level.level-attention { color: #E65100; }
-.scr-hero-level.level-tense { color: #C62828; }
+.scr-hero-level.level-tense { color: $status-danger-strong-2; }
 .scr-hero-date {
   display: block;
   text-align: center;
@@ -394,7 +394,7 @@ export default {
 
 /* 通用卡片 */
 .scr-card {
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx;
   padding: 30rpx 26rpx;
   margin-bottom: 24rpx;
@@ -409,11 +409,11 @@ export default {
 .scr-card-title-text {
   font-size: 32rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .scr-card-sub {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 /* 维度得分 */
@@ -445,11 +445,11 @@ export default {
 .scr-dim-name {
   font-size: 30rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .scr-dim-element {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-left: 10rpx;
 }
 .scr-dim-score-wrap {
@@ -462,11 +462,11 @@ export default {
 }
 .scr-dim-score-max {
   font-size: 22rpx;
-  color: #BBB;
+  color: $facade-text-ghost-light;
 }
 .scr-dim-bar {
   height: 12rpx;
-  background: #F0F0F0;
+  background: $facade-fill;
   border-radius: 6rpx;
   margin-top: 14rpx;
   overflow: hidden;
@@ -490,9 +490,9 @@ export default {
 }
 .scr-dim-level.lvl-healthy { background: #E8F5E9; color: #2E7D32; }
 .scr-dim-level.lvl-attention { background: #FFF8E1; color: #F57F17; }
-.scr-dim-level.lvl-tense { background: #FFEBEE; color: #C62828; }
+.scr-dim-level.lvl-tense { background: #FFEBEE; color: $status-danger-strong-2; }
 .scr-guide {
-  background: #FFF7ED;
+  background: $uni-primary-pale;
   border-radius: 24rpx;
   padding: 30rpx 26rpx;
   margin-bottom: 24rpx;
@@ -506,7 +506,7 @@ export default {
 .scr-guide-title {
   font-size: 30rpx;
   font-weight: 700;
-  color: #F97316;
+  color: $brand-primary;
 }
 .scr-guide-desc {
   font-size: 24rpx;
@@ -522,13 +522,13 @@ export default {
 .scr-guide-total-label {
   font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   margin-right: 12rpx;
 }
 .scr-guide-total-text {
   font-size: 48rpx;
   font-weight: 700;
-  color: #F97316;
+  color: $brand-primary;
 }
 .scr-guide-legend {
   display: flex;
@@ -549,7 +549,7 @@ export default {
 }
 .lg-healthy { background: #2E7D32; }
 .lg-attention { background: #F57F17; }
-.lg-tense { background: #C62828; }
+.lg-tense { background: $status-danger-strong-2; }
 .scr-guide-legend-text {
   font-size: 22rpx;
   color: #555;
@@ -560,7 +560,7 @@ export default {
 }
 .scr-guide-steps-title {
   font-size: 24rpx;
-  color: #F97316;
+  color: $brand-primary;
   margin-bottom: 12rpx;
   display: block;
 }
@@ -571,13 +571,13 @@ export default {
 }
 .scr-guide-step-num {
   font-size: 28rpx;
-  color: #F97316;
+  color: $brand-primary;
   margin-right: 12rpx;
   min-width: 20rpx;
 }
 .scr-guide-step-text {
   font-size: 24rpx;
-  color: #333;
+  color: $facade-text-strong;
   flex: 1;
 }
 .scr-guide-step:last-child {
@@ -594,9 +594,9 @@ export default {
 /* 寻源建议 */
 .scr-advice-intro {
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
   line-height: 1.6;
-  background: #FFF7ED;
+  background: $uni-primary-pale;
   border-radius: 12rpx;
   padding: 16rpx 20rpx;
   margin-bottom: 24rpx;
@@ -625,7 +625,7 @@ export default {
 .scr-advice-dim-name {
   font-size: 28rpx;
   font-weight: 700;
-  color: #fff;
+  color: $app-surface;
   margin-right: 8rpx;
 }
 .scr-advice-dim-elem {
@@ -635,7 +635,7 @@ export default {
 .scr-advice-dim-score {
   font-size: 26rpx;
   font-weight: 600;
-  color: #C62828;
+  color: $status-danger-strong-2;
 }
 .scr-advice-flow {
   display: flex;
@@ -658,18 +658,18 @@ export default {
 .scr-flow-label {
   font-size: 24rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 .scr-flow-arrow {
   flex-shrink: 0;
   font-size: 24rpx;
-  color: #F97316;
+  color: $brand-primary;
   margin: 0 10rpx;
 }
 .scr-flow-action {
   flex: 1;
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
   line-height: 1.5;
 }
 .scr-advice-action {
@@ -684,14 +684,14 @@ export default {
   flex-shrink: 0;
   font-size: 22rpx;
   font-weight: 600;
-  color: #F97316;
+  color: $brand-primary;
   margin-right: 12rpx;
   padding: 2rpx 0;
 }
 .scr-advice-action-text {
   flex: 1;
   font-size: 24rpx;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.5;
 }
 /* 一键加入今日微行动 */
@@ -705,8 +705,8 @@ export default {
   line-height: 72rpx;
   font-size: 26rpx;
   font-weight: 600;
-  color: #fff;
-  background: linear-gradient(135deg, #10B981, #34D399);
+  color: $app-surface;
+  background: linear-gradient(135deg, $status-success, #34D399);
   border-radius: 36rpx;
   border: none;
 }
@@ -717,7 +717,7 @@ export default {
   flex: 1;
   text-align: center;
   font-size: 24rpx;
-  color: #10B981;
+  color: $status-success;
   background: #E8F8F1;
   border-radius: 12rpx;
   padding: 16rpx 0;
@@ -736,7 +736,7 @@ export default {
 }
 .scr-all-healthy-text {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 
 /* 底部按钮 */
@@ -755,23 +755,23 @@ export default {
   border: none;
 }
 .scr-btn-primary {
-  background: linear-gradient(135deg, #F97316, #FF8C42);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $dim-body);
+  color: $app-surface;
   font-weight: 600;
 }
 .scr-btn-outline {
-  background: #fff;
-  color: #F97316;
-  border: 2rpx solid #F97316;
+  background: $app-surface;
+  color: $brand-primary;
+  border: 2rpx solid $brand-primary;
 }
 .scr-btn-secondary {
-  background: linear-gradient(135deg, #10B981, #34D399);
-  color: #fff;
+  background: linear-gradient(135deg, $status-success, #34D399);
+  color: $app-surface;
   font-weight: 600;
 }
 .scr-btn-ghost {
-  background: #fff;
-  color: #666;
+  background: $app-surface;
+  color: $facade-text-body;
   border: 2rpx solid #D1D5DB;
 }
 .scr-advice-interpretation {
@@ -789,7 +789,7 @@ export default {
 .scr-advice-action-label {
   font-size: 24rpx;
   font-weight: 600;
-  color: #F97316;
+  color: $brand-primary;
 }
 .scr-advice-action {
   font-size: 24rpx;
@@ -806,7 +806,7 @@ export default {
   display: block;
   font-size: 24rpx;
   font-weight: 600;
-  color: #F97316;
+  color: $brand-primary;
   margin-bottom: 8rpx;
 }
 .scr-family-insight-text {
@@ -816,7 +816,7 @@ export default {
   line-height: 1.6;
 }
 .scr-fallback {
-  background: #FFF7ED;
+  background: $uni-primary-pale;
   border-radius: 12rpx;
   padding: 16rpx 20rpx;
   margin-top: 16rpx;
@@ -824,6 +824,6 @@ export default {
 }
 .scr-fallback text {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 </style>

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

@@ -203,7 +203,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<stylescoped lang="scss">
 .sc-page {
   min-height: 100vh;
   background: #F5FAFE;
@@ -217,12 +217,12 @@ export default {
   display: block;
   font-size: 40rpx;
   font-weight: 700;
-  color: #333;
+  color: $facade-text-strong;
 }
 .sc-hero-sub {
   display: block;
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 8rpx;
 }
 .sc-loading {
@@ -233,14 +233,14 @@ export default {
 }
 .sc-loading-text {
   font-size: 28rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 
 /* 维度导航 */
 .sc-dim-nav {
   display: flex;
   justify-content: space-between;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx 20rpx;
   margin-bottom: 24rpx;
@@ -260,7 +260,7 @@ export default {
   justify-content: center;
 }
 .sc-dim-nav-char {
-  color: #fff;
+  color: $app-surface;
   font-size: 26rpx;
   font-weight: 600;
 }
@@ -276,7 +276,7 @@ export default {
   margin: 0 4rpx;
 }
 .sc-dim-nav-dot-mini.done {
-  background: #F97316;
+  background: $brand-primary;
 }
 
 /* 进度 */
@@ -288,11 +288,11 @@ export default {
 }
 .sc-progress-text {
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 .sc-progress-pct {
   font-size: 24rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: 600;
 }
 .sc-progress-bar {
@@ -304,7 +304,7 @@ export default {
 }
 .sc-progress-fill {
   height: 100%;
-  background: linear-gradient(90deg, #F97316, #FF8C42);
+  background: linear-gradient(90deg, $brand-primary, $dim-body);
   border-radius: 5rpx;
   transition: width 0.3s ease;
 }
@@ -316,8 +316,8 @@ export default {
 .sc-section-header {
   display: flex;
   align-items: center;
-  background: #fff;
-  border-left: 8rpx solid #F97316;
+  background: $app-surface;
+  border-left: 8rpx solid $brand-primary;
   border-radius: 12rpx;
   padding: 20rpx 24rpx;
   margin-bottom: 16rpx;
@@ -326,7 +326,7 @@ export default {
 .sc-section-name {
   font-size: 32rpx;
   font-weight: 700;
-  color: #333;
+  color: $facade-text-strong;
   margin-right: 12rpx;
 }
 .sc-section-element {
@@ -337,17 +337,17 @@ export default {
 .sc-section-slogan {
   flex: 1;
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .sc-section-count {
   font-size: 24rpx;
-  color: #F97316;
+  color: $brand-primary;
   font-weight: 600;
 }
 
 /* 题目卡片 */
 .sc-question {
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 30rpx 26rpx 26rpx;
   margin-bottom: 16rpx;
@@ -357,7 +357,7 @@ export default {
   display: block;
   font-size: 30rpx;
   font-weight: 500;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.5;
 }
 .sc-opts {
@@ -374,13 +374,13 @@ export default {
   transition: border-color 0.2s, background-color 0.2s;
 }
 .sc-opt-sel {
-  border-color: #F97316;
-  background: #FFF7ED;
+  border-color: $brand-primary;
+  background: $uni-primary-pale;
 }
 .sc-opt-label {
   flex: 1;
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   line-height: 1.4;
 }
 .sc-opt-radio {
@@ -392,7 +392,7 @@ export default {
   box-sizing: border-box;
 }
 .sc-opt-radio-on {
-  border: 10rpx solid #F97316;
+  border: 10rpx solid $brand-primary;
 }
 
 /* 提交 */
@@ -402,8 +402,8 @@ export default {
 .sc-submit-btn {
   height: 92rpx;
   line-height: 92rpx;
-  background: linear-gradient(135deg, #F97316, #FF8C42);
-  color: #fff;
+  background: linear-gradient(135deg, $brand-primary, $dim-body);
+  color: $app-surface;
   font-size: 32rpx;
   font-weight: 600;
   border-radius: 46rpx;
@@ -417,7 +417,7 @@ export default {
   display: block;
   text-align: center;
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 16rpx;
 }
 </style>