/* ===================================================================== XX 设计系统 — canonical 主题 token（UNIFY_CONTRACT §3，CC-B 产出） --------------------------------------------------------------------- 两套皮肤同名变量、不同取值： neo（默认）= 酷炫 web3（深蓝黑 + 霓虹青/紫/品红） pro = 现有专业皮肤（深空黑 + cyan→green） 首屏前由 index.html 头内联脚本读 xx_theme cookie 设 。 本文件【先于 styles.css 加载】并拥有【全部设计 token】；styles.css 只写组件规则。 ⚠️ 接口冻结：token 名/JS API 改动须先报整合方（CC-C 会原样复制本文件）。 ===================================================================== */ :root{ color-scheme:dark; /* 字体（两皮肤共享） */ --display:"Space Grotesk","Noto Sans SC",system-ui,sans-serif; --hud:"Orbitron","Space Grotesk",sans-serif; --body:"Noto Sans SC","Space Grotesk",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* 效果尺度（两皮肤共享，颜色相关效果在皮肤块内覆盖） */ --radius:14px; --blur:14px; --maxw:1180px; } /* ======================= NEO（默认 · 酷炫 web3） ======================= */ :root, [data-theme="neo"]{ /* 方向A 精炼：近黑(微暖紫调)底 + 亮度阶层次；降饱和青蓝/柔紫双色，弃第三霓虹(洋红仅极淡点缀) */ --bg:#0C0B12; --bg-2:#100E18; --surface:#16141F; --surface-2:#1D1B29; --ink:#ECECF4; --muted:#9690A8; --soft:rgba(236,236,244,.82); --line:rgba(150,130,200,.14); --line-strong:rgba(120,150,220,.32); --c1:#6FB7E0; --c2:#9A86D8; --c3:#C77FC0; --warn:#E4C16E; --danger:#E6788A; --grad:linear-gradient(120deg,#6FB7E0,#9A86D8); --grad-soft:linear-gradient(120deg,rgba(111,183,224,.13),rgba(154,134,216,.11)); --glow:0 0 22px rgba(120,150,220,.28); --shadow:0 24px 70px rgba(0,0,0,.55); /* —— 旧变量别名（让既有 styles.css 即时适配并随主题切换；勿删） —— */ --void:var(--bg); --void-2:var(--bg-2); --cyan:var(--c1); --green:var(--c2); --lime:var(--c3); --rose:var(--danger); } /* ======================= PRO（专业 = 现有店面） ======================= */ [data-theme="pro"]{ /* 方向A 精炼：近黑(微冷)底 + 亮度阶层次 + 强调色降饱和~20%、单一青色主调 */ --bg:#0B0E12; --bg-2:#0E1218; --surface:#141922; --surface-2:#1B212C; --ink:#EAF1F6; --muted:#8A97A6; --soft:rgba(234,241,246,.82); --line:rgba(120,180,200,.12); --line-strong:rgba(86,199,221,.32); --c1:#56C7DD; --c2:#4FD89B; --c3:#8FD46A; --warn:#E4C16E; --danger:#E67888; --grad:linear-gradient(120deg,#56C7DD,#4FD89B); --grad-soft:linear-gradient(120deg,rgba(86,199,221,.13),rgba(79,216,155,.11)); --glow:0 0 22px rgba(86,199,221,.28); --shadow:0 24px 70px rgba(0,0,0,.55); --void:var(--bg); --void-2:var(--bg-2); --cyan:var(--c1); --green:var(--c2); --lime:var(--c3); --rose:var(--danger); } /* ======================= 主题切换按钮（统一 class） ======================= */ .xx-theme-toggle{ display:inline-flex;align-items:center;gap:7px;cursor:pointer; font-family:var(--mono);font-size:11.5px;letter-spacing:.06em; color:var(--soft);padding:7px 12px;border-radius:999px; border:1px solid var(--line-strong);background:rgba(127,140,255,.07); transition:border-color .25s,background .25s,color .25s,transform .2s;white-space:nowrap} .xx-theme-toggle:hover{color:var(--ink);background:var(--grad-soft);transform:translateY(-1px)} .xx-theme-toggle .xx-tt-ico{width:15px;height:15px;display:inline-grid;place-items:center;font-size:13px;line-height:1} .xx-theme-toggle .xx-tt-lab{opacity:.9} @media(max-width:520px){.xx-theme-toggle .xx-tt-lab{display:none}} /* 语言切换按钮（与主题按钮同视觉语言） */ .xx-lang-toggle{ display:inline-flex;align-items:center;justify-content:center;cursor:pointer; font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;min-width:42px; color:var(--soft);padding:7px 11px;border-radius:999px; border:1px solid var(--line-strong);background:rgba(127,140,255,.07); transition:border-color .25s,background .25s,color .25s,transform .2s;white-space:nowrap} .xx-lang-toggle:hover{color:var(--ink);background:var(--grad-soft);transform:translateY(-1px)} /* ======================= fx.js 动效层（流星 + 极光/粒子） ======================= */ .xx-fx-ambient{position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen} .xx-fx-cursor{position:fixed;inset:0;z-index:90;pointer-events:none;mix-blend-mode:screen} @media(prefers-reduced-motion:reduce){.xx-fx-cursor{display:none}}