/* ========================================================================== collink · tokens.css —— 设计令牌单一来源 -------------------------------------------------------------------------- 两个维度互相独立，可自由组合出 4 种外观： data-theme = light | dark | auto （明暗基调，auto 跟随系统） data-color = pink | blue （配色主题：淡粉 🌸 / 淡蓝 🌊） 均挂在 上，由 js/store.js 的 ThemeManager 写入并持久化。 命名约定： --c-* 原始色相（HSL 分量，可被 hsl()/color-mix() 复用） --bg/--fg 语义色，供组件直接使用 --bp-* 断点（仅作文档，@media 不能读 var，见 responsive.css） 旧变量名（--bg --bg-2 --bg-3 --fg --fg-2 --line --accent …）全部保留， 因此 style.css / front.css 的既有规则无需改动即可继承新主题。 ========================================================================== */ /* ── 1. 与配色无关的基础令牌 ────────────────────────────── */ :root{ /* 断点（与 responsive.css 中的 @media 数值保持一致） */ --bp-xs: 320px; --bp-sm: 480px; --bp-md: 768px; /* 手机 → 平板 */ --bp-lg: 1024px; /* 平板 → 桌面 */ --bp-xl: 1280px; /* 间距（4px 基准） */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* 圆角 */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; --radius: var(--r-md); /* 旧名 */ /* 字体 */ --font-sans: "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-md: 13.5px; --fs-lg: 15px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; /* 层级 */ --z-base: 1; --z-sticky: 30; --z-sidebar: 40; --z-drawer: 60; --z-scrim: 55; --z-modal: 100; --z-toast: 200; --z-tooltip: 300; /* 动效：统一时长/曲线，便于一处降级 */ --dur-fast: .14s; --dur-mid: .24s; --dur-slow: .38s; --ease: cubic-bezier(.4, 0, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* 布局尺寸 */ --side-w: 240px; /* 桌面侧栏 */ --side-w-icon: 64px; /* 平板图标栏 */ --topbar-h: 56px; --bottomnav-h: 58px; --tap: 44px; /* 最小触控区域 */ /* 安全区（iPhone 刘海 / 底部横条） */ --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); } /* ── 2. 淡粉主题 · 浅色 (Soft Pink / Sakura) ─────────────── 默认外观：未设置 data-color 时也走这一套，因此 :root 单独兜底。 */ :root, :root[data-color="pink"]{ --c-h: 340; --c-s: 82%; --c-l: 76%; /* 主色 HSL 分量 */ --c-h2: 350; --c-s2: 90%; --c-l2: 88%; /* 渐变辅色 */ --accent: hsl(340 82% 76%); --accent-2: hsl(340 70% 66%); /* hover：同色相压暗 */ --accent-soft: hsl(350 90% 88%); --accent-ink: hsl(340 60% 35%); /* 主文本与强调色 */ --accent-on: #fff; /* 主色块上的文字 */ --grad: linear-gradient(135deg, hsl(340 82% 76%), hsl(350 90% 88%)); --grad-soft: linear-gradient(135deg, hsl(340 82% 76% / .16), hsl(350 90% 88% / .10)); --bg: hsl(340 46% 98%); --bg-2: hsl(0 0% 100%); --bg-3: hsl(340 40% 96%); --bg-4: hsl(340 34% 93%); --fg: hsl(340 22% 18%); --fg-2: hsl(340 12% 46%); --fg-3: hsl(340 10% 62%); --line: hsl(340 34% 90%); --line-2: hsl(340 30% 84%); /* 玻璃态：卡片底色 + 边框 + 高光 */ --glass-bg: hsl(0 0% 100% / .72); --glass-bg-2: hsl(0 0% 100% / .55); --glass-line: hsl(340 60% 70% / .15); --glass-blur: 16px; --glass-hi: hsl(0 0% 100% / .60); /* 阴影：多层柔和 + 主色发光 */ --sh-1: 0 1px 2px hsl(340 40% 40% / .05), 0 2px 8px hsl(340 40% 50% / .05); --sh-2: 0 2px 6px hsl(340 40% 40% / .06), 0 8px 32px hsl(340 44% 52% / .09); --sh-3: 0 8px 20px hsl(340 40% 40% / .09), 0 20px 56px hsl(340 44% 52% / .14); --sh-glow: 0 0 0 3px hsl(340 82% 76% / .22); --sh-glow-lg: 0 6px 26px hsl(340 82% 70% / .34); --shadow: var(--sh-2); /* 旧名 */ /* 氛围气泡（页面背景装饰） */ --blob-1: hsl(340 90% 84% / .50); --blob-2: hsl(350 92% 88% / .42); --blob-3: hsl(320 80% 86% / .34); /* 状态色：向配色主题微调色相，避免与主色打架 */ --ok: hsl(152 58% 42%); --warn: hsl(36 88% 52%); --err: hsl(352 74% 56%); --info: hsl(210 82% 56%); --ok-bg: hsl(152 58% 42% / .12); --warn-bg: hsl(36 88% 52% / .14); --err-bg: hsl(352 74% 56% / .12); --info-bg: hsl(210 82% 56% / .12); --scrim: hsl(340 30% 14% / .46); color-scheme: light; } /* ── 3. 淡蓝主题 · 浅色 (Soft Blue / Sky) ─────────────────── */ :root[data-color="blue"]{ --c-h: 205; --c-s: 85%; --c-l: 70%; --c-h2: 195; --c-s2: 90%; --c-l2: 85%; --accent: hsl(205 85% 70%); --accent-2: hsl(205 72% 58%); --accent-soft: hsl(195 90% 85%); --accent-ink: hsl(205 65% 35%); --accent-on: #fff; --grad: linear-gradient(135deg, hsl(205 85% 70%), hsl(195 90% 85%)); --grad-soft: linear-gradient(135deg, hsl(205 85% 70% / .16), hsl(195 90% 85% / .10)); --bg: hsl(205 48% 98%); --bg-2: hsl(0 0% 100%); --bg-3: hsl(205 44% 96%); --bg-4: hsl(205 38% 93%); --fg: hsl(210 26% 17%); --fg-2: hsl(210 14% 45%); --fg-3: hsl(210 12% 61%); --line: hsl(205 38% 89%); --line-2: hsl(205 34% 83%); --glass-bg: hsl(0 0% 100% / .72); --glass-bg-2: hsl(0 0% 100% / .55); --glass-line: hsl(205 70% 62% / .16); --glass-blur: 16px; --glass-hi: hsl(0 0% 100% / .60); --sh-1: 0 1px 2px hsl(205 40% 34% / .05), 0 2px 8px hsl(205 44% 46% / .06); --sh-2: 0 2px 6px hsl(205 40% 34% / .06), 0 8px 32px hsl(205 48% 48% / .10); --sh-3: 0 8px 20px hsl(205 40% 34% / .09), 0 20px 56px hsl(205 48% 48% / .15); --sh-glow: 0 0 0 3px hsl(205 85% 70% / .24); --sh-glow-lg: 0 6px 26px hsl(205 85% 64% / .34); --shadow: var(--sh-2); --blob-1: hsl(205 92% 82% / .50); --blob-2: hsl(195 94% 86% / .44); --blob-3: hsl(225 86% 86% / .34); --ok: hsl(158 62% 40%); --warn: hsl(34 90% 50%); --err: hsl(356 72% 55%); --info: hsl(205 85% 52%); --ok-bg: hsl(158 62% 40% / .12); --warn-bg: hsl(34 90% 50% / .14); --err-bg: hsl(356 72% 55% / .12); --info-bg: hsl(205 85% 52% / .12); --scrim: hsl(210 34% 12% / .48); color-scheme: light; } /* ── 4. 淡粉主题 · 深色 ──────────────────────────────────── 说明：明暗只看 [data-mode]（由 ThemeManager 把 auto 解析成 light/dark 后写入），所以每套配色只需要一个深色分支， 不必为 data-theme="dark" 和 prefers-color-scheme 各写一遍。 深色下主色提亮、饱和度收一点，避免荧光感；--accent-ink 反转为浅色。 */ :root[data-mode="dark"], :root[data-mode="dark"][data-color="pink"]{ --c-h: 340; --c-s: 74%; --c-l: 72%; --c-h2: 350; --c-s2: 70%; --c-l2: 78%; --accent: hsl(340 74% 72%); --accent-2: hsl(340 80% 80%); /* 深色下 hover 提亮 */ --accent-soft: hsl(350 44% 30%); --accent-ink: hsl(340 78% 84%); --accent-on: hsl(340 40% 14%); --grad: linear-gradient(135deg, hsl(340 74% 70%), hsl(350 62% 76%)); --grad-soft: linear-gradient(135deg, hsl(340 74% 70% / .20), hsl(350 62% 76% / .10)); --bg: hsl(335 18% 9%); --bg-2: hsl(335 16% 13%); --bg-3: hsl(335 15% 17%); --bg-4: hsl(335 14% 22%); --fg: hsl(340 18% 94%); --fg-2: hsl(340 12% 68%); --fg-3: hsl(340 10% 52%); --line: hsl(335 14% 24%); --line-2: hsl(335 13% 32%); --glass-bg: hsl(335 16% 15% / .70); --glass-bg-2: hsl(335 16% 18% / .50); --glass-line: hsl(340 60% 78% / .14); --glass-blur: 18px; --glass-hi: hsl(340 60% 90% / .10); --sh-1: 0 1px 2px hsl(0 0% 0% / .30), 0 2px 8px hsl(0 0% 0% / .26); --sh-2: 0 2px 6px hsl(0 0% 0% / .34), 0 8px 32px hsl(0 0% 0% / .38); --sh-3: 0 8px 20px hsl(0 0% 0% / .40), 0 20px 56px hsl(0 0% 0% / .48); --sh-glow: 0 0 0 3px hsl(340 74% 72% / .30); --sh-glow-lg: 0 6px 26px hsl(340 74% 60% / .40); --shadow: var(--sh-2); --blob-1: hsl(340 70% 60% / .22); --blob-2: hsl(350 66% 64% / .18); --blob-3: hsl(320 62% 58% / .16); --ok: hsl(152 52% 56%); --warn: hsl(38 88% 64%); --err: hsl(352 84% 70%); --info: hsl(210 84% 70%); --ok-bg: hsl(152 52% 56% / .16); --warn-bg: hsl(38 88% 64% / .16); --err-bg: hsl(352 84% 70% / .16); --info-bg: hsl(210 84% 70% / .16); --scrim: hsl(335 30% 4% / .66); color-scheme: dark; } /* ── 5. 淡蓝主题 · 深色 ──────────────────────────────────── */ :root[data-mode="dark"][data-color="blue"]{ --c-h: 205; --c-s: 78%; --c-l: 68%; --c-h2: 195; --c-s2: 72%; --c-l2: 76%; --accent: hsl(205 78% 68%); --accent-2: hsl(200 84% 78%); --accent-soft: hsl(200 44% 28%); --accent-ink: hsl(200 82% 80%); --accent-on: hsl(205 60% 12%); --grad: linear-gradient(135deg, hsl(205 78% 66%), hsl(195 64% 74%)); --grad-soft: linear-gradient(135deg, hsl(205 78% 66% / .20), hsl(195 64% 74% / .10)); --bg: hsl(212 24% 9%); --bg-2: hsl(212 22% 13%); --bg-3: hsl(212 20% 17%); --bg-4: hsl(212 18% 22%); --fg: hsl(205 20% 94%); --fg-2: hsl(205 14% 68%); --fg-3: hsl(205 12% 52%); --line: hsl(212 18% 24%); --line-2: hsl(212 17% 32%); --glass-bg: hsl(212 22% 15% / .70); --glass-bg-2: hsl(212 22% 18% / .50); --glass-line: hsl(205 70% 78% / .14); --glass-blur: 18px; --glass-hi: hsl(200 70% 90% / .10); --sh-1: 0 1px 2px hsl(0 0% 0% / .30), 0 2px 8px hsl(0 0% 0% / .26); --sh-2: 0 2px 6px hsl(0 0% 0% / .34), 0 8px 32px hsl(0 0% 0% / .38); --sh-3: 0 8px 20px hsl(0 0% 0% / .40), 0 20px 56px hsl(0 0% 0% / .48); --sh-glow: 0 0 0 3px hsl(205 78% 68% / .32); --sh-glow-lg: 0 6px 26px hsl(205 78% 58% / .40); --shadow: var(--sh-2); --blob-1: hsl(205 76% 58% / .24); --blob-2: hsl(195 72% 62% / .20); --blob-3: hsl(225 68% 60% / .16); --ok: hsl(158 54% 54%); --warn: hsl(36 90% 64%); --err: hsl(356 84% 70%); --info: hsl(205 90% 72%); --ok-bg: hsl(158 54% 54% / .16); --warn-bg: hsl(36 90% 64% / .16); --err-bg: hsl(356 84% 70% / .16); --info-bg: hsl(205 90% 72% / .16); --scrim: hsl(212 40% 3% / .66); color-scheme: dark; } /* ── 6. 无 JS 兜底 ──────────────────────────────────────── ThemeManager 会在 内联脚本里立刻写入 data-mode； 万一 JS 被禁用，[data-mode] 不存在，这里跟随系统给出深色。 变量集合与上面的粉色深色一致，只是选择器不同。 */ @media (prefers-color-scheme: dark){ :root:not([data-mode]){ --accent: hsl(340 74% 72%); --accent-2: hsl(340 80% 80%); --accent-soft: hsl(350 44% 30%); --accent-ink: hsl(340 78% 84%); --accent-on: hsl(340 40% 14%); --grad: linear-gradient(135deg, hsl(340 74% 70%), hsl(350 62% 76%)); --bg: hsl(335 18% 9%); --bg-2: hsl(335 16% 13%); --bg-3: hsl(335 15% 17%); --bg-4: hsl(335 14% 22%); --fg: hsl(340 18% 94%); --fg-2: hsl(340 12% 68%); --fg-3: hsl(340 10% 52%); --line: hsl(335 14% 24%); --line-2: hsl(335 13% 32%); --glass-bg: hsl(335 16% 15% / .70); --glass-bg-2: hsl(335 16% 18% / .50); --glass-line: hsl(340 60% 78% / .14); --glass-hi: hsl(340 60% 90% / .10); --sh-2: 0 2px 6px hsl(0 0% 0% / .34), 0 8px 32px hsl(0 0% 0% / .38); --shadow: var(--sh-2); --ok: hsl(152 52% 56%); --warn: hsl(38 88% 64%); --err: hsl(352 84% 70%); --info: hsl(210 84% 70%); --scrim: hsl(335 30% 4% / .66); color-scheme: dark; } } /* ── 6.5 主题切换过渡 ───────────────────────────────────── .theme-anim 由 ThemeManager 在首帧之后才加上：首屏就带过渡的话， 变量初始化会被动画成一次可见的变色闪烁。切换时临时加 .theme-swap 让颜色平滑过渡，300ms 后移除，避免所有交互都被拖慢。 */ :root.theme-anim.theme-swap, :root.theme-anim.theme-swap *, :root.theme-anim.theme-swap *::before, :root.theme-anim.theme-swap *::after{ transition: background-color var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease), color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease) !important; transition-delay: 0s !important; } /* ── 7. 无障碍与降级 ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce){ :root{ --dur-fast: .01ms; --dur-mid: .01ms; --dur-slow: .01ms; } } /* 不支持 backdrop-filter（旧 Firefox / 部分安卓 WebView）时， 把玻璃底色换成不透明，否则文字会糊在背景上不可读。 */ @supports not (backdrop-filter: blur(4px)){ :root{ --glass-bg: var(--bg-2); --glass-bg-2: var(--bg-2); --glass-blur: 0px; } } /* 高对比度偏好：加深描边与正文色 */ @media (prefers-contrast: more){ :root{ --line: var(--line-2); --fg-2: var(--fg); } }