cfc/cfc-frontend/uni.scss

/**
 * ============================================================
 * 浠艾福 (XAF) Design System — UniApp SCSS Variables
 * ============================================================
 *
 * 色彩体系: 品牌橙 + 珊瑚暖色 (活力关怀 + 家庭温暖)
 * 风格: 极简扁平圆角 (全角色统一)
 * Logo配色参考: #6BB9F0 (中蓝) / #D6EAF8 (浅蓝) / ❤白色心形
 *
 * 设计原则:
 * - 扁平圆角：全端统一，无Claymorphism
 * - 品牌橙 #F97316 为主色：与 pages.json tabBar.selectedColor 一致（线上真值）
 * - 珊瑚暖色为点缀：保留"家庭温暖"和"关怀"
 * - 心形符号：品牌识别元素
 * - 减少装饰动效，聚焦内容可读性
 *
 * v3.1 — 2026-10-18 品牌令牌收敛：$uni-primary 系由旧蓝 #5B9BD5 翻转为品牌橙
 *        （旧蓝与 tabBar.selectedColor / 线上实际主色不一致，详见 §12 背景说明）
 * v3.2 — 2026-10-18 维度生态共享令牌：新增 §16（B 批 mind-detail 15 兄弟页收敛）
 * ============================================================
 */

// ============================================================
// 1. 品牌色彩 (Brand Colors)
// ============================================================

// 主色调 - 品牌橙（2026-10 令牌收敛：原 #5B9BD5 旧蓝与线上实际主色不一致，已翻转；
// 现值与 $brand-primary / tabBar.selectedColor 三方一致，见 §12）
$uni-primary: #F97316;          // 品牌主色
$uni-primary-light: #FB923C;    // 浅橙
$uni-primary-dark: #EA580C;     // 深橙
$uni-primary-pale: #FFF7ED;     // 极浅橙 (品牌淡底)

// 辅助暖色 - 珊瑚粉 (家庭温暖)
$uni-warm: #F08A7A;             // 心形暖色 - 保留"关爱"感
$uni-warm-light: #F4B0A5;
$uni-warm-dark: #E06A58;

// 语义色 (Semantic)
// ---- Material 兜底色板族（全库 ≥2 页复用的 Material 值，统一一套命名：色相 × 档位）----
// 档位约定：tint 极浅底 / light 亮档（渐变伴生）/ base 主色 / strong 深文字
// 绿（成功 / 健康 / 选中态）
$mat-green:        #4CAF50; // green-500 主色（33 文件；原 $uni-success）
$mat-green-light:  #81C784; // green-300 亮档（5 文件；原 $uni-success-light）
$mat-green-light-2:#66BB6A; // green-400 亮档·副档（5 文件；同渐变族不同档）
$mat-green-tint:   #E8F5E9; // green-50 极浅底（38 文件）
$mat-green-strong: #2E7D32; // green-800 深文字（25 文件）
$mat-green-base-2:  #43A047; // green-600 深主色（5 文件；vs $mat-green #4CAF50 green-500）
// 琥珀（警示 / 提示 / 选中浅底）
$mat-amber-tint:   #FFF8E1; // amber-50 极浅底（14 文件）
$mat-amber-strong: #F57F17; // amber-800 深文字（6 文件；vs $status-warning-strong #92400E 同角色不同值）
// 橙（警示文字）
$mat-orange-strong:#E65100; // orange-900 深文字（24 文件）
// 蓝（信息态）
$mat-blue-tint:    #E3F2FD; // blue-50 极浅底（29 文件）
$mat-blue-light:   #BBDEFB; // blue-100 浅档（4 文件）
$mat-blue-light-2: #64B5F6; // blue-300 亮档·副档（1 文件）
$mat-blue-strong:  #1565C0; // blue-800 深文字（17 文件）

$uni-warning: #FFB74D;
$uni-warning-light: #FFD54F;
$uni-error: #EF5350;
$uni-error-light: #E57373;
$uni-info: #0EA5E9;             // 信息蓝（2026-10 起独立于品牌色，不再复用主色）

// 中性色 (Neutral) — 冷调中性，匹配蓝色系
$uni-bg-color: #F5F9FC;        // 极浅蓝灰背景
$uni-bg-color-grey: #EDF2F7;   // 浅灰蓝
$uni-bg-color-dark: #E2E8F0;   // 灰蓝
$uni-surface: #FFFFFF;          // 卡片/表面
$uni-border-color: #CBD5E1;    // 冷灰边框
$uni-border-color-light: #E2E8F0;
$uni-text-color: #1E293B;      // 深蓝灰 (正文)
$uni-text-color-secondary: #64748B; // 次要文字
$uni-text-color-grey: #94A3B8; // 灰色文字
$uni-text-color-placeholder: #94A3B8;
$uni-text-color-inverse: #FFFFFF;

// ============================================================
// 2. 字体系统 (Typography)
// ============================================================

// 字体栈 - 小程序不支持自定义字体
$uni-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
  'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
  'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;

$uni-font-family-display: $uni-font-family;
$uni-font-family-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

// 字号
$uni-font-size-xs: 20rpx;
$uni-font-size-sm: 24rpx;
$uni-font-size-base: 28rpx;
$uni-font-size-lg: 32rpx;
$uni-font-size-xl: 36rpx;
$uni-font-size-2xl: 44rpx;
$uni-font-size-3xl: 52rpx;

// 字重
$uni-font-weight-normal: 400;
$uni-font-weight-medium: 500;
$uni-font-weight-bold: 600;
$uni-font-weight-black: 700;

// ============================================================
// 3. 间距系统 (Spacing)
// ============================================================

$uni-spacing-xs: 8rpx;
$uni-spacing-sm: 16rpx;
$uni-spacing-md: 24rpx;
$uni-spacing-lg: 32rpx;
$uni-spacing-xl: 48rpx;
$uni-spacing-2xl: 64rpx;

$uni-page-padding: 32rpx;

// ============================================================
// 4. 圆角 (Border Radius)
// ============================================================

$uni-radius-sm: 10rpx;
$uni-radius-md: 16rpx;
$uni-radius-lg: 24rpx;
$uni-radius-xl: 32rpx;
$uni-radius-full: 50%;
$uni-radius-round: 9999rpx;

// ============================================================
// 5. 阴影 (Shadows) — 极简风格，轻微阴影
// ============================================================

$uni-shadow-sm: 0 2rpx 8rpx rgba(249, 115, 22, 0.06);
$uni-shadow-md: 0 4rpx 16rpx rgba(249, 115, 22, 0.08);
$uni-shadow-lg: 0 8rpx 32rpx rgba(249, 115, 22, 0.10);
$uni-shadow-inner: inset 0 1rpx 4rpx rgba(0, 0, 0, 0.04);

// ============================================================
// 6. 动画 (Animations) — 节制使用
// ============================================================

$uni-transition-fast: 0.15s ease;
$uni-transition-base: 0.25s ease;
$uni-transition-slow: 0.3s ease;

// ============================================================
// 7. CSS 自定义属性
// ============================================================

:root {
  // 品牌色（2026-10 由旧蓝 #5B9BD5 系翻转为品牌橙，与 §1 SCSS 变量同值；
  // 注意 mp-weixin 对 :root 支持不稳，页面实际渲染以各处 var() 兜底值为准）
  --color-primary: #F97316;
  --color-primary-light: #FB923C;
  --color-primary-dark: #EA580C;
  --color-primary-pale: #FFF7ED;
  --color-warm: #F08A7A;
  --color-warm-light: #F4B0A5;

  // 语义色
  --color-success: #4CAF50;
  --color-warning: #FFB74D;
  --color-error: #EF5350;

  // 中性色
  --bg: #F5F9FC;
  --bg-grey: #EDF2F7;
  --surface: #FFFFFF;
  --text: #1E293B;
  --text-secondary: #64748B;
  --muted: #94A3B8;
  --border: #CBD5E1;
  --border-light: #E2E8F0;

  // 间距
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-page: 16px;

  // 圆角
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  // 阴影 — 极简风格（色调随品牌色翻转为橙，2026-10）
  --shadow-sm: 0 1px 4px rgba(249, 115, 22, 0.06);
  --shadow-md: 0 2px 8px rgba(249, 115, 22, 0.08);
  --shadow-lg: 0 4px 16px rgba(249, 115, 22, 0.10);
}

// ============================================================
// 8. 实用工具类
// ============================================================

// --- 文字色彩 ---
.text-primary { color: $uni-primary; }
.text-warm { color: $uni-warm; }
.text-success { color: $mat-green; }
.text-warning { color: $uni-warning; }
.text-error { color: $uni-error; }
.text-muted { color: $uni-text-color-grey; }
.text-secondary { color: $uni-text-color-secondary; }
.text-bold { font-weight: $uni-font-weight-bold; }
.text-black { font-weight: $uni-font-weight-black; }
.text-center { text-align: center; }
// 正文工具类跟随用户字号系数（--font-scale）；使用方式：在根节点 :style="{ '--font-scale': fontScale }"
.text-sm { font-size: calc($uni-font-size-sm * var(--font-scale, 1)); }
.text-base { font-size: calc($uni-font-size-base * var(--font-scale, 1)); }
.text-lg { font-size: calc($uni-font-size-lg * var(--font-scale, 1)); }
.text-xl { font-size: calc($uni-font-size-xl * var(--font-scale, 1)); }
.text-2xl { font-size: calc($uni-font-size-2xl * var(--font-scale, 1)); }
.text-3xl { font-size: calc($uni-font-size-3xl * var(--font-scale, 1)); }

// --- 背景 ---
.bg-primary { background-color: $uni-primary; }
.bg-warm { background-color: $uni-warm; }
.bg-surface { background-color: $uni-surface; }
.bg-page { background-color: $uni-bg-color; }

// --- 圆角 ---
.radius-sm { border-radius: $uni-radius-sm; }
.radius-md { border-radius: $uni-radius-md; }
.radius-lg { border-radius: $uni-radius-lg; }
.radius-xl { border-radius: $uni-radius-xl; }

// --- 弹性布局 ---
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.gap-xs { gap: $uni-spacing-xs; }
.gap-sm { gap: $uni-spacing-sm; }
.gap-md { gap: $uni-spacing-md; }
.gap-lg { gap: $uni-spacing-lg; }

// --- 间距 ---
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.p-sm { padding: $uni-spacing-sm; }
.p-md { padding: $uni-spacing-md; }
.p-lg { padding: $uni-spacing-lg; }
.mt-sm { margin-top: $uni-spacing-sm; }
.mt-md { margin-top: $uni-spacing-md; }
.mt-lg { margin-top: $uni-spacing-lg; }
.mb-sm { margin-bottom: $uni-spacing-sm; }
.mb-md { margin-bottom: $uni-spacing-md; }
.mb-lg { margin-bottom: $uni-spacing-lg; }

// --- 其他 ---
.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// ============================================================
// 9. 扁平圆角卡片 (Flat Rounded Card) — 全端统一风格
// ============================================================

@mixin flat-card($border-color: $uni-border-color-light) {
  border-radius: $uni-radius-md;
  background: $uni-surface;
  border: 1rpx solid $border-color;
  box-shadow: $uni-shadow-sm;
}

@mixin flat-button($bg-color: $uni-primary) {
  border-radius: $uni-radius-lg;
  background: $bg-color;
  color: #FFFFFF;
  border: none;
  transition: opacity $uni-transition-fast;

  &:active {
    opacity: 0.85;
  }
}

.flat-card {
  @include flat-card;
}

// ============================================================
// 10. 关键帧动画（精简）
// ============================================================

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes pulseSoft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

// 动画实用类
.animate-fade-in { animation: fadeIn $uni-transition-base both; }
.animate-slide-up { animation: slideUp $uni-transition-slow both; }
.animate-scale-in { animation: scaleIn $uni-transition-slow both; }
.animate-pulse-soft { animation: pulseSoft 3s ease-in-out infinite; }

// 交错入场
@for $i from 1 through 20 {
  .animate-stagger-#{$i} {
    animation-delay: #{$i * 60}ms;
  }
}

// ============================================================
// 11. 骨架屏
// ============================================================

@mixin skeleton {
  background: linear-gradient(
    90deg,
    $uni-border-color-light 25%,
    #F5F9FC 50%,
    $uni-border-color-light 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: $uni-radius-sm;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton { @include skeleton; }
.skeleton-text {
  @include skeleton;
  height: 28rpx;
  margin-bottom: 12rpx;
}
.skeleton-block {
  @include skeleton;
  height: 160rpx;
}


// ============================================================
// 12. 五维 + 品牌运行时令牌（对齐真实线上视觉）
// ============================================================
// 背景：原 $uni-primary(#5B9BD5 蓝) 与线上实际主色不一致，且五维色长期硬编码在页面里。
// 本段补齐「真实在用」的语义令牌；页面改用这些名字，避免逐个硬编码。
// 注意：mp-weixin 对 CSS var(--x) 运行时解析不稳定，故统一用 SCSS 变量（编译期内联，零运行时风险）。

// 品牌主色 —— 与 pages.json tabBar.selectedColor 一致
$brand-primary: #F97316;
$brand-primary-dark: #EA580C;
$brand-primary-soft: rgba(249, 115, 22, 0.12);

// 五维身份色：页面 PageBanner / 分段左条 / CTA / 价值卡浅底统一取用
$dim-body:   #FF8C42;
$dim-mind:   #FF6B9D;
$dim-wisdom: #6366F1;
$dim-action: #10B981;
$dim-wealth: #F59E0B;

$dim-body-soft:   rgba(255, 140, 66, 0.15);
$dim-mind-soft:   rgba(255, 107, 157, 0.15);
$dim-wisdom-soft: rgba(99, 102, 241, 0.15);
$dim-action-soft: rgba(16, 185, 129, 0.15);
$dim-wealth-soft: rgba(245, 158, 11, 0.15);

// 语义角色（与应用真实观感一致）
$app-bg:             #F5F7FA;
$app-bg-2:           #f5f6fa; // 浅灰蓝底·副档（3 文件；vs $app-bg #F5F7FA）
$app-surface:        #FFFFFF;
$app-surface-subtle: #F7F8FA;
$app-text:           #17181C;
$app-text-secondary: #606875;
$app-text-muted:     #8A94A3;
$app-border-subtle:  #E7EBF0;
$app-border:         #CBD5E1;

// 状态：按压/禁用用透明度与语言表达，不新增多套颜色
$press-opacity:    0.85;
$disabled-opacity: 0.45;

// 动效令牌：只声明稳定属性，禁止 transition: all
$ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
$dur-press:      0.12s;
$dur-state:      0.2s;
$dur-structural: 0.26s;

// 可复用 mixin
@mixin dim-card($radius: $uni-radius-md) {
  background: $app-surface;
  border-radius: $radius;
  box-shadow: $uni-shadow-sm;
}

@mixin press-scale {
  transition: opacity $dur-press $ease-standard, transform $dur-press $ease-standard;
  &:active { opacity: $press-opacity; }
}

@mixin touch-target($size: 88rpx) {
  min-height: $size;
  min-width: $size;
}


// ============================================================
// 13. 状态色阶 / 品牌亮阶 / 维度浅底
// ============================================================
// 状态色只用于传达状态，禁止当装饰使用；浅底为不透明 tint，用于卡片与分区背景。

// 状态色阶
$status-success:        #10B981;
$status-success-soft:   #D1FAE5;
$status-success-strong: #065F46;
$status-warning:        #FBBF24;
$status-warning-soft:   #FEF3C7;
$status-warning-strong: #92400E;
$status-danger:         #EF4444;
$status-danger-soft:    #FEE2E2;
$status-danger-strong:  #B91C1C;

// 品牌橙亮阶（渐变/高亮用）
$brand-primary-light:   #FB923C;
$brand-primary-light-2: #FED7AA; // 品牌橙浅档 orange-200（29 文件；vs $brand-primary-light #FB923C orange-400）

// 维度浅底（不透明 tint）
$dim-body-tint:   #FFF8F0;
$dim-mind-tint:   #FFF0F5;
$dim-wisdom-tint: #F0F0FF;
$dim-action-tint: #F0FFF4;
$dim-wealth-tint: #FFFBEB;

// 边框与文字的次级阶
$app-border-strong: #D1D5DB;
$app-text-subtle:   #94A3B8;


// ============================================================
// 14. 状态深阶 / 品牌深阶（收尾：跨页共性）
// ============================================================
// -deep 为色板 600 档，用于状态文字与强调；-tint 为极浅底。
// 仅收录在 2 个及以上页面中复用的色值，单页专有色阶由页面级局部变量承载。

// 状态深阶（文字 / 强调）
$status-danger-deep:    #DC2626;  // 危险态文字：较差 / 已过期
$status-danger-flat:  #E74C3C; // flat 红·危档（2 文件；vs $status-danger #EF4444）
$status-warning-deep:   #D97706;  // 警示态文字
$status-success-deep:   #059669;  // 成功态文字
$status-success-text:   #16A34A;  // 成功态文字（green-600）

// 品牌 / 身 深阶文字
$brand-primary-deep:    #C2410C;


// ============================================================
// 15. 共享门面令牌（A 批 6 个门面页收敛，2026-10-18）
// ============================================================
// 来源：index-home / health-main / profile-main / growth-main / cognitive-hall /
// service-center 六页原页面级局部调色板中跨页复用（≥2 页同值）的变量。
// 命名：$facade- 前缀与页面局部 $c- 完全隔离，永不同名冲突。
// 同名不同值的处理：$c-text-ghost 曾一页 #BBB / 四页 #CCC，拆为
// $facade-text-ghost(#CCC) 与 $facade-text-ghost-light(#BBB) 两档，保零观感变化。
// $c-text-slate-2 曾 #6B7280×2 / #64748B×1：仅提升 #6B7280 为 $facade-text-slate，
// #64748B 为单页专有色，留在页面局部。
// 各页单页专有色阶（维度深/浅阶、Material/Element/Ant 状态色等）仍由页面级局部变量承载。

// 文字阶（6 页门面共用）
$facade-text-muted:       #999;    // 次要文字（6 页复用）
$facade-text-body:        #666;    // 正文灰（5 页复用）
$facade-text-faint:       #888;    // 弱文字（5 页复用）
$facade-text-strong:      #333;    // 强文字（4 页复用）
$facade-text-ghost:       #CCC;    // 幽灵灰（4 页复用）
$facade-text-ghost-light: #BBB;    // 幽灵灰浅档（index-home + cognitive-hall）
$facade-text-deep:        #555;    // 深灰文字（health-main + growth-main）
$facade-text-slate:       #6B7280; // gray-500（health-main + profile-main）

// 填充阶
$facade-fill:             #F0F0F0; // 占位/分隔（4 页复用）
$facade-fill-2:           #F5F5F5; // 浅灰填充（index-home + growth-main）
$facade-fill-cool:        #F7F7F7; // 冷灰填充（health-main + growth-main）
$facade-fill-warm-gray:   #F8F4EF; // 暖灰填充（profile-main + service-center）

// 品牌淡底（orange-50/100）
$facade-brand-tint:       #FFF7ED; // 品牌极浅底（4 页复用）
$facade-brand-tint-2:     #FFEDD5; // 品牌浅底（index-home + growth-main）

// 维度共用色
$facade-violet:           #8B5CF6; // violet-500（index-home + cognitive-hall + service-center）

// ============================================================
// 16. 维度生态共享令牌（B 批 mind-detail 15 兄弟页收敛，2026-10-18）
// ============================================================
// 来源：mind-detail 生态（index.vue 除外，其已全令牌化）15 个兄弟文件
// （articles / duo-compatibility / emotion-checkin / emotion-report / emotion-trend /
//  family-dashboard / innate-portrait / innate-trajectory / member-mind-detail /
//  screening / soothe-toolbox / traditional-mirror / training +
//  components/FamilyTianpanCard / components/PsychCrisisBanner）。
// 收敛规则同 §14：≥2 页同值进全局；同名不同值拆双档；单页专有留 $c- 局部。

// ---- 心理（mind）维度专有族 ----
$dim-mind-light:   #FF8CB3;  // mind 亮粉·渐变端（emotion-checkin + emotion-trend）
$dim-mind-light-2: #FF8FB1;  // mind 亮粉·副档（FamilyTianpanCard + family-dashboard，同角色不同值）
$dim-mind-tint-2:  #FFF0F3;  // mind 粉浅底·副档（vs $dim-mind-tint #FFF0F5；FamilyTianpanCard + family-dashboard）
$mind-accent:      #FF6B35;  // 情绪/成就强调橙（emotion-report + member-mind-detail + index.vue 的 $c-accent 同值）

// ---- 智慧（wisdom）维度专有档（B-3 wisdom-detail 生态收敛时登记）----
$dim-wisdom-light: #818CF8; // wisdom 亮档 indigo-400（12 文件；渐变端）
$dim-wisdom-deep:  #4F46E5; // wisdom 深档 indigo-600（6 文件；渐变尾；vs $dim-wisdom #6366F1 indigo-500）
$dim-wisdom-ink:   #3730A3; // wisdom 极深文字 indigo-800（3 文件）
$dim-wisdom-tint-2:#EEF2FF; // wisdom 浅底·副档 indigo-50（8 文件；vs $dim-wisdom-tint #F0F0FF）
$dim-wisdom-tint-3:#F0F4FF; // wisdom 浅底·三档 indigo-50 邻档（7 文件）
$dim-wisdom-tint-4:#F8F9FF; // wisdom 浅底·四档 indigo 极浅（2 文件）
$dim-wisdom-tint-5:#F9F9FF; // wisdom 浅底·五档 indigo 极浅邻档（4 文件）

// ---- 身体（body）维度伴生档（B-2 body-detail 生态收敛时登记）----
$dim-body-light: #FFB366;  // body 亮档（diet/discover/health 等 10 文件；vs $dim-body #FF8C42）
$tint-warm-soft: #FFF1E6;  // 暖白浅底（diet 4 + health + body-detail index）
$tint-warm-edge: #FFE4CC;  // 暖色渐变缘（ai/chat + body-detail index）

// ---- violet 伴生档（$facade-violet 的亮阶与浅底）----
$facade-violet-light: #A78BFA; // violet-400（duo-compatibility + emotion-checkin + member-mind-detail）
$facade-violet-tint:  #F5F0FF; // violet 浅底（emotion-checkin + innate-portrait + traditional-mirror）
$facade-violet-deep:  #7C3AED; // violet-600 深档（mind-detail index + tianpan/wishes 等 10 文件；vs $facade-violet #8B5CF6 violet-500）
$facade-violet-light-2: #A855F7; // violet 亮档·副档（mind-detail index + membership/upgrade 渐变伴生；vs $facade-violet-light #A78BFA）
$facade-violet-tint-2: #F5F3FF; // violet-50 浅底（mind-detail index + growth/index-home 等 6 文件；vs $facade-violet-tint #F5F0FF）
$tint-purple-soft:    #F3E8FF; // purple-100 浅底（mind-detail index + stats；紫色系浅底补档）

// ---- 文字补档 ----
$facade-text-deep-2:  #444;    // 深灰文字·副档（vs $facade-text-deep #555；innate-portrait + innate-trajectory + screening）

// ---- tailwind gray 阶（全库高频复用，B 批 family-dashboard 收敛时登记）----
$facade-fill-gray-50:  #F9FAFB; // gray-50 页面浅灰底（6 文件）
$facade-fill-gray-100: #F3F4F6; // gray-100 发丝分隔/浅填充（13 文件）
$facade-gray-200:      #E5E7EB; // gray-200 填充/描边兼用（18 文件）
$facade-text-gray-400: #9CA3AF; // gray-400 弱文字（18 文件）
$facade-text-gray-700: #374151; // gray-700 深文字（12 文件）

// ---- 运势五级 ramp（mind-detail index + FamilyTianpanCard 共用，Material 色系）----
$fortune-0-ink:  #D32F2F;  // 大凶（red-700）
$fortune-0-tint: #FFEBEE;  // red-50
$fortune-1-ink:  #E65100;  // 凶（orange-900）
$fortune-1-tint: #FFF3E0;  // orange-50
$fortune-2-ink:  #F9A825;  // 平（yellow-800）
$fortune-2-tint: #FFFDE7;  // yellow-50
$fortune-3-ink:  #7B1FA2;  // 吉（purple-700）
$fortune-3-tint: #F3E5F5;  // purple-50
$fortune-4-ink:  #B71C1C;  // 大吉（red-900）
$fortune-4-tint: #FFCDD2;  // red-100

// ---- 洞察文案 ----
$mind-insight-ink: #8B6914; // 洞察/宜忌文案棕金（mind-detail index + FamilyTianpanCard）

// ---- 全库高频补档（B 批 emotion-report 收敛时登记）----
$accent-gold:          #FFD700; // 金（14 文件）
$accent-gold-deep:     #FFA500; // 金渐变伴生深档（9 文件；vs $accent-gold #FFD700 主档）
$status-success-tint:  #ECFDF5; // emerald-50（11 文件；vs $status-success-soft #D1FAE5 深档）
$status-info-tint:     #EFF6FF; // blue-50（3 文件）
$status-danger-tint-2: #FEF2F2; // tailwind red-50（11 文件；vs $status-danger-tint #FFF5F5 自定义浅档）
$facade-border-soft:   #DDD;    // 描边灰（46 文件）
$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 文件）
$accent-navy:        #1E3A5F; // 深海军蓝渐变主色（4 文件；评分卡/引导条渐变）
$tint-info-soft:     #E8F4FD; // 信息蓝浅底（article-edit + articles）
$hint-cream-bg:      #FEF9E7; // 提示条奶油底（articles + shop/index）
$hint-cream-border:  #F0E6C0; // 提示条奶油描边（articles + shop/index）
$hint-gold-ink:      #B8860B; // 提示条金褐文字（8 文件）
$facade-fill-page:   #F8F8F8; // 页面灰底（33 文件；health-main 原 $c-fill-warm 同值收敛于此）

// ---- 状态色渐变阶（B 批 soothe-toolbox 收敛时登记）----
$status-success-tint-2: #F0FDF4; // green-50（13 文件；vs $status-success-tint #ECFDF5）
$status-success-light:  #A7F3D0; // green-200 薄荷渐变浅档（2 文件）
$status-success-light-2:#6EE7B7; // green-300 薄荷渐变深档（3 文件）
$status-warning-light:  #FDE68A; // amber-200（11 文件；vs $status-warning-soft #FEF3C7）
$tint-sky-soft:         #F0F9FF; // sky-50 浅蓝底（7 文件）
$status-info-deep:      #2563EB; // blue-600 深信息蓝（9 文件；vs $status-info #3B82F6）
$app-ink-night-2:       #16213E; // 深夜蓝黑·中档（13 文件）
$app-ink-night-3:       #0F3460; // 深夜蓝黑·深档（2 文件）

// ---- 状态色补档（与 §13 既有令牌同角色不同值，拆档保零观感）----
$status-info:        #3B82F6; // 信息蓝（vs $uni-info #0EA5E9；PsychCrisisBanner + emotion-report + emotion-trend + soothe-toolbox）
$status-danger-tint: #FFF5F5; // red-50 浅底（vs $status-danger-soft #FEE2E2；PsychCrisisBanner + emotion-checkin + screening）
$status-warning-2:   #F59E0B; // amber-500 警示主色·副档（vs $status-warning #FBBF24 amber-400；PsychCrisisBanner + action-detail/ai 等 8+ 文件）
$status-warning-tint:#FFFBEB; // amber-50 警示极浅底（vs $status-warning-soft #FEF3C7 amber-100；PsychCrisisBanner + action-detail/wealth 等 8+ 文件）

// ---- 填充补档（$facade-fill 系的加深/暖色/近白档）----
$facade-fill-3:        #EEEEEE;  // 灰填充·深（vs $facade-fill #F0F0F0；articles + emotion-checkin + training）
$facade-fill-warm-tint:#F8F6F0;  // 暖灰浅底（vs $facade-fill-warm-gray #F8F4EF；duo-compatibility + innate-portrait + innate-trajectory + traditional-mirror）
$facade-fill-ghost:    #FAFAFA;  // 近白填充（duo-compatibility + emotion-checkin + screening）
$facade-fill-ghost-2:  #F9F9F9;  // 近白填充·副档（emotion-checkin + emotion-report + soothe-toolbox，同角色不同值）

// ---- 旧蓝族（C-2 待翻转：原值令牌化保零观感，翻转移交 C-2 角色分流）----
$brand-legacy-blue:      #4A9BD7; // 旧蓝主色（16 文件；dimension-detail 渐变起点/百分位/序号徽章）
$brand-legacy-blue-light:#63B3ED; // 旧蓝亮档（2 文件；旧蓝渐变终点伴生）
$brand-legacy-blue-tint: #F5FAFE; // 旧蓝极浅底（22 文件；旧蓝系页面浅底）
$brand-legacy-blue-select:#F0F8FF; // 旧蓝 select 浅底（旧蓝族选中态档；C-2 待翻转）
$facade-fill-4:        #E8E8E8; // 灰填充·深档（4 文件；vs $facade-fill-3 #EEEEEE）
$status-danger-strong-2: #C62828; // red-800 深文字（16 文件；vs $status-danger-strong #B91C1C red-700）
$status-info-soft:    #DBEAFE; // blue-100 信息浅档（15 文件；vs $status-info-tint #EFF6FF blue-50）
$facade-hairline:     #E0E0E0; // 浅灰描边（26 文件高频）
$facade-hairline-2:   #EEE;    // 边框/分隔灰·副档（41 文件；vs $facade-hairline #E0E0E0 深档）
$status-success-soft-2: #DCFCE7; // green-100 浅档（15 文件；vs $status-success-soft #D1FAE5 emerald-100）
$status-success-strong-2: #16A34A; // green-600 深文字（21 文件；vs $status-success-strong #065F46 emerald-800）
$status-success-2:   #22C55E; // green-500 成功主色·副档（13 文件；vs $status-success #10B981 emerald-500）
$status-success-light-3: #34D399; // emerald-400 成功亮档·三档（20 文件；vs $status-success-light #A7F3D0 / -light-2 #6EE7B7）
$status-info-light:    #38BDF8; // sky-400 信息亮档（3 文件；vs $status-info #3B82F6 blue-500）
$status-info-deep-2:   #0284C7; // sky-600 信息深文字·副档（4 文件；vs $status-info-deep #2563EB blue-600）
$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）
// ---- antd 色补档（wealth 子链收敛时登记）----
$status-success-3:      #52C41A; // antd green-500 成功主色·三档（12 文件；vs $status-success #10B981 / -2 #22C55E）
$status-success-tint-3: #F6FFED; // antd green-1 成功极浅底·三档（8 文件）
$status-danger-tint-3:  #FFF1F0; // antd red-1 危险浅底·三档（3 文件）
$status-warning-strong-2: #B45309; // amber-700 警示深文字·副档（9 文件；vs $status-warning-strong #92400E amber-800）
$status-info-3:       #1890FF; // antd blue-500 信息主色·三档（6 文件；vs $status-info #3B82F6）
$status-info-tint-3:  #E6F7FF; // antd blue-1 信息浅底·三档（5 文件）
$brand-primary-2:     #FA8C16; // 品牌橙·副档 antd orange（4 文件；vs $brand-primary #F97316）
$brand-primary-tint-2:#FFF7E6; // 品牌橙浅底·副档 antd orange-1（15 文件；vs $uni-primary-pale #FFF7ED）