/** * Babymoon Design Tokens — CSS Variables * Version: 1.3 | 2026-04-18 * Author:龙虾宝宝 🦜 | PP Claw * * Design System: 温暖极简编辑风 (Warm Editorial Minimalism) *Inspiration: Kinfolk + Apple Design + Japanese Elder-Friendly */ :root { /* ========================================= 1. 背景色 (Background Colors) ========================================= */ /** * 主背景色：暖沙白 * 应用：页面主体、主容器背景 * HEX: #FDF8F3 */ --bg-primary: #FDF8F3; /** * 次背景色：柔和米白 * 应用：卡片容器、列表项背景 * HEX: #F5EDE4 */ --bg-secondary: #F5EDE4; /** * 卡片背景色：纯白 * 应用：模态框、卡片内容区 * HEX: #FFFFFF */ --bg-card: #FFFFFF; /* ========================================= 2. 文字色 (Text Colors) ========================================= */ /** * 主文字色：深灰褐 * 应用：标题、主要文本 * HEX: #2D2A26 */ --text-primary: #2D2A26; /** * 次文字色：中灰褐 * 应用：副标题、辅助说明 * HEX: #6B6560 */ --text-secondary: #6B6560; /** * 三文字色：浅灰褐 * 应用：占位符、禁用状态文本 * HEX: #9B9590 */ --text-tertiary: #9B9590; /* ========================================= 3. 强调色 (Accent Colors) ========================================= */ /** * 樱花粉：柔和粉色 * 应用：链接、强调元素、错误提示 * HEX: #E8A5A5 */ --accent-sakura: #E8A5A5; /** * 金铜色：温暖金属色 * 应用：图标、装饰元素、高亮标签 * HEX: #C9A86C */ --accent-gold: #C9A86C; /** * 青灰色：冷静中性色 * 应用：辅助按钮、次要信息 * HEX: #8FA8A8 */ --accent-slate: #8FA8A8; /** * 抹茶绿：自然健康色 * 应用：成功状态、GDM友好标签 * HEX: #7A9E7E */ --accent-matcha: #7A9E7E; /* ========================================= 4. 功能色 (Functional Colors) ========================================= */ /** * 成功色：匹配抹茶绿 * 应用：成功提示、完成状态 * HEX: #7A9E7E */ --color-success: #7A9E7E; /** * 警告色：温暖橙色 * 应用：警告提示、待办事项 * HEX: #D4A574 */ --color-warning: #D4A574; /** * 危险色：柔和红色 * 应用：错误提示、P0紧急状态 * HEX: #C97B7B */ --color-danger: #C97B7B; /** * P0紧急色：柔和红色 * 应用：P0预约提醒、紧急状态 * HEX: #C97B7B (与 danger 相同) */ --color-p0: #C97B7B; /* ========================================= 5. 边框与阴影 (Borders & Shadows) ========================================= */ /** * 边框颜色：半透明灰褐 * 应用：卡片边框、分隔线 * RGBA: rgba(45, 42, 38, 0.08) */ --border-light: rgba(45, 42, 38, 0.08); /** * 卡片阴影：轻度阴影 * 应用：卡片、悬浮元素 * RGBA: rgba(45, 42, 38, 0.06) */ --shadow-card: 0 2px 8px rgba(45, 42, 38, 0.06); /** * 高级阴影：明显悬浮 * 应用：模态框、下拉菜单 * RGBA: rgba(45, 42, 38, 0.10) */ --shadow-elevated: 0 8px 24px rgba(45, 42, 38, 0.10); /* ========================================= 6. 间距系统 (Spacing Scale) ========================================= */ /** * 间距等级：XS (最小) * 应用：小型组件间距、图标边距 * Pixel: 4px */ --space-xs: 4px; /** * 间距等级：SM (小) * 应用：按钮内边距、小型卡片 * Pixel: 8px */ --space-sm: 8px; /** * 间距等级：MD (中) * 应用：段落间距、中型组件 * Pixel: 16px */ --space-md: 16px; /** * 间距等级：LG (大) * 应用：区域间距、大型组件 * Pixel: 24px */ --space-lg: 24px; /** * 间距等级：XL (超大) * 应用：页面间距、大型容器 * Pixel: 32px */ --space-xl: 32px; /** * 间距等级：2XL (超超大) * 应用：页脚间距、全屏布局 * Pixel: 48px */ --space-2xl: 48px; /** * 间距等级：3XL (最大) * 应用：Hero区域、标题间距 * Pixel: 64px */ --space-3xl: 64px; /* ========================================= 7. 圆角系统 (Radius Scale) ========================================= */ /** * 圆角：SM (小) * 应用：小型按钮、标签 * Pixel: 8px */ --radius-sm: 8px; /** * 圆角：MD (中) * 应用：卡片、输入框 * Pixel: 12px */ --radius-md: 12px; /** * 圆角：LG (大) * 应用：模态框、大型卡片 * Pixel: 16px */ --radius-lg: 16px; /** * 圆角：FULL (完整) * 应用：圆形按钮、徽章 * Pixel: 9999px */ --radius-full: 9999px; /* ========================================= 8. 触控目标 (Touch Targets) ========================================= */ /** * 最小触控目标：48px * 应用：按钮、链接最小尺寸 * Pixel: 48px */ --touch-target-min: 48px; /** * 舒适触控目标：56px * 应用：主要操作、孕妇友好设计 * Pixel: 56px */ --touch-target-comfortable: 56px; /* ========================================= 9. 字体系统 (Font Families) ========================================= */ /** * 手写体：Caveat * 应用：日期、时间、日记、手帐感元素 * Fallback: cursive */ --font-handwriting: 'Caveat', cursive; /** * 无衬线体：Inter * 应用：正文、按钮、导航 * Fallback: Noto Sans JP, system-ui, sans-serif */ --font-sans: 'Inter', 'Noto Sans JP', system-ui, sans-serif; /** * 等宽体：JetBrains Mono * 应用：数字、代码、价格对齐 * Fallback: ui-monospace, monospace */ --font-mono: 'JetBrains Mono', ui-monospace, monospace; /** * 衬线体：Playfair Display * 应用：标题、文章标题 * Fallback: Noto Serif SC, Georgia, serif */ --font-serif: 'Playfair Display', 'Noto Serif SC', Georgia, serif; /** * 中日文字体栈 * 应用：中日文内容 * --font-cjk-sc: 简体中文（宋体） * --font-cjk-jp: 日文（黑体） */ --font-cjk-sc: 'Noto Serif SC', 'Source Han Serif SC', '思源宋体', serif; --font-cjk-jp: 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif; /* ========================================= 10. 动画参数 (Animation Parameters) ========================================= */ /** * 快速动画：0.15s * 应用：悬停效果、快速反馈 */ --duration-quick: 0.15s; /** * 正常动画：0.3s * 应用：过渡效果、模态框动画 */ --duration-normal: 0.3s; /** * 慢速动画：0.5s * 应用：入场动画、重要交互 */ --duration-slow: 0.5s; /** * 标准缓动：Decelerate * 公式：cubic-bezier(0.4, 0, 0.2, 1) * 应用：默认动画、按钮动画 */ --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /** * 入场缓动：Accelerate * 公式：cubic-bezier(0, 0, 0.2, 1) * 应用：页面进入、元素淡入 */ --easing-entrance: cubic-bezier(0, 0, 0.2, 1); } /* ========================================= 11. 深色模式 (Dark Mode) - 可选支持 ========================================= */ @media (prefers-color-scheme: dark) { :root { /* 深色模式背景 */ --bg-primary: #1A1A1A; --bg-secondary: #2D2D2D; --bg-card: #333333; /* 深色模式文字 */ --text-primary: #F5F5F5; --text-secondary: #CCCCCC; --text-tertiary: #999999; /* 深色模式边框 */ --border-light: rgba(255, 255, 255, 0.1); /* 深色模式阴影 */ --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.5); } }