/* ============================================================= * 信用超市 · 统一设计令牌 v2.0（tokens.css） * 基础语义：暖棕主色 + 强调金，奶油背景，专业可信。 * 使用方式：在任意页面 引入本文件，再用 components.css。 * 现有 css/style.css（v1.0 蓝皮肤）只需把同名变量的值改成这里的值， * 即可完成“换肤”式迁移——下方“兼容别名”块已帮你做好这一层映射。 * ============================================================= */ :root { /* ===================== 主色 / 强调（暖棕金） ===================== */ --color-primary: #8B5E3C; /* 暖棕主色（v1.0 原 #1657D9 蓝） */ --color-primary-hover: #704A2E; /* 主色 hover */ --color-accent: #E0A82E; /* 强调金：唯一 CTA 底色 */ --color-accent-hover: #C78E1A; /* 金色 hover */ --color-accent-ink: #3D2B1F; /* 金按钮上的深棕文字（保证对比度） */ /* ===================== 语义色（状态 / 提示） ===================== */ --color-success: #5BAE6B; /* 成功 / 已通过 */ --color-success-soft: #EAF4EC; /* 成功浅底 */ --color-warning: #F59E0B; /* 警告 / 待处理 */ --color-warning-soft: #FDF3E0; /* 警告浅底 */ --color-danger: #DC2626; /* 危险 / 失败 / 拒绝 */ --color-danger-soft: #FBEAEA; /* 危险浅底 */ --color-info: #2F6FED; /* 信息 / 可信蓝（仅辅助，不作主色） */ --color-info-soft: #E9EFFE; /* 信息浅底 */ /* ===================== 中性色（文字 / 边框 / 背景） ===================== */ --color-text: #3D2B1F; /* 主文字：深棕 */ --color-text-secondary: #6B5A4A; /* 次级文字：暖灰棕 */ --color-text-muted: #7A6A58; /* 弱化文字：浅暖棕（提对比度至 ~L30，满足 WCAG AA） */ --color-border: #E8DED0; /* 边框 / 分隔线 */ --color-border-strong: #D8C9B4; /* 略重的边框（输入聚焦等） */ --color-bg: #FFF9F2; /* 页面奶油底 */ --color-surface: #FFFFFF; /* 卡白 / 浮层 */ --color-bg-highlight: #FBF5EC; /* 高亮区 / 浅金底 */ --color-overlay: rgba(61, 43, 31, 0.45); /* 弹窗遮罩（暖棕调） */ /* ===================== 骨架屏 ===================== */ --color-skeleton: #EFE7DB; /* 骨架块底色（暖灰） */ --color-skeleton-shine: #F7F1E9; /* 骨架微光高亮 */ /* ===================== 字号阶梯（12/14/16/18/20/24/30/40） ===================== */ --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px; --fs-40: 40px; /* 语义字号别名（便于页面调用） */ --fs-micro: 12px; /* 辅助说明 / 角标 */ --fs-small: 14px; /* 次要正文 / 列表项 */ --fs-body: 16px; /* 正文基准 */ --fs-h3: 20px; /* 区块标题 / 卡片标题 */ --fs-h2: 24px; /* 页面二级标题 */ --fs-h1: 30px; /* 页面主标题 */ --fs-display: 40px; /* 大屏 Hero 主标题 */ /* ===================== 行高 ===================== */ --lh-body: 1.6; /* 正文 */ --lh-heading: 1.25; /* 标题（1.2–1.3 区间） */ --lh-tight: 1.2; /* 大标题 / 数字 */ /* ===================== 字重（400/500/600/700/800） ===================== */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ===================== 间距标尺（4/8/12/16/24，区块 32/48） ===================== */ --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; /* 兼容旧名（v1.0 用 xs/sm/md/lg/xl/2xl/3xl） */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* ===================== 圆角（8/12/16，卡片16、按钮/输入12、pill 999） ===================== */ --radius-sm: 8px; /* 小元素 / 标签 */ --radius-md: 12px; /* 按钮 / 输入 / 弹窗圆角内元素 */ --radius-lg: 16px; /* 卡片 / 弹窗 */ --radius-pill: 999px; /* 药丸 / 头像 */ /* ===================== 字体族（沿用现有，不引入新字体） ===================== */ --font-sans: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans GB", "Noto Sans SC", sans-serif; --font-en: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-num: "DIN Alternate", "Roboto", "Inter", -apple-system, sans-serif; /* 数据 / 利率 / 金额 */ /* ===================== 按钮规格 ===================== */ --btn-height: 44px; /* 全局最小触控高度 */ --btn-padding: 12px 24px; --btn-radius: 12px; --btn-font: 16px; --btn-font-weight: 700; /* ===================== 卡片规格 ===================== */ --card-bg: var(--color-surface); --card-border: 1px solid var(--color-border); --card-radius: 16px; --shadow-card: 0 1px 3px rgba(91, 67, 41, 0.06); --shadow-card-hover: 0 8px 24px rgba(91, 67, 41, 0.12); /* 暖棕柔和阴影 */ /* ===================== 弹窗规格 ===================== */ --modal-max-width: 460px; --modal-radius: 16px; --modal-z: 200; /* ===================== 底部 Tab ===================== */ --tab-height: 56px; /* 不含安全区 */ --tab-safe: env(safe-area-inset-bottom, 0px); /* iOS 安全区 */ --tab-total: calc(var(--tab-height) + var(--tab-safe)); /* ===================== FAB ===================== */ --fab-z: 120; --fab-bottom: calc(var(--tab-height) + 24px + var(--tab-safe)); --fab-shadow: 0 8px 24px rgba(91, 67, 41, 0.18); /* 暖棕阴影 */ /* ===================== Toast ===================== */ --toast-radius: 12px; --toast-z: 500; /* ===================== 状态点 ===================== */ --status-dot: 8px; /* ===================== 骨架屏 ===================== */ --skeleton-radius: 12px; --skeleton-duration: 1.2s; /* ===================== 动效（克制） ===================== */ --dur-150: 150ms; --dur-200: 200ms; --dur-300: 300ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* ===================== 顶部 sticky 头（移动端 ≤48） ===================== */ --header-height: 48px; } /* ============================================================= * 兼容别名：把 v1.0 css/style.css 里用到的旧变量名映射到 v2.0 新值。 * 用途：直接在现有 css 顶部 @import 本 tokens.css 后，把下面这段复制/应用， * 即可让 .modal / .fab-publish / .nav-links 等沿用旧类名的规则自动换肤， * 无需逐条改色值。 * ============================================================= */ :root { --primary: var(--color-primary); --primary-dark: var(--color-primary-hover); --accent: var(--color-accent); --accent-hover: var(--color-accent-hover); --accent-dark: var(--color-accent-ink); --accent-soft: var(--color-bg-highlight); --success: var(--color-success); --success-soft: var(--color-success-soft); --on-success: #1A2E1F; --info: var(--color-info); --info-soft: var(--color-info-soft); --info-text: var(--color-info); --warn: var(--color-warning); --warn-soft: var(--color-warning-soft); --warn-text: #8A5200; --danger: var(--color-danger); --danger-soft: var(--color-danger-soft); --danger-text: #991B1B; --ink: var(--color-text); --ink-soft: var(--color-text-secondary); --ink-tertiary: var(--color-text-muted); --line: var(--color-border); --line-light: #F3ECE1; --bg: var(--color-bg); --card: var(--color-surface); --bg-highlight: var(--color-bg-highlight); --radius: var(--radius-lg); --radius-sm: var(--radius-md); --shadow: var(--shadow-card); --shadow-hover: var(--shadow-card-hover); }