refactor(mind-detail): B-1a emotion-checkin 令牌化——63 处硬编码色收敛（零观感变化）

- style 块加 lang="scss"，58 处映射全局令牌（$dim-mind 系 12 /
  $facade-* 系 46：文字阶 6 + 填充阶 5 + violet 3 + 状态 2），
  5 处单页专有色留 $c- 局部（效价网格四档渐变 + 网格描边 + 输入框描边）
- C-3 合规修复：transition: all 0.2s → background/transform 0.2s ease
  （.emotion-active 实际变化属性，时长与默认缓动保持不变）
- 验证：等价回归唯一 DIFF 即上述 transition 行（有意变更），
  63 处色值编译产物逐字节相同；零死变量 / 零未定义变量 / 零残留 hex

cfc-frontend/pages/mind-detail/emotion-checkin.vue

@@ -800,10 +800,17 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+// ===== 页面级局部调色板（单页专有色阶；同值才映射全局令牌，约定见 uni.scss §14） =====
+$c-tint-magenta: #FFF0FF;   // 效价-激活度网格渐变 25% 档
+$c-tint-cream:   #FFFFF0;   // 效价-激活度网格渐变 100% 档
+$c-border-grid:  #E8E8E8;   // 效价-激活度网格描边
+$c-text-aaa:     #AAA;      // 强度提示弱文字
+$c-border-input: #E0E0E0;   // 自定义标签输入框描边
+
 .checkin-container {
   min-height: 100vh;
-  background: linear-gradient(180deg, #FFF0F5 0%, #FFFFFF 100%);
+  background: linear-gradient(180deg, $dim-mind-tint 0%, $app-surface 100%);
   padding-bottom: 40rpx;
 }
 
@@ -817,13 +824,13 @@ export default {
 .checkin-date {
   font-size: 32rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
 }
 
 .streak-badge {
   display: flex;
   align-items: center;
-  background: linear-gradient(135deg, #FF6B9D, #FF8CB3);
+  background: linear-gradient(135deg, $dim-mind, $dim-mind-light);
   border-radius: 30rpx;
   padding: 8rpx 24rpx;
 }
@@ -835,13 +842,13 @@ export default {
 
 .streak-text {
   font-size: 24rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: 500;
 }
 
 .section {
   margin: 20rpx 32rpx;
-  background: #fff;
+  background: $app-surface;
   border-radius: 20rpx;
   padding: 28rpx;
   box-shadow: 0 2rpx 12rpx rgba(255, 107, 157, 0.08);
@@ -850,7 +857,7 @@ export default {
 .section-title {
   font-size: 28rpx;
   font-weight: 600;
-  color: #333;
+  color: $facade-text-strong;
   margin-bottom: 20rpx;
   display: block;
 }
@@ -861,9 +868,9 @@ export default {
   width: 100%;
   /* height is set dynamically equal to width via aspect-ratio or inline style */
   aspect-ratio: 1;
-  background: linear-gradient(135deg, #FFF5F5 0%, #FFF0FF 25%, #F0F0FF 50%, #F0FFF4 75%, #FFFFF0 100%);
+  background: linear-gradient(135deg, $status-danger-tint 0%, $c-tint-magenta 25%, $dim-wisdom-tint 50%, $dim-action-tint 75%, $c-tint-cream 100%);
   border-radius: 16rpx;
-  border: 2rpx solid #E8E8E8;
+  border: 2rpx solid $c-border-grid;
   margin-bottom: 16rpx;
   /* Ensure the grid has a defined height — fallback */
   min-height: 300rpx;
@@ -945,9 +952,9 @@ export default {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background: #FF6B9D;
+  background: $dim-mind;
   box-shadow: 0 0 12rpx rgba(255, 107, 157, 0.5);
-  border: 4rpx solid #fff;
+  border: 4rpx solid $app-surface;
   box-sizing: border-box;
 }
 
@@ -959,7 +966,7 @@ export default {
 
 .affect-val {
   font-size: 24rpx;
-  color: #888;
+  color: $facade-text-faint;
 }
 
 /* ===== Plutchik 情绪轮 ===== */
@@ -977,13 +984,13 @@ export default {
   width: 130rpx;
   padding: 16rpx 8rpx;
   border-radius: 20rpx;
-  border: 3rpx solid #eee;
-  background: #FAFAFA;
-  transition: all 0.2s;
+  border: 3rpx solid $facade-fill-3;
+  background: $facade-fill-ghost;
+  transition: background 0.2s ease, transform 0.2s ease;
 }
 
 .emotion-active {
-  background: #FFF0F5;
+  background: $dim-mind-tint;
   transform: scale(1.05);
 }
 
@@ -994,7 +1001,7 @@ export default {
 
 .emotion-label {
   font-size: 24rpx;
-  color: #555;
+  color: $facade-text-deep;
 }
 
 /* ===== 滑条 ===== */
@@ -1006,7 +1013,7 @@ export default {
 
 .slider-label {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   white-space: nowrap;
   width: 64rpx;
 }
@@ -1018,14 +1025,14 @@ export default {
 .slider-value {
   font-size: 28rpx;
   font-weight: 600;
-  color: #FF6B9D;
+  color: $dim-mind;
   width: 40rpx;
   text-align: center;
 }
 
 .intensity-hint {
   font-size: 22rpx;
-  color: #aaa;
+  color: $c-text-aaa;
   text-align: center;
   margin-top: 4rpx;
 }
@@ -1040,16 +1047,16 @@ export default {
 .tag-btn {
   padding: 12rpx 28rpx;
   border-radius: 30rpx;
-  background: #F5F5F5;
+  background: $facade-fill-2;
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   border: 2rpx solid transparent;
 }
 
 .tag-active {
-  background: #FFF0F5;
-  color: #FF6B9D;
-  border-color: #FF6B9D;
+  background: $dim-mind-tint;
+  color: $dim-mind;
+  border-color: $dim-mind;
 }
 
 .custom-tag-row {
@@ -1062,7 +1069,7 @@ export default {
 .custom-tag-input {
   flex: 1;
   height: 60rpx;
-  border: 2rpx solid #E0E0E0;
+  border: 2rpx solid $c-border-input;
   border-radius: 12rpx;
   padding: 0 16rpx;
   font-size: 26rpx;
@@ -1070,8 +1077,8 @@ export default {
 
 .custom-tag-add {
   padding: 12rpx 24rpx;
-  background: #FF6B9D;
-  color: #fff;
+  background: $dim-mind;
+  color: $app-surface;
   border-radius: 12rpx;
   font-size: 26rpx;
 }
@@ -1079,7 +1086,7 @@ export default {
 .custom-tag-trigger {
   display: inline-block;
   margin-top: 16rpx;
-  color: #FF6B9D;
+  color: $dim-mind;
   font-size: 26rpx;
 }
 
@@ -1089,7 +1096,7 @@ export default {
   height: 200rpx;
   border-radius: 16rpx;
   overflow: hidden;
-  background: #F5F5F5;
+  background: $facade-fill-2;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1112,14 +1119,14 @@ export default {
 
 .photo-hint {
   font-size: 24rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 8rpx;
 }
 
 .photo-note {
   display: block;
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 12rpx;
 }
 
@@ -1133,14 +1140,14 @@ export default {
   padding: 10rpx 28rpx;
   border-radius: 30rpx;
   font-size: 26rpx;
-  color: #999;
-  background: #f5f5f5;
-  border: 2rpx solid #eee;
+  color: $facade-text-muted;
+  background: $facade-fill-2;
+  border: 2rpx solid $facade-fill-3;
 }
 .mode-btn.mode-active {
-  color: #FF6B9D;
-  background: #FFF0F5;
-  border-color: #FF6B9D;
+  color: $dim-mind;
+  background: $dim-mind-tint;
+  border-color: $dim-mind;
   font-weight: 500;
 }
 .video-preview {
@@ -1155,7 +1162,7 @@ export default {
   align-items: center;
   justify-content: center;
   padding: 20rpx;
-  background: linear-gradient(135deg, #8B5CF6, #A78BFA);
+  background: linear-gradient(135deg, $facade-violet, $facade-violet-light);
   border-radius: 16rpx;
   cursor: pointer;
 }
@@ -1167,7 +1174,7 @@ export default {
 
 .ai-btn-text {
   font-size: 26rpx;
-  color: #fff;
+  color: $app-surface;
   font-weight: 500;
 }
 
@@ -1184,7 +1191,7 @@ export default {
 
 .loading-text {
   font-size: 26rpx;
-  color: #8B5CF6;
+  color: $facade-violet;
 }
 
 .ai-result {
@@ -1193,7 +1200,7 @@ export default {
 
 .ai-result-title {
   font-size: 24rpx;
-  color: #666;
+  color: $facade-text-body;
   margin-bottom: 12rpx;
   display: block;
 }
@@ -1212,7 +1219,7 @@ export default {
 
 .ai-emotion-label {
   font-size: 24rpx;
-  color: #333;
+  color: $facade-text-strong;
   width: 64rpx;
   flex-shrink: 0;
 }
@@ -1220,7 +1227,7 @@ export default {
 .ai-emotion-bar-track {
   flex: 1;
   height: 16rpx;
-  background: #F0F0F0;
+  background: $facade-fill;
   border-radius: 8rpx;
   overflow: hidden;
 }
@@ -1233,7 +1240,7 @@ export default {
 
 .ai-emotion-value {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   width: 56rpx;
   text-align: right;
 }
@@ -1241,7 +1248,7 @@ export default {
 .ai-apply-tags {
   margin-top: 20rpx;
   padding: 16rpx;
-  background: #F5F0FF;
+  background: $facade-violet-tint;
   border-radius: 12rpx;
   text-align: center;
   cursor: pointer;
@@ -1249,7 +1256,7 @@ export default {
 
 .ai-apply-text {
   font-size: 26rpx;
-  color: #8B5CF6;
+  color: $facade-violet;
   font-weight: 500;
 }
 
@@ -1260,11 +1267,11 @@ export default {
 .note-input {
   width: 100%;
   min-height: 140rpx;
-  background: #F9F9F9;
+  background: $facade-fill-ghost-2;
   border-radius: 12rpx;
   padding: 20rpx;
   font-size: 26rpx;
-  color: #333;
+  color: $facade-text-strong;
   box-sizing: border-box;
 }
 
@@ -1278,7 +1285,7 @@ export default {
   display: flex;
   align-items: center;
   padding: 20rpx 0;
-  border-bottom: 1rpx solid #F5F5F5;
+  border-bottom: 1rpx solid $facade-fill-2;
 }
 
 .mood-item:last-child {
@@ -1299,19 +1306,19 @@ export default {
 
 .mood-label {
   font-size: 28rpx;
-  color: #333;
+  color: $facade-text-strong;
   font-weight: 500;
 }
 
 .mood-date {
   font-size: 22rpx;
-  color: #999;
+  color: $facade-text-muted;
   margin-top: 6rpx;
 }
 
 .mood-note {
   font-size: 26rpx;
-  color: #666;
+  color: $facade-text-body;
   max-width: 300rpx;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1328,8 +1335,8 @@ export default {
   width: 100%;
   height: 88rpx;
   line-height: 88rpx;
-  background: linear-gradient(135deg, #FF6B9D, #FF8CB3);
-  color: #fff;
+  background: linear-gradient(135deg, $dim-mind, $dim-mind-light);
+  color: $app-surface;
   border-radius: 44rpx;
   font-size: 30rpx;
   font-weight: 600;
@@ -1360,13 +1367,13 @@ export default {
 }
 
 .loading-box {
-  background: #fff;
+  background: $app-surface;
   padding: 40rpx 60rpx;
   border-radius: 20rpx;
 }
 
 .loading-text {
   font-size: 28rpx;
-  color: #666;
+  color: $facade-text-body;
 }
 </style>