fitness-coach/miniprogram/app.wxss

/* ===== Lucide 子集 iconfont（动态生成，font-family: fc-icon） ===== */
@font-face {
  font-family: "fc-icon";
  src: url('assets/fonts/fc-icon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* ===== FITCOACH 设计系统：动能暗色（Kinetic Dark） =====
   强调色 accent = Volt 荧光绿 #B6F24E（用户拍板）。
   为兼容现有页面对 --gold/--teal 等变量名的引用，保留变量名、改其色值为新调色板；
   并补全套语义色/字号/间距/圆角/阴影/动效 Token（真源 design-system/design-tokens.json）。 */
page {
  /* —— 颜色 —— */
  --bg: #0B0F0E;                                   /* 页面背景（冷中性近黑） */
  --bg-grad: radial-gradient(120% 80% at 50% 0%, rgba(17,23,20,0) 0%, #0B0F0E 60%);
  --surface: #141A18;                              /* 卡片/容器 */
  --surface-2: #1C2421;                            /* 次级表面 chip/输入/选中 */
  --surface-warm: #1A211E;                         /* 悬浮/高亮表面 */

  --text: #ECF1EF;                                 /* 主文本 */
  --text-2: #9BA7A1;                               /* 次级文本 */
  --text-3: #6B7670;                               /* 三级/元数据（仅 ≥24rpx） */

  --line: rgba(255,255,255,0.08);                  /* 默认边框/分隔线 */
  --border-strong: rgba(255,255,255,0.14);         /* 强调边框（选中态） */
  --border-soft: rgba(255,255,255,0.05);           /* 内部行分隔 */

  /* 强调色（原 --gold 命名保留以兼容引用，值改为 Volt 绿） */
  --gold: #B6F24E;                                 /* accent 主色 */
  --gold-2: #C7F56E;                               /* accent hover */
  --gold-soft: rgba(182,242,78,0.12);              /* accent 淡底 */
  --gold-line: rgba(182,242,78,0.28);              /* accent 边框 */
  --teal: #2BD9A6;                                 /* success（原语义） */

  /* 语义色（新增） */
  --accent: #B6F24E;
  --accent-hover: #C7F56E;
  --accent-active: #9EDB3A;
  --accent-on: #0E1A05;                            /* accent 背景上的前景（深绿，对比>7:1） */
  --accent-soft: rgba(182,242,78,0.12);
  --accent-ring: rgba(182,242,78,0.38);
  --success: #2BD9A6;
  --success-on: #04201A;
  --success-soft: rgba(43,217,166,0.12);
  --warn: #F2B53D;
  --danger: #FF5C5C;                               /* 替代旧 #E5544B */
  --danger-soft: rgba(255,92,92,0.12);
  --info: #4FA8FF;
  --bar-bg: rgba(11,15,14,0.92);                     /* 底部操作条毛玻璃底（=bg 带透明） */
  --float-bg: rgba(11,15,14,0.55);                   /* 浮动按钮底 */
  --scrim: rgba(0,0,0,0.5);                          /* 弹层遮罩 */

  /* 字体三族（含中文） */
  --font-display: 'Manrope', 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif;
  --font-body: 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* 字号阶梯（rpx，22–72） */
  --fs-xs: 22rpx; --fs-sm: 24rpx; --fs-base: 28rpx; --fs-md: 30rpx;
  --fs-lg: 32rpx; --fs-xl: 36rpx; --fs-2xl: 44rpx; --fs-3xl: 56rpx; --fs-4xl: 72rpx;

  /* 字重 / 字距 */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --ls-eyebrow: 0.08em; --ls-title: -0.02em; --ls-body: 0;

  /* 间距尺度（4px 网格） */
  --sp-1: 8rpx; --sp-2: 16rpx; --sp-3: 24rpx; --sp-4: 32rpx; --sp-5: 40rpx;
  --sp-6: 48rpx; --sp-8: 64rpx; --sp-10: 80rpx; --sp-12: 96rpx; --sp-16: 128rpx;

  /* 圆角（收紧） */
  --radius-sm: 16rpx; --radius: 24rpx; --radius-md: 24rpx;
  --radius-lg: 32rpx; --radius-xl: 40rpx; --radius-pill: 9999rpx;

  /* 阴影（Hairline First：默认无阴影，靠发丝边框） */
  --shadow: none;
  --shadow-ring: 0 0 0 1rpx rgba(255,255,255,0.08);
  --shadow-raised: 0 8rpx 24rpx rgba(0,0,0,0.32);
  --shadow-float: 0 12rpx 40rpx rgba(0,0,0,0.45);
  --shadow-glow: 0 8rpx 24rpx rgba(182,242,78,0.28);   /* 唯一允许的彩色阴影：CTA */
  --focus-ring: 0 0 0 3rpx rgba(182,242,78,0.45);

  /* 动效 */
  --motion-fast: 150ms; --motion-base: 200ms; --motion-slow: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
}

view, text, scroll-view, image, input, textarea, button {
  box-sizing: border-box;
}

/* ===== 通用工具类 ===== */
.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  color: var(--accent);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}

.section { padding: var(--sp-5) var(--sp-4); }
.section + .section { border-top: 1rpx solid var(--line); }

.card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1rpx solid var(--line);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 10rpx 24rpx;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-sm);
  border: 1rpx solid var(--line);
}

.gold-text { color: var(--gold); }
.muted { color: var(--text-2); }
.row { display: flex; flex-direction: row; align-items: center; }
.col { display: flex; flex-direction: column; }

.empty {
  color: var(--text-3);
  font-size: var(--fs-sm);
  text-align: center;
  padding: 80rpx 0;
}

.tag {
  font-size: 20rpx;
  color: var(--text-2);
  background: var(--surface-2);
  padding: 4rpx 12rpx;
  border-radius: var(--radius-pill);
}
.tag--gold {
  color: var(--gold-2);
  background: var(--gold-soft);
}

/* ===== 横向滚动右侧渐隐遮罩（提示可右滑） ===== */
.hscroll, .chip-scroll, .filterbar, .emoji-row, .prog-scroll {
  position: relative;
}
.hscroll::after, .chip-scroll::after, .filterbar::after, .emoji-row::after, .prog-scroll::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 56rpx;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11,15,14,0) 0%, rgba(11,15,14,0.9) 100%);
}