refactor(action-detail): B-4b 四页令牌化（零观感变化）

- contact-detail 26 + member-action-detail 19 + octopus-effects-list 17 + octopus-add-key-person 25 = 87 处全映射
- uni.scss 新登记 6 枚：indigo 族补 $accent-indigo-ink #4338CA / $accent-indigo-tint #E0E7FF；pink 族 $accent-pink #EC4899 / $accent-pink-deep #DB2777 / $accent-pink-tint #FCE7F3；$status-danger-2 #FF4D4F
- #F0FFF4 映射 $dim-action-tint（action 维度浅底归位）；equiv-regression 四连 PASS

cfc-frontend/pages/action-detail/contact-detail.vue

@@ -252,19 +252,19 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .detail-page {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
   padding-bottom: 40rpx;
 }
 .detail-header {
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
   padding: 60rpx 30rpx 40rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
-  color: #fff;
+  color: $app-surface;
 }
 .header-top {
   width: 100%;
@@ -287,7 +287,7 @@ export default {
   margin-bottom: 16rpx;
   border: 4rpx solid rgba(255,255,255,0.4);
 }
-.avatar-text { font-size: 48rpx; font-weight: bold; color: #fff; }
+.avatar-text { font-size: 48rpx; font-weight: bold; color: $app-surface; }
 .header-name { font-size: 36rpx; font-weight: bold; margin-bottom: 8rpx; }
 .header-meta { font-size: 26rpx; opacity: 0.9; margin-bottom: 4rpx; }
 .header-known { font-size: 24rpx; opacity: 0.7; margin-bottom: 12rpx; }
@@ -297,7 +297,7 @@ export default {
 .intimacy-label { font-size: 24rpx; opacity: 0.8; }
 
 .info-section, .interaction-section {
-  background: #fff;
+  background: $app-surface;
   margin: 20rpx;
   border-radius: 20rpx;
   padding: 30rpx;
@@ -305,7 +305,7 @@ export default {
 .section-title {
   font-size: 28rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
   margin-bottom: 20rpx;
 }
@@ -315,20 +315,20 @@ export default {
   margin-bottom: 16rpx;
 }
 .info-icon { font-size: 28rpx; margin-right: 12rpx; width: 40rpx; }
-.info-value { font-size: 26rpx; color: #555; flex: 1; }
-.countdown { color: #EC4899; }
+.info-value { font-size: 26rpx; color: $facade-text-deep; flex: 1; }
+.countdown { color: $accent-pink; }
 
 .edit-row {
   margin-bottom: 20rpx;
 }
 .edit-label {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   display: block;
   margin-bottom: 8rpx;
 }
 .edit-input {
-  border: 1rpx solid #ddd;
+  border: 1rpx solid $facade-border-soft;
   border-radius: 12rpx;
   padding: 24rpx 20rpx;
   font-size: 28rpx;
@@ -337,7 +337,7 @@ export default {
   min-height: 80rpx;
 }
 .edit-textarea {
-  border: 1rpx solid #ddd;
+  border: 1rpx solid $facade-border-soft;
   border-radius: 12rpx;
   padding: 24rpx 20rpx;
   font-size: 28rpx;
@@ -346,7 +346,7 @@ export default {
   min-height: 160rpx;
 }
 .edit-picker {
-  border: 1rpx solid #ddd;
+  border: 1rpx solid $facade-border-soft;
   border-radius: 12rpx;
   padding: 24rpx 20rpx;
   font-size: 28rpx;
@@ -358,9 +358,9 @@ export default {
   width: 100%;
   padding: 24rpx;
   border-radius: 12rpx;
-  background: linear-gradient(135deg, #FF6B35, #F97316);
+  background: linear-gradient(135deg, $mind-accent, $brand-primary);
   font-size: 30rpx;
-  color: #fff;
+  color: $app-surface;
   text-align: center;
   border: none;
   margin-top: 20rpx;
@@ -370,18 +370,18 @@ export default {
   display: flex;
   justify-content: space-between;
   padding: 16rpx 0;
-  border-bottom: 1rpx solid #f0f0f0;
+  border-bottom: 1rpx solid $facade-fill;
 }
-.interaction-date { font-size: 24rpx; color: #999; }
-.interaction-desc { font-size: 26rpx; color: #555; }
-.interaction-empty { text-align: center; padding: 30rpx; color: #999; font-size: 26rpx; }
+.interaction-date { font-size: 24rpx; color: $facade-text-muted; }
+.interaction-desc { font-size: 26rpx; color: $facade-text-deep; }
+.interaction-empty { text-align: center; padding: 30rpx; color: $facade-text-muted; font-size: 26rpx; }
 .btn-interaction {
   width: 100%;
   padding: 24rpx;
   border-radius: 12rpx;
-  background: linear-gradient(135deg, #667eea, #764ba2);
+  background: linear-gradient(135deg, $accent-indigo, $accent-indigo-deep);
   font-size: 30rpx;
-  color: #fff;
+  color: $app-surface;
   text-align: center;
   border: none;
   margin-top: 20rpx;
@@ -391,10 +391,10 @@ export default {
   width: 100%;
   padding: 24rpx;
   border-radius: 12rpx;
-  background: #fff;
-  border: 1rpx solid #ff4d4f;
+  background: $app-surface;
+  border: 1rpx solid $status-danger-2;
   font-size: 28rpx;
-  color: #ff4d4f;
+  color: $status-danger-2;
   text-align: center;
 }
 </style>

cfc-frontend/pages/action-detail/member-action-detail.vue

@@ -224,22 +224,22 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .detail-container {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
   padding-bottom: 40rpx;
 }
 .nav-back-icon {
   font-size: 36rpx;
-  color: #333;
+  color: $facade-text-strong;
 }
 .member-card {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin: 20rpx 30rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 24rpx;
   box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
@@ -248,18 +248,18 @@ export default {
   width: 80rpx;
   height: 80rpx;
   border-radius: 40rpx;
-  background: linear-gradient(135deg, #4CAF50, #81C784);
+  background: linear-gradient(135deg, $mat-green, $mat-green-light);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 20rpx;
 }
 .action-avatar {
-  background: linear-gradient(135deg, #10B981, #34D399);
+  background: linear-gradient(135deg, $status-success, $status-success-light-3);
 }
 .avatar-text {
   font-size: 32rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: bold;
 }
 .member-info {
@@ -270,11 +270,11 @@ export default {
 .member-name {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .member-role {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 4rpx;
 }
 .member-score {
@@ -285,14 +285,14 @@ export default {
 .score-value {
   font-size: 40rpx;
   font-weight: bold;
-  color: #4CAF50;
+  color: $mat-green;
 }
 .action-score {
-  color: #10B981;
+  color: $status-success;
 }
 .score-label {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .bottom-spacer {
   height: 40rpx;
@@ -302,13 +302,13 @@ export default {
 .brand-strap {
   margin: 16rpx 30rpx 0;
   padding: 20rpx 28rpx;
-  background: linear-gradient(135deg, #F0FFF4, rgba(16,185,129,0.12));
+  background: linear-gradient(135deg, $dim-action-tint, rgba(16,185,129,0.12));
   border-radius: 16rpx;
-  border-left: 4rpx solid #10B981;
+  border-left: 4rpx solid $status-success;
 }
 .brand-strap-text {
   font-size: 26rpx;
-  color: #065F46;
+  color: $status-success-strong;
   font-weight: 500;
 }
 
@@ -316,9 +316,9 @@ export default {
 .monthly-guidance {
   margin: 16rpx 30rpx 0;
   padding: 20rpx 28rpx;
-  background: linear-gradient(135deg, #F0FFF4, rgba(16,185,129,0.08));
+  background: linear-gradient(135deg, $dim-action-tint, rgba(16,185,129,0.08));
   border-radius: 16rpx;
-  border-left: 4rpx solid #10B981;
+  border-left: 4rpx solid $status-success;
   display: flex;
   align-items: center;
   gap: 12rpx;
@@ -326,7 +326,7 @@ export default {
 .guidance-icon { font-size: 32rpx; }
 .guidance-text {
   font-size: 26rpx;
-  color: #065F46;
+  color: $status-success-strong;
   font-weight: 500;
 }
 </style>

cfc-frontend/pages/action-detail/octopus-add-key-person.vue

@@ -161,10 +161,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
   min-height: 100vh;
-  background: #f5f5f5;
+  background: $facade-fill-2;
   padding: 24rpx;
 }
 .page-header {
@@ -173,28 +173,28 @@ export default {
 .page-title {
   font-size: 36rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .form-section {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   margin-bottom: 20rpx;
 }
 .section-label {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
   display: block;
   margin-bottom: 16rpx;
 }
 .required-mark {
-  color: #F97316;
+  color: $brand-primary;
 }
 .name-input {
   width: 100%;
   height: 88rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
   border-radius: 12rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
@@ -203,7 +203,7 @@ export default {
 .desc-input {
   width: 100%;
   height: 160rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
   border-radius: 12rpx;
   padding: 20rpx;
   font-size: 28rpx;
@@ -212,11 +212,11 @@ export default {
 .form-picker {
   width: 100%;
   height: 88rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
   border-radius: 12rpx;
   padding: 0 20rpx;
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   display: flex;
   align-items: center;
   box-sizing: border-box;
@@ -224,7 +224,7 @@ export default {
 /* 介绍人选择器 */
 .referrer-select {
   height: 88rpx;
-  background: #fafafa;
+  background: $facade-fill-ghost;
   border-radius: 12rpx;
   padding: 0 20rpx;
   display: flex;
@@ -234,19 +234,19 @@ export default {
 }
 .referrer-selected {
   font-size: 28rpx;
-  color: #F97316;
+  color: $brand-primary;
 }
 .referrer-placeholder {
   font-size: 28rpx;
-  color: #ccc;
+  color: $facade-text-ghost;
 }
 .picker-arrow {
   font-size: 32rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .empty-referrer {
   font-size: 26rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 /* 介绍人弹窗 */
 .referrer-modal-mask {
@@ -261,7 +261,7 @@ export default {
   z-index: 100;
 }
 .referrer-modal {
-  background: #fff;
+  background: $app-surface;
   border-radius: 24rpx 24rpx 0 0;
   width: 100%;
   max-height: 60vh;
@@ -273,33 +273,33 @@ export default {
   justify-content: space-between;
   align-items: center;
   padding: 24rpx 28rpx;
-  border-bottom: 1rpx solid #E5E7EB;
+  border-bottom: 1rpx solid $facade-gray-200;
   position: sticky;
   top: 0;
-  background: #fff;
+  background: $app-surface;
 }
 .referrer-modal-title {
   font-size: 30rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
 }
 .referrer-modal-close {
   font-size: 32rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .referrer-option {
   padding: 24rpx 28rpx;
-  border-bottom: 1rpx solid #F3F4F6;
+  border-bottom: 1rpx solid $facade-fill-gray-100;
 }
 .referrer-option-name {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
   display: block;
 }
 .referrer-option-org {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 4rpx;
   display: block;
 }
@@ -308,14 +308,14 @@ export default {
 }
 .btn-submit {
   width: 100%;
-  background: #F97316;
-  color: #fff;
+  background: $brand-primary;
+  color: $app-surface;
   border: none;
   border-radius: 12rpx;
   padding: 24rpx 0;
   font-size: 32rpx;
 }
 .btn-submit[disabled] {
-  background: #ccc;
+  background: $facade-text-ghost;
 }
 </style>

cfc-frontend/pages/action-detail/octopus-effects-list.vue

@@ -103,10 +103,10 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .container {
   min-height: 100vh;
-  background: #f5f7fa;
+  background: $app-bg;
   padding: 24rpx;
   padding-bottom: 120rpx;
 }
@@ -116,12 +116,12 @@ export default {
 .page-title {
   font-size: 36rpx;
   font-weight: bold;
-  color: #333;
+  color: $facade-text-strong;
   display: block;
 }
 .page-sub {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 4rpx;
   display: block;
 }
@@ -131,7 +131,7 @@ export default {
   gap: 20rpx;
 }
 .record-item {
-  background: #fff;
+  background: $app-surface;
   border-radius: 16rpx;
   padding: 24rpx;
   box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
@@ -145,7 +145,7 @@ export default {
 .record-amount {
   font-size: 32rpx;
   font-weight: bold;
-  color: #F97316;
+  color: $brand-primary;
 }
 .record-tags {
   display: flex;
@@ -154,18 +154,18 @@ export default {
 .tag {
   font-size: 20rpx;
   padding: 4rpx 12rpx;
-  background: #FFF7ED;
-  color: #F97316;
+  background: $uni-primary-pale;
+  color: $brand-primary;
   border-radius: 8rpx;
 }
 .record-date {
   font-size: 24rpx;
-  color: #94A3B8;
+  color: $app-text-subtle;
   margin-top: 12rpx;
 }
 .record-desc {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   margin-top: 8rpx;
 }
 .record-actions {
@@ -175,13 +175,13 @@ export default {
 }
 .action-btn-del {
   font-size: 24rpx;
-  color: #CBD5E1;
+  color: $app-border;
   padding: 4rpx 12rpx;
   border-radius: 8rpx;
 }
 .action-btn-del:active {
-  color: #EF4444;
-  background: #FEF2F2;
+  color: $status-danger;
+  background: $status-danger-tint-2;
 }
 .empty-state {
   display: flex;
@@ -195,13 +195,13 @@ export default {
 }
 .empty-text {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
   margin-bottom: 8rpx;
 }
 .empty-hint {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
 }
 .fab {
   position: fixed;
@@ -210,7 +210,7 @@ export default {
   width: 100rpx;
   height: 100rpx;
   border-radius: 50%;
-  background: linear-gradient(135deg, #F97316, #FB923C);
+  background: linear-gradient(135deg, $brand-primary, $brand-primary-light);
   box-shadow: 0 4rpx 20rpx rgba(249,115,22,0.35);
   display: flex;
   align-items: center;
@@ -218,7 +218,7 @@ export default {
 }
 .fab-icon {
   font-size: 48rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: 300;
 }
 </style>

cfc-frontend/uni.scss

@@ -584,6 +584,8 @@ $app-ink-night:        #1A1A2E; // 深夜蓝黑（17 文件）
 // ---- 封面渐变 / 提示条（B 批 articles 收敛时登记）----
 $accent-indigo:      #667EEA; // 靛紫渐变起点（封面/卡片，37 文件）
 $accent-indigo-deep: #764BA2; // 靛紫渐变终点（26 文件）
+$accent-indigo-ink:  #4338CA; // indigo-700 靛紫深文字（4 文件）
+$accent-indigo-tint: #E0E7FF; // indigo-100 靛紫浅底（7 文件）
 $tint-info-soft:     #E8F4FD; // 信息蓝浅底（article-edit + articles）
 $hint-cream-bg:      #FEF9E7; // 提示条奶油底（articles + shop/index）
 $hint-cream-border:  #F0E6C0; // 提示条奶油描边（articles + shop/index）
@@ -629,3 +631,8 @@ $status-info-light:    #38BDF8; // sky-400 信息亮档（3 文件；vs $status-
 $status-danger-light:  #F87171; // red-400 危险亮档（3 文件；vs $status-danger #EF4444 red-500）
 $facade-text-slate-deep: #475569; // slate-600 深灰蓝文字（16 文件；vs $facade-text-slate #6B7280 gray-500）
 $facade-fill-slate:    #F1F5F9; // slate-100 浅灰蓝填充（36 文件；vs $facade-fill-gray-100 #F3F4F6 gray-100）
+// ---- pink 伴生族（relationship-questionnaire + contact-detail 等收敛时登记）----
+$accent-pink:      #EC4899; // pink-500 主色（9 文件）
+$accent-pink-deep: #DB2777; // pink-700 深文字（4 文件）
+$accent-pink-tint: #FCE7F3; // pink-100 浅底（3 文件）
+$status-danger-2:  #FF4D4F; // antd 红·副档（11 文件；vs $status-danger #EF4444）