/* ========================================================= 设计令牌 DESIGN TOKENS —— 逐字沿用三批 UX/UI 设计稿 ========================================================= */ :root{ /* 颜色 */ --cream:#FFF7EC; /* 页面底色 */ --paper:#FFFFFF; /* 卡片 */ --coral:#F0784E; /* 主色 / Claude */ --coral-dark:#D85F37; /* 主色按下/描边 */ --coral-soft:#FCE5DA; /* 主色浅底 */ --blue:#3F86CF; /* 蓝猫 / 次色 */ --blue-deep:#2C6AAE; --blue-soft:#DCEBFA; --yellow:#FFC64B; /* 强调 / 星星 */ --mint:#54C3A0; /* 正确 / 成功 */ --mint-soft:#DBF2EA; --berry:#E7607E; /* 安全心 / 提醒 */ --ink:#2B2B3A; /* 正文 */ --ink-soft:#6A6A7C; --ink-faint:#9A9AAD; --line:#ECE6DA; --lock:#C7C2B6; /* 锁定/禁用 */ /* 圆角 */ --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px; /* 阴影 */ --sh-soft:0 6px 22px rgba(43,43,58,.09); --sh-card:0 10px 30px rgba(43,43,58,.10); /* 字号（儿童偏大；可由设置缩放 root font-size） */ --fs-body:17px; --fs-bodyL:19px; --fs-small:14px; --fs-cap:12px; } /* 深色 / 护眼主题：挂在 上 */ html[data-theme="dark"]{ --cream:#1E2230;--paper:#262B3B;--coral:#F2885F;--coral-soft:#3A2C29; --blue:#5C9EDC;--blue-soft:#23303F;--mint-soft:#22332C; --ink:#ECEDF3;--ink-soft:#A8ADC0;--ink-faint:#767C92;--line:#333A4D; --sh-card:0 10px 30px rgba(0,0,0,.3);--sh-soft:0 6px 22px rgba(0,0,0,.3); } /* 护眼：暖低饱和 */ html[data-theme="sepia"]{ --cream:#F6ECD8;--paper:#FBF4E6;--coral-soft:#F2E0D2; --blue-soft:#E4EBDF;--mint-soft:#E3EFDD; --ink:#3A332A;--ink-soft:#6E6354;--ink-faint:#A2937E;--line:#E4D9C2; } /* 字号档（设置：小/中/大） */ html[data-fs="small"]{font-size:15px} html[data-fs="medium"]{font-size:16px} html[data-fs="large"]{font-size:18px} /* 注音开关：默认隐藏拼音，开启后显示 */ ruby{ruby-position:over} rt{font-size:.5em;color:var(--ink-faint);font-weight:400;letter-spacing:.02em; visibility:hidden} html[data-ruby="on"] rt{visibility:visible}