/* ============================================================ Design Tokens — 背单词系统 统一设计变量 风格：陶土暖色 + 毛玻璃 + 暗色模式 规范：8px栅格 · blur(16px)全局统一 · 圆角8/12/16 ============================================================ */ :root { /* ===== 主色调：陶土暖色 ===== */ --color-primary: #c4815e; --color-primary-light: #d49578; --color-primary-dark: #a86848; --color-primary-bg: rgba(196, 129, 94, 0.08); --color-primary-bg-hover: rgba(196, 129, 94, 0.14); /* ===== 功能色 ===== */ --color-success: #34A873; --color-success-bg: rgba(52, 168, 115, 0.08); --color-warning: #F59E0B; --color-warning-bg: rgba(245, 158, 11, 0.08); --color-danger: #E55353; --color-danger-bg: rgba(229, 83, 83, 0.06); /* ===== 强调色（语义化，全端口共用） ===== */ --accent-blue: #5b8cb8; --accent-green: #34A873; --accent-orange: #d49578; /* ===== 中性色-文字 ===== */ --text-primary: #1D1D1F; --text-secondary: #565659; --text-tertiary: #949499; --text-placeholder: #B0B0B5; --text-muted: #949499; /* alias → tertiary */ /* ===== 中性色-背景（毛玻璃体系） ===== */ --bg-page: #fbf9f6; /* 暖米色页面底，衬托毛玻璃 */ --bg-surface: rgba(255,255,255,0.75); --bg-surface-solid: #ffffff; --bg-overlay: rgba(0,0,0,0.32); /* ===== 边框 ===== */ --border-light: rgba(0,0,0,0.06); --border-standard: rgba(0,0,0,0.08); --border-strong: rgba(0,0,0,0.12); --border-glass: rgba(0,0,0,0.06); /* 毛玻璃卡片边框色 */ /* ===== 毛玻璃核心参数（全局统一，禁止修改） ===== */ --glass-blur: 16px; --glass-bg: rgba(255,255,255,0.75); --glass-bg-modal: rgba(255,255,255,0.88); --glass-border: 1px solid var(--border-glass); /* ===== 圆角（全局3档，禁止新增） ===== */ --radius-sm: 8px; /* 输入框、标签、小按钮 */ --radius-md: 12px; /* 标准卡片、弹窗、按钮 */ --radius-lg: 16px; /* 大面板、顶部导航容器 */ --radius-full: 9999px; /* 药丸标签 */ /* ===== 阴影（全局2套） ===== */ --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06); --shadow-card-hover: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.10); --shadow-modal: 0 8px 40px rgba(0,0,0,0.14); --shadow-button-primary: 0 2px 8px rgba(196,129,94,0.28); /* ===== 渐变 ===== */ --gradient-primary: linear-gradient(135deg, #c4815e 0%, #d49578 100%); --gradient-card: linear-gradient(180deg, #ffffff 0%, #f8f9fc 100%); --gradient-card-glow: radial-gradient(circle at 50% 0%, rgba(196,129,94,0.08) 0%, transparent 60%); /* ===== 间距（8px栅格，禁止其他数值） ===== */ --space-4: 4px; --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; /* ===== 字体栈 ===== */ --font-sans: "Noto Sans SC", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-word: "Inter", "Noto Sans SC", -apple-system, sans-serif; /* ===== 字体层级 ===== */ --text-h1: 24px; --text-h2: 20px; --text-h3: 17px; --text-body: 15px; --text-caption: 13px; --text-small: 11px; --weight-bold: 600; --weight-medium: 500; --weight-regular: 400; --leading-heading: 1.3; --leading-body: 1.5; /* ===== 动效（全局统一240ms ease-out） ===== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-base: 240ms; --duration-fast: 150ms; /* ===== 触摸目标 ===== */ --touch-min: 44px; /* ===== 布局 ===== */ --max-content-width: 720px; /* 内容最大宽度，防铺满大屏 */ --sidebar-width: 240px; /* PC端左侧导航宽度 */ } /* ============================================================ 暗色模式 触发： 场景：专注学习模式 / 上课弹窗 / 用户手动切换 ============================================================ */ [data-theme="dark"] { --color-primary: #d49578; --color-primary-light: #e0b09a; --color-primary-dark: #c4815e; --color-primary-bg: rgba(196, 129, 94, 0.14); --color-primary-bg-hover: rgba(196, 129, 94, 0.20); --color-success: #4ADE80; --color-success-bg: rgba(74, 222, 128, 0.10); --color-warning: #FBBF24; --color-warning-bg: rgba(251, 191, 36, 0.10); --color-danger: #F87171; --color-danger-bg: rgba(248, 113, 113, 0.08); --accent-blue: #7ba7c9; --accent-green: #4ADE80; --accent-orange: #e0b09a; --text-primary: #E8E6E3; --text-secondary: #9A9A96; --text-tertiary: #5A5A56; --text-placeholder: #4A4A46; --text-muted: #5A5A56; --bg-page: #121214; --bg-surface: rgba(30,30,32,0.88); --bg-surface-solid: #1E1E20; --bg-overlay: rgba(0,0,0,0.60); --border-light: rgba(255,255,255,0.04); --border-standard: rgba(255,255,255,0.06); --border-strong: rgba(255,255,255,0.10); --border-glass: rgba(255,255,255,0.08); --glass-bg: rgba(30,30,32,0.88); --glass-bg-modal: rgba(30,30,32,0.94); --glass-border: 1px solid rgba(255,255,255,0.08); --shadow-card: 0 1px 3px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.40); --shadow-card-hover: 0 1px 3px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.50); --shadow-modal: 0 8px 40px rgba(0,0,0,0.55); --shadow-button-primary: 0 2px 8px rgba(196,129,94,0.20); --gradient-primary: linear-gradient(135deg, #c4815e 0%, #d49578 100%); --gradient-card: linear-gradient(180deg, #1E1E20 0%, #18181A 100%); --gradient-card-glow: radial-gradient(circle at 50% 0%, rgba(196,129,94,0.08) 0%, transparent 60%); } /* ===== 系统跟随 ===== */ @media (prefers-color-scheme: dark) { html[data-theme="auto"] { --color-primary: #d49578; --color-primary-light: #e0b09a; --color-primary-dark: #c4815e; --color-primary-bg: rgba(196, 129, 94, 0.14); --color-primary-bg-hover: rgba(196, 129, 94, 0.20); --color-success: #4ADE80; --color-success-bg: rgba(74, 222, 128, 0.10); --color-warning: #FBBF24; --color-warning-bg: rgba(251, 191, 36, 0.10); --color-danger: #F87171; --color-danger-bg: rgba(248, 113, 113, 0.08); --accent-blue: #7ba7c9; --accent-green: #4ADE80; --accent-orange: #e0b09a; --text-primary: #E8E6E3; --text-secondary: #9A9A96; --text-tertiary: #5A5A56; --text-placeholder: #4A4A46; --text-muted: #5A5A56; --bg-page: #121214; --bg-surface: rgba(30,30,32,0.88); --bg-surface-solid: #1E1E20; --bg-overlay: rgba(0,0,0,0.60); --border-light: rgba(255,255,255,0.04); --border-standard: rgba(255,255,255,0.06); --border-strong: rgba(255,255,255,0.10); --border-glass: rgba(255,255,255,0.08); --glass-bg: rgba(30,30,32,0.88); --glass-bg-modal: rgba(30,30,32,0.94); --glass-border: 1px solid rgba(255,255,255,0.08); --shadow-card: 0 1px 3px rgba(0,0,0,0.30), 0 4px 16px rgba(0,0,0,0.40); --shadow-card-hover: 0 1px 3px rgba(0,0,0,0.40), 0 8px 24px rgba(0,0,0,0.50); --shadow-modal: 0 8px 40px rgba(0,0,0,0.55); --shadow-button-primary: 0 2px 8px rgba(196,129,94,0.20); --gradient-card: linear-gradient(180deg, #1E1E20 0%, #18181A 100%); --gradient-card-glow: radial-gradient(circle at 50% 0%, rgba(196,129,94,0.08) 0%, transparent 60%); } }