:root { /* ========================================================================= * 白色极简设计令牌 (Production SAAS Mall Requirements §5) * 这些变量名沿用旧值, 仅更新取值, 因此既有 CSS 自动切换为新配色. * 运行时 js/services/theme.js 会用后台 /settings/frontend-theme 覆盖 * --color-primary / --color-bg 等品牌色, 实现"后台可配置主题". * ========================================================================= */ /* Brand / 强调色: 控制在中性灰 + 一个主强调色 + 语义色 */ --color-primary: #0EA5E9; --color-primary-light: #38BDF8; --color-primary-dark: #0284C7; --color-primary-soft: #E0F2FE; /* 弱强调底色 */ --color-secondary: #6366F1; /* 次要点缀, 慎用 */ /* Text colors */ --color-text-title: #111827; --color-text-body: #374151; --color-text-secondary: #6B7280; --color-text-placeholder: #9CA3AF; --color-text-white: #ffffff; /* Background */ --color-bg: #F6F7F9; /* 页面主背景: 极浅灰 */ --color-bg-white: #ffffff; /* 卡片/区块底 */ --color-bg-card: #ffffff; --color-bg-subtle: #F9FAFB; /* 更弱的次级底 */ /* Price: 避免强销售感, 用主强调色而非刺眼红 */ --color-price: #0EA5E9; --color-price-original: #9CA3AF; /* Badge / 角标 (语义状态) */ --color-badge: #EF4444; /* Border */ --color-border: #E5E7EB; --color-border-strong: #D1D5DB; --color-divider: #F3F4F6; /* Status / 语义色 */ --color-success: #16A34A; --color-warning: #F59E0B; --color-danger: #EF4444; --color-info: #0EA5E9; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-xxl: 32px; /* Typography (§5.3) */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; --font-size-xs: 12px; /* 辅助文字下限 */ --font-size-sm: 14px; /* 辅助文字 */ --font-size-base: 15px; /* 正文下限 (关键文字 ≥ 15px) */ --font-size-md: 16px; /* 正文 / 主要按钮 */ --font-size-lg: 18px; /* 区块标题 */ --font-size-xl: 22px; /* 页面标题 */ --font-size-xxl: 28px; /* 数据大数字 */ /* Border radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-round: 999px; /* Tap targets (§5.4) */ --tap-target-min: 44px; /* 移动端主要按钮高度下限 */ --tap-icon-min: 40px; /* 图标按钮点击区下限 */ --list-item-min: 52px; /* 列表项最小高度 */ --tab-bar-height: 56px; /* 底部导航每项高度下限 */ --safe-area-bottom: env(safe-area-inset-bottom, 0px); /* Shadows: 弱阴影或无阴影 */ --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-float: 0 4px 16px rgba(16, 24, 40, 0.10); /* Z-index */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 500; --z-tab-bar: 800; --z-modal-backdrop: 900; --z-modal: 1000; --z-toast: 1100; } /* 低性能模式: 关闭复杂动画/长阴影/多层滤镜 (§5.5) * performance-mode.js 给加 .low-performance / .reduce-motion */ body.low-performance { --shadow-card: none; --shadow-float: 0 2px 8px rgba(16, 24, 40, 0.08); }