/* ============================================================ design-system.css — mobile chat design system 唯一视觉真理来源。所有样式必须引用此处变量。 颜色、圆角、间距、字体值禁止在任何其他文件中发明。 本轮配色重构：暖纸浅底 + 陶土限量主色 + 琥珀/玫瑰辅助。 ============================================================ */ :root { /* —— 色彩：暖纸纸张基调（渡口手选色板） —— */ --bg-primary: #FAF9F5; /* 页面底色：light theme */ --bg-surface: #F0EEE6; /* 浮层/输入框/卡片：取自色板 */ --bubble-user: #F0EEE6; /* 用户消息气泡：同卡片色 */ --bg-sunken: #E4DFD2; /* 按压态、代码块底色：surface 再深一档 */ --surface-raised:#FDFCF8; /* 弹层/浮起卡片：近白暖 */ --bg-card: #F0EEE6; /* 卡片默认底（补漏定义，防 fallback 渲深） */ --bg-hover: rgba(43,42,39,0.05); --bg-secondary: #F0EEE6; /* 次级卡片底 */ /* —— 文字：炭字 + 暖灰 —— */ --text-primary: #2B2A27; /* 正文：暖炭 */ --text-secondary:#8A867C; /* 次要文字、时间戳 */ --text-tertiary: #A29D92; /* 第三档 */ --text-faint: #B8B3A7; /* 占位符 */ --muted: #8A867C; /* 兼容别名 = secondary */ --text-muted: #8A867C; /* 兼容别名 = secondary */ /* —— 主题色：陶土红（限量主色，仅关键操作/发送/链接/光标/强调） —— */ --accent: #C96442; --accent-hover: #B05337; --accent-active: #9E4A30; /* 按压态 */ --accent-fg: #FFFCF8; /* 陶土底上的字：暖白 */ /* —— 辅助色：琥珀（★收藏/高亮/提醒/陪睡锁）与玫瑰（语音/情绪/沈游身份） —— */ --amber: #E3A13A; --amber-hover: #CF8F2E; --amber-fg: #46351A; /* 琥珀底上的字：深炭 */ --amber-soft: #F1D8A6; --amber-muted: rgba(227,161,58,0.15); --amber-ring: rgba(227,161,58,0.40); --rose: #E8A0B4; --rose-hover: #D98CA4; --rose-fg: #5A2E3C; /* 玫瑰底上的字：深梅子 */ --rose-soft: #F3C9D5; --rose-muted: rgba(232,160,180,0.18); --rose-ring: rgba(232,160,180,0.40); --shenyou: #8A4A5E; /* 沈游身份色：暖梅子 */ /* —— 反馈色（克制、不饱和） —— */ --success: #5E7D4C; /* 暖橄榄绿 */ --success-soft: rgba(94,125,76,0.12); --danger: #C0473F; /* 暖陶土红 */ --danger-soft: rgba(192,71,63,0.12); --warning: #C8872E; /* 深琥珀（提醒，区别于 amber 强调） */ --warning-soft: rgba(200,135,46,0.12); --info: #6E8CA6; /* 雾蓝灰（功能性信息） */ --info-soft: rgba(110,140,166,0.14); --ok: #5E9B63; /* 通话已接通/在线灯 */ /* —— 扩展调色板 —— */ --bg-primary-warm: #FBF9F4; /* 比主背景暖半度 */ --bg-surface-warm: #F0EEE6; /* 暖调浮层 */ --bg-overlay-glass: rgba(255,253,248,0.74); --accent-soft: #E9BDA9; /* 浅陶土 hover 态 */ --accent-muted: rgba(201,100,66,0.12); /* 陶土半透明底 */ --accent-ring: rgba(201,100,66,0.35); /* 聚焦光环 */ /* —— 卡片规范：纸感扁平为主 —— */ --card-bg: var(--bg-surface); /* 条目/列表卡默认底（暖纸） */ --card-raised-bg: var(--surface-raised);/* 重点卡浮底 */ --card-radius: 12px; /* 条目/列表卡（收敛乱飞圆角） */ --card-radius-lg: 20px; /* 重点卡/设置面板群卡 */ --card-radius-image: 8px; /* 图片缩略图 */ --card-pad: 14px 16px; --card-border: rgba(43,42,39,0.08); /* 重点卡淡边 */ --card-shadow: var(--shadow-xs); /* 重点卡轻影 */ /* —— 心情七色（语义保留，深浅两模式同值） —— */ --mood-attachment: var(--accent); --mood-libido: #C47D95; --mood-curiosity: #6B9AC4; --mood-social: #5BA89B; --mood-reflection: #8B7EC4; --mood-stress: #C9A44B; --mood-duty: #A0A0A0; --mood-fatigue: #B0A090; /* —— 通话/电台深色沉浸家族（永远深色，定义在 :root 不进 dark media query） —— */ --deep-bg-0: #171613; /* 主背景：深炭暖底 */ --deep-bg-1: #1D1B17; /* 面板/播放器 */ --deep-bg-2: #262319; /* 浮起 */ --deep-bg-sunken: #100F0D; --deep-text: #EDE8DF; --deep-text-secondary:#A59F93; --deep-text-faint: #777166; --deep-border: rgba(237,232,223,0.10); --deep-border-strong: rgba(237,232,223,0.20); --deep-surface: rgba(255,255,255,0.06); /* 按钮圆底 */ --deep-surface-strong:rgba(255,255,255,0.12); /* hover */ --deep-accent: #C96442; --deep-accent-strong: #D97A56; /* 深底 hover */ --deep-accent-muted: rgba(201,100,66,0.16); /* 用户行气泡底 */ --deep-accent-soft: #F2C9B8; /* 用户行文字 */ --deep-amber: #E3A13A; /* 月牙锁/提醒 */ --deep-rose: #E8A0B4; /* 陪睡/沈游语音行 */ --deep-meta: #D9A3B4; /* [audio]/[mood] 感知附注 */ --deep-trans: #9FC0A0; /* 译文行 */ --deep-ok: #6E9B63; /* 已接通/接听 */ --deep-danger: #C24A44; /* 挂断/拒接 */ --deep-avatar-grad: linear-gradient(135deg, #B2553A 0%, #C96442 55%, #E8A0B4 100%); /* 头像：陶土→玫瑰 */ --deep-avatar-glow: rgba(201,100,66,0.40); --deep-grad-bg: linear-gradient(165deg, #171613 0%, #100F0D 55%, #171410 100%); --deep-overlay: rgba(16,15,13,0.82); /* 来电卡遮罩 */ --deep-ball-bg: rgba(23,22,19,0.88); /* 浮球 */ /* —— 边框：极淡，靠留白而非线条分层 —— */ --border: rgba(43,42,39,0.10); --border-strong: rgba(43,42,39,0.20); --border-light: rgba(43,42,39,0.06); --border-secondary: rgba(43,42,39,0.18); /* reading 虚线/分隔线用 */ /* —— 字体 —— */ --font-serif: ui-serif, Georgia, 'PingFang SC', sans-serif; --font-sans: -apple-system, system-ui, 'PingFang SC', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* —— 字号 / 行高 —— */ --text-base: 16px; --text-sm: 13px; --text-title: 19px; --leading: 1.65; /* 正文行高，不得低于 1.6 */ --text-xs: 11px; --text-xxs: 10px; --text-read: 17.5px; --text-lg: 21px; --tracking-tight: -0.012em; --tracking-wide: 0.02em; /* —— 圆角 —— */ --radius-md: 12px; --radius-lg: 28px; /* 输入区容器 */ --radius-bubble: 18px; /* 用户气泡（收敛为实际用值） */ --radius-full: 999px; /* 发送按钮 */ --radius-xs: 6px; --radius-sm: 10px; --radius-xl: 32px; /* —— 间距（呼吸感） —— */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --msg-gap: 28px; /* 消息之间的垂直间距 */ --page-pad: 16px; /* 移动端页面左右留白 */ /* —— 动效：克制 —— */ --transition: 200ms ease; --ease-spring: cubic-bezier(0.32,0.72,0,1); --ease-out-expo: cubic-bezier(0.16,1,0.3,1); --ease-out-back: cubic-bezier(0.34,1.56,0.64,1); --transition-slow: 320ms var(--ease-spring); --transition-md: 240ms var(--ease-out-expo); --transition-fast: 150ms ease-out; /* —— 阴影：分层系统 —— */ --shadow-xs: 0 1px 2px rgba(43,42,39,0.04); --shadow-sm: 0 2px 6px rgba(43,42,39,0.06); --shadow-md: 0 4px 14px rgba(43,42,39,0.08); --shadow-lg: 0 8px 28px rgba(43,42,39,0.10); --shadow-xl: 0 14px 40px rgba(43,42,39,0.12); --shadow-soft: var(--shadow-xs); /* —— 底部 composer 外圈轻 halo（light theme） —— */ --shadow-composer: 0 0 0 1px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.07); /* —— 毛玻璃 —— */ --glass-bg: rgba(255,253,248,0.68); --glass-border: rgba(43,42,39,0.08); --glass-blur: 16px; --glass-bg-strong: rgba(255,253,248,0.84); --glass-blur-strong: 24px; /* —— 经期追踪（换新 accent / 语义蓝） —— */ --period-bg: rgba(201, 100, 66, 0.28); --period-dark-bg: rgba(201, 100, 66, 0.36); --ovulation-bg: rgba(107, 154, 196, 0.28); --ovulation-dark-bg: rgba(107, 154, 196, 0.36); --predicted-border: rgba(201, 100, 66, 0.50); } /* —— 暗色模式 —— */ @media (prefers-color-scheme: dark) { :root { --bg-primary: #211F1B; /* dark theme：暖炭底 */ --bg-surface: #181613; /* 输入框/浮层：比背景更深 */ --bubble-user: #2A2822; /* 用户气泡：亮于背景（层级反转） */ --bg-sunken: #131210; /* 按压态/代码块：再深一档 */ --surface-raised:#2E2B25; --bg-card: #24211D; --bg-hover: rgba(255,255,255,0.07); --bg-secondary: #181613; --text-primary: #EDE9E1; --text-secondary:#A49F94; --text-tertiary: #8F8A7F; --text-faint: #767166; --muted: #A49F94; --text-muted: #A49F94; /* 暗色扩展调色板 */ --bg-primary-warm: #24211D; --bg-surface-warm: #1C1A16; --bg-overlay-glass: rgba(24,22,19,0.82); --accent-hover: #D97A56; /* 深底 hover 调亮 */ --accent-soft: #A65A40; --accent-muted: rgba(201,100,66,0.20); --accent-ring: rgba(201,100,66,0.50); --amber: #D99A33; --amber-soft: #7A5B22; --rose: #D98DA4; --rose-soft: #6E4050; --success: #6E8F5C; --danger: #D0574F; --warning: #D79A3A; --info: #7B99B3; /* 卡片规范暗色 */ --card-bg: #24211D; --card-raised-bg: #2E2B25; --card-border: rgba(237,233,225,0.10); --card-shadow: none; /* --accent 不变：陶土红在两种模式下一致 */ /* 暗色边框 */ --border: rgba(237,233,225,0.10); --border-strong: rgba(237,233,225,0.22); --border-light: rgba(237,233,225,0.06); --border-secondary: rgba(237,233,225,0.16); /* 暗色阴影 */ --shadow-xs: none; --shadow-sm: 0 2px 6px rgba(0,0,0,0.20); --shadow-md: 0 4px 14px rgba(0,0,0,0.25); --shadow-lg: 0 8px 28px rgba(0,0,0,0.30); --shadow-xl: 0 14px 40px rgba(0,0,0,0.35); --shadow-soft: none; --shadow-composer: 0 0 0 1px rgba(255,255,255,0.06), 0 2px 8px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.25); /* 暗色毛玻璃 */ --glass-bg: rgba(24,22,19,0.74); --glass-border: rgba(237,233,225,0.10); --glass-blur: 16px; --glass-bg-strong: rgba(24,22,19,0.86); --glass-blur-strong: 24px; /* 心情七色保持同值（语义色），需要时再调可读性 */ } }