:root { --bg: #f4f7fb; --surface: #ffffff; --surface-2: #f9fafb; --text: #1f2937; --subtext: #6b7280; --brand: #0f766e; --brand-mid: #0d9488; --brand-light: #14b8a6; --brand-soft: #ccfbf1; --danger: #ef4444; --danger-soft: #fee2e2; --warning: #f59e0b; --warning-soft: #fef3c7; --success: #10b981; --success-soft: #d1fae5; --border: #e5e7eb; --shadow: 0 10px 24px rgba(15, 23, 42, 0.08); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --tab-height: 68px; --safe-area-bottom: env(safe-area-inset-bottom, 0px); --content-pb: calc(var(--tab-height) + var(--safe-area-bottom) + 16px); } /* ══ 适老化模式 ══ 触发方式： 效果：字体放大 / 对比度增强 / 间距舒适化 / 高亮品牌色 */ [data-elder="on"] { /* 字体放大 */ --elder-scale: 1; /* 基准倍率，用于 rem 换算辅助 */ font-size: 18px; /* body base font-size 从 16px → 18px */ /* 颜色增强：提高亮度、对比度 */ --bg: #ffffff; --surface: #ffffff; --surface-2: #f0faf8; --text: #0d1117; /* 近纯黑，最大对比度 */ --subtext: #374151; /* 深灰，可读性强 */ --brand: #0a6460; /* 略深，对比度更高 */ --brand-mid: #0c857a; --brand-light: #0ea898; --brand-soft: #b2f0e8; --border: #c8d6d4; /* 边框更明显 */ --shadow: 0 10px 28px rgba(15, 23, 42, 0.14); --shadow-sm: 0 3px 10px rgba(15, 23, 42, 0.10); } /* 适老化 + 暗色模式叠加 */ [data-elder="on"][data-theme="dark"] { --bg: #0a0f1a; --surface: #141e2e; --surface-2: #1b2a3a; --text: #f8fafc; --subtext: #b0c4ce; --brand: #34dbc9; --border: #2e4050; } [data-theme="dark"] { --bg: #0f172a; --surface: #1e293b; --surface-2: #273549; --text: #f1f5f9; --subtext: #94a3b8; --brand: #2dd4bf; --brand-mid: #14b8a6; --brand-light: #5eead4; --brand-soft: #134e4a; --border: #334155; --shadow: 0 10px 24px rgba(0, 0, 0, 0.35); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); }