cfc/cfc-frontend/uni.scss

/**
 * ============================================================
 * 浠艾福 (XAF) Design System — UniApp SCSS Variables
 * ============================================================
 *
 * 色彩体系: 柔和天蓝 + 珊瑚暖色 (信任专业 + 家庭温暖)
 * 风格: 极简扁平圆角 (全角色统一) 
 * Logo配色参考: #6BB9F0 (中蓝) / #D6EAF8 (浅蓝) / ❤白色心形
 * 
 * 设计原则:
 * - 扁平圆角：全端统一，无Claymorphism
 * - 蓝色为品牌色：传递信任/专业/平静
 * - 珊瑚暖色为点缀：保留"家庭温暖"和"关怀"
 * - 心形符号：品牌识别元素
 * - 减少装饰动效，聚焦内容可读性
 *
 * v3.0 — 2026-06-06
 * ============================================================
 */

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

// 主色调 - 柔和天蓝 (Logo蓝色)
$uni-primary: #5B9BD5;          // Logo中蓝 - 主品牌色
$uni-primary-light: #8FC5E8;    // 浅蓝
$uni-primary-dark: #3A7CC4;     // 深蓝
$uni-primary-pale: #D6EAF8;     // 极浅蓝 (Logo背景色)

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

// 语义色 (Semantic)
$uni-success: #4CAF50;
$uni-success-light: #81C784;
$uni-warning: #FFB74D;
$uni-warning-light: #FFD54F;
$uni-error: #EF5350;
$uni-error-light: #E57373;
$uni-info: #5B9BD5;             // 复用了品牌蓝

// 中性色 (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(91, 155, 213, 0.06);
$uni-shadow-md: 0 4rpx 16rpx rgba(91, 155, 213, 0.08);
$uni-shadow-lg: 0 8rpx 32rpx rgba(91, 155, 213, 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 {
  // 品牌色
  --color-primary: #5B9BD5;
  --color-primary-light: #8FC5E8;
  --color-primary-dark: #3A7CC4;
  --color-primary-pale: #D6EAF8;
  --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;

  // 阴影 — 极简风格
  --shadow-sm: 0 1px 4px rgba(91, 155, 213, 0.06);
  --shadow-md: 0 2px 8px rgba(91, 155, 213, 0.08);
  --shadow-lg: 0 4px 16px rgba(91, 155, 213, 0.10);
}

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

// --- 文字色彩 ---
.text-primary { color: $uni-primary; }
.text-warm { color: $uni-warm; }
.text-success { color: $uni-success; }
.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-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;

// 维度浅底（不透明 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-tint:    #FEF2F2;  // 危险态极浅底
$status-warning-deep:   #D97706;  // 警示态文字
$status-success-deep:   #059669;  // 成功态文字
$status-success-text:   #16A34A;  // 成功态文字（green-600）

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