/* ============================================================================ * betonanything.net — Design Tokens (Quiet Luxury Digital · Dark First) * * 体系灵感：Linear / Arc / Vercel × 私人银行排版克制 * 主调：深石墨基底 + 暖象牙文本 + 深森绿强调 + 燕麦金辅强调 * 目标平台：移动端竖屏触屏优先，桌面降级显示 * * 体系规则: * - 所有色彩、字体、间距、圆角、阴影、动效曲线，均经此层中转 * - 模板与组件 CSS 永不出现裸 hex / 裸数值（密度除外） * - 暗主体（default）+ 亮主体（[data-theme="light"]）双套 * - 跟随系统：未指定 [data-theme] 时由 prefers-color-scheme 自适应 * * 自验: * - 对比度：所有文/底符合 WCAG AA（4.5:1 正文，3:1 大字） * - safe-area：所有底栏 / 顶栏正确内嵌 env(safe-area-inset-*) * - 触控：最小命中区 ≥ 44×44 px（Apple HIG） * ========================================================================= */ /* ===================== 1. 暗主体（default） ===================== */ :root { /* ---- 1.1 Surfaces（背景层级，由深到浅形成"光的浮起"） ---- */ --c-bg: #07080A; /* 极深墨石 */ --c-bg-elevated: #0C0E12; /* 主区背景 */ --c-surface: #12141A; /* 卡片底 */ --c-surface-2: #181B23; /* 卡片层 +1 */ --c-surface-3: #1E222C; /* 弹层 / sheet */ --c-surface-overlay: rgba(7, 8, 10, 0.72); /* modal 遮罩 */ --c-glass: rgba(255, 255, 255, 0.025); /* 玻璃 surface */ --c-glass-strong: rgba(255, 255, 255, 0.045); /* ---- 1.2 Text（暖象牙 / 雾米 / 灰煤） ---- */ --c-text-primary: #F4EFE5; /* 暖象牙（主文） */ --c-text-secondary: #B4ADA2; /* 雾米 */ --c-text-tertiary: #807A70; /* 灰煤 */ --c-text-muted: #565147; /* 静默 */ --c-text-disabled: #3A362F; /* 禁用 */ --c-text-inverse: #0C0E12; /* 反白（用于 accent 背景） */ /* ---- 1.3 Accents（深森绿 / 燕麦金 — 极度克制使用） ---- */ --c-accent: #5E8E7D; /* 深森绿 — 主 CTA / 链接 */ --c-accent-hover: #6FA28F; /* 悬浮 */ --c-accent-pressed: #4D7868; /* 按下 */ --c-accent-soft: rgba(94, 142, 125, 0.12); /* 轻底 */ --c-accent-soft-hover: rgba(94, 142, 125, 0.18); --c-accent-ring: rgba(94, 142, 125, 0.32); /* focus ring */ --c-accent-glow: rgba(94, 142, 125, 0.22); /* glow 阴影 */ --c-accent-text: #9CC6B4; /* 暗底上的强调绿文（对齐 gold-text/success-text）*/ --c-gold: #C3B58F; /* 燕麦金 — 次强调 */ --c-gold-soft: rgba(195, 181, 143, 0.12); --c-gold-text: #D6C9A4; /* 在暗底上的金文 */ /* ---- 1.4 Semantic（柔和不刺眼） ---- */ --c-success: #7DAE89; --c-success-soft: rgba(125, 174, 137, 0.12); --c-success-text: #9DC6A6; --c-warning: #D4A574; --c-warning-soft: rgba(212, 165, 116, 0.12); --c-warning-text: #E0B891; --c-danger: #C97B6A; /* 赤陶土，非纯红 */ --c-danger-soft: rgba(201, 123, 106, 0.14); --c-danger-text: #D9967E; --c-info: #8AA5B3; --c-info-soft: rgba(138, 165, 179, 0.12); --c-info-text: #A4BAC5; /* ---- 1.5 Borders / Dividers（薄如蝉翼） ---- */ --c-border-subtle: rgba(255, 255, 255, 0.05); --c-border-default: rgba(255, 255, 255, 0.085); --c-border-strong: rgba(255, 255, 255, 0.14); --c-border-emphasis: rgba(255, 255, 255, 0.22); --c-divider: rgba(255, 255, 255, 0.06); /* ---- 1.6 Highlights / inset shines ---- */ --c-highlight-soft: rgba(255, 255, 255, 0.04); --c-highlight-strong: rgba(255, 255, 255, 0.08); /* ---- 1.7 Selection ---- */ --c-selection-bg: rgba(94, 142, 125, 0.32); --c-selection-fg: #F4EFE5; /* ---- 1.8 Scrollbar ---- */ --c-scrollbar-thumb: rgba(255, 255, 255, 0.10); --c-scrollbar-thumb-hover: rgba(255, 255, 255, 0.18); --c-scrollbar-track: transparent; } /* ===================== 2. 亮主体 ===================== */ :root[data-theme="light"] { /* surfaces */ --c-bg: #FAF8F4; /* 暖象牙底 */ --c-bg-elevated: #FFFFFF; --c-surface: #F2EFE8; --c-surface-2: #EBE7DD; --c-surface-3: #FFFFFF; --c-surface-overlay: rgba(28, 25, 20, 0.36); --c-glass: rgba(0, 0, 0, 0.025); --c-glass-strong: rgba(0, 0, 0, 0.045); /* text */ --c-text-primary: #1C1914; /* 浓墨 */ --c-text-secondary: #57534C; --c-text-tertiary: #6B6660; /* WCAG AA 4.5:1 ↑（旧 7E796F 仅 3.6:1）*/ --c-text-muted: #A39E92; --c-text-disabled: #C8C3B8; --c-text-inverse: #FAF8F4; /* accents */ --c-accent: #43705F; /* 深森绿 — 亮底加深以保对比 */ --c-accent-hover: #355A4C; --c-accent-pressed: #2A4B40; --c-accent-soft: rgba(67, 112, 95, 0.10); --c-accent-soft-hover: rgba(67, 112, 95, 0.16); --c-accent-ring: rgba(67, 112, 95, 0.28); --c-accent-glow: rgba(67, 112, 95, 0.18); --c-accent-text: #35594B; --c-gold: #8A7945; --c-gold-soft: rgba(138, 121, 69, 0.10); --c-gold-text: #6E5F33; /* semantic */ --c-success: #4A7E5A; --c-success-soft: rgba(74, 126, 90, 0.10); --c-success-text: #3A6648; --c-warning: #9E6F32; --c-warning-soft: rgba(158, 111, 50, 0.10); --c-warning-text: #7F5A28; --c-danger: #A85543; --c-danger-soft: rgba(168, 85, 67, 0.10); --c-danger-text: #8A4636; --c-info: #5A7886; --c-info-soft: rgba(90, 120, 134, 0.10); --c-info-text: #485F6A; /* borders */ --c-border-subtle: rgba(0, 0, 0, 0.05); --c-border-default: rgba(0, 0, 0, 0.085); --c-border-strong: rgba(0, 0, 0, 0.14); --c-border-emphasis: rgba(0, 0, 0, 0.22); --c-divider: rgba(0, 0, 0, 0.06); /* highlights */ --c-highlight-soft: rgba(0, 0, 0, 0.03); --c-highlight-strong: rgba(0, 0, 0, 0.06); /* selection */ --c-selection-bg: rgba(67, 112, 95, 0.25); --c-selection-fg: #1C1914; /* scrollbar */ --c-scrollbar-thumb: rgba(0, 0, 0, 0.12); --c-scrollbar-thumb-hover: rgba(0, 0, 0, 0.22); } /* ===================== 3. 系统色（跟随设备） ===================== */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { /* 复用亮主体 */ --c-bg: #FAF8F4; --c-bg-elevated: #FFFFFF; --c-surface: #F2EFE8; --c-surface-2: #EBE7DD; --c-surface-3: #FFFFFF; --c-surface-overlay: rgba(28, 25, 20, 0.36); --c-glass: rgba(0, 0, 0, 0.025); --c-glass-strong: rgba(0, 0, 0, 0.045); --c-text-primary: #1C1914; --c-text-secondary: #57534C; --c-text-tertiary: #6B6660; --c-text-muted: #A39E92; --c-text-disabled: #C8C3B8; --c-text-inverse: #FAF8F4; --c-accent: #43705F; --c-accent-hover: #355A4C; --c-accent-pressed: #2A4B40; --c-accent-soft: rgba(67, 112, 95, 0.10); --c-accent-soft-hover: rgba(67, 112, 95, 0.16); --c-accent-ring: rgba(67, 112, 95, 0.28); --c-accent-glow: rgba(67, 112, 95, 0.18); --c-accent-text: #35594B; --c-gold: #8A7945; --c-gold-soft: rgba(138, 121, 69, 0.10); --c-gold-text: #6E5F33; --c-success: #4A7E5A; --c-success-soft: rgba(74, 126, 90, 0.10); --c-success-text: #3A6648; --c-warning: #9E6F32; --c-warning-soft: rgba(158, 111, 50, 0.10); --c-warning-text: #7F5A28; --c-danger: #A85543; --c-danger-soft: rgba(168, 85, 67, 0.10); --c-danger-text: #8A4636; --c-info: #5A7886; --c-info-soft: rgba(90, 120, 134, 0.10); --c-info-text: #485F6A; --c-border-subtle: rgba(0, 0, 0, 0.05); --c-border-default: rgba(0, 0, 0, 0.085); --c-border-strong: rgba(0, 0, 0, 0.14); --c-border-emphasis: rgba(0, 0, 0, 0.22); --c-divider: rgba(0, 0, 0, 0.06); --c-highlight-soft: rgba(0, 0, 0, 0.03); --c-highlight-strong: rgba(0, 0, 0, 0.06); --c-selection-bg: rgba(67, 112, 95, 0.25); --c-selection-fg: #1C1914; --c-scrollbar-thumb: rgba(0, 0, 0, 0.12); --c-scrollbar-thumb-hover: rgba(0, 0, 0, 0.22); } } /* ===================== 4. Typography ===================== */ :root { /* Font stacks — 系统优先，回退到优雅无衬线 */ --font-display: "InterDisplay", "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", "Plus Jakarta Sans", "Helvetica Neue", Arial, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; --font-body: "Inter", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; --font-serif: "Source Serif 4", "Source Serif Pro", "Cormorant Garamond", Georgia, "Times New Roman", serif; /* Type scale — modular（1.18 ratio + manual finesse） */ --fs-micro: 0.6875rem; /* 11px — 标签 */ --fs-caption: 0.75rem; /* 12px — 元信息 */ --fs-xs: 0.8125rem; /* 13px — 注释 / 帮助文字 */ --fs-sm: 0.875rem; /* 14px — 次要正文 */ --fs-base: 0.9375rem; /* 15px — 正文（移动端友好） */ --fs-md: 1rem; /* 16px — 表单输入 / 默认 button */ --fs-lg: 1.0625rem; /* 17px — 大正文（iOS HIG） */ --fs-h3: 1.125rem; /* 18px */ --fs-h2: 1.375rem; /* 22px */ --fs-h1: 1.75rem; /* 28px */ --fs-display-m: 2rem; /* 32px */ --fs-display-l: 2.5rem; /* 40px */ /* Line height */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.5; --lh-relaxed: 1.65; /* Letter spacing */ --ls-display: -0.022em; /* 大字适度压缩 */ --ls-heading: -0.012em; --ls-body: -0.002em; --ls-caption: 0.005em; --ls-micro: 0.06em; /* SECTION LABEL */ /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; } /* ===================== 5. Spacing（8px base） ===================== */ :root { --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2 */ --space-1: 0.25rem; /* 4 */ --space-1-5: 0.375rem; /* 6 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 1.75rem; /* 28 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-14: 3.5rem; /* 56 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* 页面 gutters（移动 / 平板 / 桌面） */ --gutter: var(--space-4); /* 默认 16px */ --gutter-lg: var(--space-6); /* 桌面 24px */ /* 触控最小命中区 */ --touch-target: 44px; } @media (min-width: 768px) { :root { --gutter: var(--space-6); } } @media (min-width: 1280px) { :root { --gutter: var(--space-8); } } /* ===================== 6. Radii ===================== */ :root { --radius-xs: 0.375rem; /* 6 — 小 chip */ --radius-sm: 0.5rem; /* 8 — 输入 / 小按钮 */ --radius-md: 0.75rem; /* 12 — 标准卡片 / 按钮 */ --radius-lg: 1rem; /* 16 — 大卡片 */ --radius-xl: 1.25rem; /* 20 — 弹层 / sheet 顶端 */ --radius-2xl: 1.75rem; /* 28 — 浮起 CTA */ --radius-pill: 999px; --radius-circle: 50%; } /* ===================== 7. Shadows / Elevation ===================== */ :root { /* 暗主题：组合方式 — outer drop + inner highlight */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32), inset 0 1px 0 var(--c-highlight-soft); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.36), inset 0 1px 0 var(--c-highlight-soft); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.42), inset 0 1px 0 var(--c-highlight-strong); --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.48), inset 0 1px 0 var(--c-highlight-strong); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.56), inset 0 1px 0 var(--c-highlight-strong); /* 强调 glow（用于浮起 CTA / focus） */ --shadow-glow-accent: 0 0 0 1px var(--c-accent-ring), 0 8px 24px var(--c-accent-glow); --shadow-glow-gold: 0 0 0 1px rgba(195, 181, 143, 0.35), 0 8px 24px rgba(195, 181, 143, 0.18); /* Focus ring（键盘聚焦） */ --shadow-focus-ring: 0 0 0 3px var(--c-accent-ring); --shadow-focus-ring-danger: 0 0 0 3px rgba(201, 123, 106, 0.32); } :root[data-theme="light"] { --shadow-xs: 0 1px 2px rgba(28, 25, 20, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6); --shadow-sm: 0 2px 6px rgba(28, 25, 20, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); --shadow-md: 0 6px 18px rgba(28, 25, 20, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.7); --shadow-lg: 0 14px 36px rgba(28, 25, 20, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.7); --shadow-xl: 0 24px 64px rgba(28, 25, 20, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7); } /* ===================== 8. Motion ===================== */ :root { /* Easing — 物理感曲线 */ --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1); --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* 微弹 */ --ease-spring-soft: cubic-bezier(0.45, 1.25, 0.55, 1); /* Duration */ --dur-instant: 80ms; --dur-fast: 150ms; --dur-base: 220ms; --dur-medium: 320ms; --dur-slow: 440ms; --dur-slower: 640ms; } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-medium: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; } } /* ===================== 9. Z-index 层级（语义化） ===================== */ :root { --z-base: 1; --z-raised: 10; --z-dropdown: 50; --z-sticky: 80; --z-fab: 95; --z-tabbar: 100; --z-topbar: 110; --z-backdrop: 900; --z-modal: 950; --z-sheet: 960; --z-toast: 980; --z-tooltip: 990; --z-max: 9999; } /* ===================== 10. Layout 常量 ===================== */ :root { --topbar-height: 56px; --tabbar-height: 64px; --fab-size: 56px; --fab-size-lg: 64px; /* safe-area 总高度（含 env） — 用于内容 padding-bottom */ --bottom-safe-pad: calc(var(--tabbar-height) + env(safe-area-inset-bottom, 0px)); /* 视觉内容最大宽度 — 移动优先单列 */ --content-max: 560px; /* 单列正文 */ --content-max-wide: 1080px; /* 表格 / 仪表 */ /* Container 内边距（gutter 已可用） */ --container-px: var(--gutter); } /* ===================== 11. 状态修饰符（语义快捷） ===================== */ :root { --opacity-disabled: 0.4; --opacity-loading: 0.6; --blur-sm: 8px; --blur-md: 16px; --blur-lg: 28px; /* 顶栏 / tabbar 玻璃 */ }