/* 真会了 · 设计变量 2026-09-07 · 替换 web/style.css 的 :root 段孩子端 = 默认（青绿）· 家长端 = （墨蓝）· 深色 = data-theme="dark" 旧变量名保留为别名，现有组件不用改。 */ :root { /* ---- 中性 ---- */ --bg: #F4F7F7; --surface: #FFFFFF; --surface-2: #EFF1F7; --surface-3: #E4E8F2; --line: #E0E8E7; --line-strong: #CFD4E0; --ink: #14161C; /* 15.8:1 on bg */ --ink-2: #4A5160; /* 7.9:1 */ --ink-3: #868EA0; /* 3.1:1 — 只用于标签、角标，不用于正文 */ /* ---- 主色青绿（孩子端）---- */ --primary-50: #F1F7F6; --primary-100: #DCEFEE; --primary-200: #A9D8D5; --primary-300: #5FAFAC; --primary-500: #0B7371; /* 品牌 */ --primary-600: #095E5C; --primary-700: #075350; /* 浅底上的主色文字 */ --on-primary: #FFFFFF; --primary-shadow: 0 6px 16px rgba(11,115,113,.26); /* ---- 强调橙 ---- */ --accent-50: #FDF3E3; --accent-100: #FAE3BE; --accent-500: #F0940A; --accent-700: #8F5406; /* 橙底上的文字 */ /* ---- 语义 ---- */ --good-50: #E4F4EC; --good-500: #12925A; /* 只表示「做对了」 */ --good-700: #0C6B42; --warn-50: #FBF0E0; --warn-500: #B4690E; --bad-50: #FAE9E7; --bad-500: #C8342B; --bad-700: #A32A22; --variant: #7A56E0; /* 变式题描边 */ --variant-50: #F1EDFE; --variant-700: #5B3BC4; /* ---- 聊天气泡 ---- */ --bubble-ai: var(--surface); --bubble-ai-ink: var(--ink); --bubble-me: var(--primary-500); --bubble-me-ink: var(--on-primary); --bubble-variant-line: var(--variant); --bubble-radius: 20px; --bubble-tail: 8px; /* 贴边那一角 */ /* ---- 字体 ---- */ --font: "IBM Plex Sans","PingFang SC","Noto Sans SC",-apple-system,"Microsoft YaHei",sans-serif; --font-math: "IBM Plex Serif",Georgia,serif; /* KaTeX 未加载时的兜底 */ --fs-display: 30px; --lh-display: 36px; --fs-title-1: 24px; --lh-title-1: 32px; --fs-title-2: 20px; --lh-title-2: 28px; --fs-title-3: 18px; --lh-title-3: 26px; --fs-chat: 17px; --lh-chat: 27px; --fs-body: 16px; --lh-body: 25px; /* 孩子端正文下限 */ --fs-label: 15px; --lh-label: 22px; --fs-caption: 13px; --lh-caption: 19px; --fs-micro: 12px; --lh-micro: 16px; /* 角标、栏目标签 */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --t-display: var(--fw-bold) var(--fs-display)/var(--lh-display) var(--font); --t-title-1: var(--fw-bold) var(--fs-title-1)/var(--lh-title-1) var(--font); --t-title-2: var(--fw-semi) var(--fs-title-2)/var(--lh-title-2) var(--font); --t-title-3: var(--fw-semi) var(--fs-title-3)/var(--lh-title-3) var(--font); --t-chat: var(--fw-regular) var(--fs-chat)/var(--lh-chat) var(--font); --t-body: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font); --t-label: var(--fw-medium) var(--fs-label)/var(--lh-label) var(--font); --t-caption: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font); --t-micro: var(--fw-semi) var(--fs-micro)/var(--lh-micro) var(--font); /* ---- 圆角 ---- */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---- 间距 ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --gutter: 20px; /* 页面左右留白（会话页 16px）*/ /* ---- 尺寸约束 ---- */ --tap: 44px; /* 最小触控 */ --icon-nav: 26px; /* 底栏、顶栏图标 */ --icon-inline:20px; /* 正文内图标 */ --icon-box: 40px; /* 图标外框 */ --pill-h: 52px; /* 输入胶囊，禁止变大 */ --topbar-h: 56px; --navbar-h: 60px; /* ---- 阴影 ---- */ --sh-1: 0 1px 2px rgba(20,22,28,.05); --sh-2: 0 1px 2px rgba(20,22,28,.04), 0 6px 18px rgba(20,22,28,.06); --sh-3: 0 2px 4px rgba(20,22,28,.05), 0 14px 32px rgba(20,22,28,.10); /* ---- 旧名别名 ---- */ --card: var(--surface); --card2: var(--surface-2); --ink3: var(--ink-3); --line2: var(--surface-2); --primary: var(--primary-500); --primary-2: var(--primary-600); --primary-soft: var(--primary-100); --primary-ink: var(--primary-700); --accent: var(--accent-500); --accent-soft: var(--accent-50); --accent-ink: var(--accent-700); --good: var(--good-500); --warn: var(--warn-500); --bad: var(--bad-500); --teal: var(--primary-500); --violet: var(--variant); --pink: #DB3E90; --radius: var(--r-lg); --radius-sm: var(--r-sm); --shadow: var(--sh-2); } /* ============ 家长端 · 墨蓝 ============ */ [data-role="parent"] { --bg: #F5F6FA; --line: #E2E5ED; --primary-50: #F1F4FA; --primary-100: #DFE6F4; --primary-200: #B6C4E4; --primary-300: #4A6FC4; --primary-500: #1F3E8C; --primary-600: #183272; --primary-700: #11245A; --primary-shadow: 0 6px 16px rgba(31,62,140,.24); /* 看板图表的四档，深到浅 */ --chart-1: #1F3E8C; --chart-2: #4A6FC4; --chart-3: #B6C4E4; --chart-4: #DFE6F4; } /* ============ 深色 ============ */ [data-theme="dark"] { --bg: #0F1116; --surface: #181B22; --surface-2: #21252E; --surface-3: #2A2F3A; --line: #2C313C; --line-strong: #3A404D; --ink: #F2F3F7; --ink-2: #AEB5C3; --ink-3: #737B8C; --primary-50: #10201F; --primary-100: #16302E; --primary-200: #1F4A48; --primary-300: #3C8A87; --primary-500: #2FB5B1; --primary-600: #26A09C; --primary-700: #8FD9D6; --on-primary: #06201F; --primary-shadow: none; --accent-50: #33260F; --accent-100: #4A3612; --accent-500: #FFB43D; --accent-700: #FFD79A; --good-50: #12301F; --good-500: #34C77B; --good-700: #8FE3B6; --warn-50: #332510; --warn-500: #E5A33D; --bad-50: #361A18; --bad-500: #F2695F; --bad-700: #FFAFA8; --variant: #A88CFF; --variant-50: #241E3D; --variant-700: #CBBBFF; --bubble-me: #157C79; --bubble-me-ink: #FFFFFF; --sh-1: none; --sh-2: none; --sh-3: 0 12px 28px rgba(0,0,0,.45); } [data-role="parent"][data-theme="dark"] { --primary-50: #131A2E; --primary-100: #1B2440; --primary-200: #2C3C6B; --primary-300: #5B7CCB; --primary-500: #7B94FF; --primary-600: #6A85FA; --primary-700: #B9C6FF; --on-primary: #0B1226; --chart-1: #7B94FF; --chart-2: #5B72CC; --chart-3: #3B4B85; --chart-4: #2A3358; } /* ============ 只做一件事：让页面继承变量 ============ */ body { margin: 0; background: var(--bg); color: var(--ink); font: var(--t-body); -webkit-font-smoothing: antialiased; } a { color: var(--primary-700); text-decoration: none; } a:hover { color: var(--primary-600); text-decoration: underline; }