/* ========================================================= tokens.css — 英语点读站 设计令牌（4 套可切换主题） 用法： 本文件同时驱动「标注后台(editor.html)」与「阅读端(index.html)」。 旧变量名（--card/--brand/--blue/--green/--red/--amber/--ink2…） 全部重映射到底层主题令牌，现有业务代码零改动即可换肤。 ========================================================= */ /* ---------- 默认主题 = 糖果 ---------- */ :root, [data-theme="candy"] { --bg: #FFF6FA; --surface: #FFFFFF; --surface-2: #FFF0F6; --ink: #3A2A33; --muted: #8A7280; --accent: #FF5C8A; --accent-2: #FFB23E; --accent-soft: #FFE3EE; --accent2-soft: #FFF0DA; --halo: #FF5C8A; --halo-glow: rgba(255, 92, 138, .45); --line: #F3D9E6; --ok: #2FAE6A; --ok-soft: #E2F6EC; --danger: #E0476B; --danger-soft: #FCE6ED; --radius-s: 12px; --radius-m: 16px; --radius-l: 26px; --shadow-1: 0 2px 10px rgba(255, 92, 138, .12); --shadow-2: 0 12px 30px rgba(255, 92, 138, .18); --shadow-3: 0 24px 60px rgba(255, 92, 138, .22); --ease: cubic-bezier(.16, 1, .3, 1); --dur: 320ms; } [data-theme="ocean"] { --bg: #F1FAFF; --surface: #FFFFFF; --surface-2: #EAF7FF; --ink: #1B2B3A; --muted: #6E879B; --accent: #1FA2FF; --accent-2: #22D3C5; --accent-soft: #DDF1FF; --accent2-soft: #D7F6F2; --halo: #1FA2FF; --halo-glow: rgba(31, 162, 255, .45); --line: #CFE8F7; --ok: #1FA06A; --ok-soft: #DEF6EC; --danger: #E0436B; --danger-soft: #FCE6EE; --radius-s: 12px; --radius-m: 16px; --radius-l: 26px; --shadow-1: 0 2px 10px rgba(31, 162, 255, .12); --shadow-2: 0 12px 30px rgba(31, 162, 255, .18); --shadow-3: 0 24px 60px rgba(31, 162, 255, .22); --ease: cubic-bezier(.16, 1, .3, 1); --dur: 320ms; } [data-theme="forest"] { --bg: #F3FBF1; --surface: #FFFFFF; --surface-2: #EEF8EC; --ink: #22331F; --muted: #6B8463; --accent: #3AA655; --accent-2: #C9A227; --accent-soft: #E2F4E2; --accent2-soft: #F6F0D9; --halo: #3AA655; --halo-glow: rgba(58, 166, 85, .45); --line: #D5E9CF; --ok: #3AA655; --ok-soft: #E2F4E2; --danger: #C0405F; --danger-soft: #FBE6EC; --radius-s: 12px; --radius-m: 16px; --radius-l: 26px; --shadow-1: 0 2px 10px rgba(58, 166, 85, .12); --shadow-2: 0 12px 30px rgba(58, 166, 85, .18); --shadow-3: 0 24px 60px rgba(58, 166, 85, .22); --ease: cubic-bezier(.16, 1, .3, 1); --dur: 320ms; } [data-theme="star"] { --bg: #F5F2FF; --surface: #FFFFFF; --surface-2: #EFEAFF; --ink: #2A2440; --muted: #7B7299; --accent: #7C5CFF; --accent-2: #FF8FD6; --accent-soft: #ECE6FF; --accent2-soft: #FCEAF8; --halo: #7C5CFF; --halo-glow: rgba(124, 92, 255, .45); --line: #E0D8F7; --ok: #4Fae6a; --ok-soft: #E6F4EC; --danger: #C0407B; --danger-soft: #FBE6F2; --radius-s: 12px; --radius-m: 16px; --radius-l: 26px; --shadow-1: 0 2px 10px rgba(124, 92, 255, .12); --shadow-2: 0 12px 30px rgba(124, 92, 255, .18); --shadow-3: 0 24px 60px rgba(124, 92, 255, .22); --ease: cubic-bezier(.16, 1, .3, 1); --dur: 320ms; } /* ---------- 字体 ---------- */ :root { --font-display: "Baloo 2", "ZCOOL KuaiLe", "Noto Sans SC", sans-serif; --font-body: "Nunito", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; } /* ========================================================= 重映射：旧变量名 → 主题令牌 覆盖 editor.html 与 styles.css 的全部历史命名， 并补齐之前未定义的 --primary / --primary-bg / --ink-2 等。 ========================================================= */ :root, [data-theme] { --card: var(--surface); --ink2: var(--ink); --ink-2: var(--ink); --ink3: var(--muted); --ink-3: var(--muted); --brand: var(--accent); --brand-2: var(--accent-2); --brand-soft: var(--accent-soft); --blue: var(--accent); --blue-soft: var(--accent-soft); --green: var(--ok); --green-soft: var(--ok-soft); --red: var(--danger); --red-soft: var(--danger-soft); --amber: var(--accent-2); --amber-soft: var(--accent2-soft); --primary: var(--accent); --primary-bg: var(--accent-soft); --radius: var(--radius-m); /* 互动辉光：song 用 --halo/--halo-glow，video 用 --accent-2/--halo-glow-2，随主题变色 */ --halo-glow-2: color-mix(in srgb, var(--accent-2) 45%, transparent); --halo-soft: rgba(255, 255, 255, .55); } /* ---------- 全局基础（极低风险，仅设过渡/字体族） ---------- */ html, body { background: var(--bg); color: var(--ink); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, .logo, .display, .view-head h2 { font-family: var(--font-display); letter-spacing: -.01em; } button, input, select, textarea { font-family: inherit; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ---------- 氛围层：渐变光晕 + 颗粒（可选 class） ---------- */ .atmosphere::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(40rem 30rem at 8% -8%, var(--halo-glow), transparent 60%), radial-gradient(36rem 28rem at 102% 4%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 58%); filter: blur(2px); opacity: .85; transition: background var(--dur) var(--ease); } .grain::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* 尊重「减少动态效果」偏好 */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }