/* ============================================================ VueChest — 全局设计 Token（Design Tokens） ------------------------------------------------------------ 用法：所有组件用 var(--xxx) 取代硬编码颜色/圆角/阴影。 浅色为默认（:root），深色通过 切换 （AdminLayout 已用 documentElement.classList.toggle('dark') 触发）。 此外，任何元素加 .vc-dark 即成为「强制暗色作用域」—— 其子树内全局 token 全部取暗色值，无需逐个组件适配 （用于音乐播放器等自带暗色皮肤的模块）。 词汇沿用项目既有命名（--text-primary / --accent / --bg-card / --border-light / --shadow-sm / --radius-sm …），并在此基础上补全 品牌渐变、圆角阶梯、阴影阶梯、间距阶梯。 ============================================================ */ :root { /* ---------- 品牌 / 主色 ---------- */ --brand-1: #667eea; --brand-2: #764ba2; --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-primary-soft: linear-gradient(135deg, #f5f7ff 0%, #eef1ff 100%); --accent: #667eea; /* 全站主强调色（覆盖 85 处 #667eea）*/ --accent-strong: #764ba2; /* 渐变末端 / hover 加深 */ --accent-contrast: #ffffff; /* 主色上的文字 */ --accent-bg: #eef2ff; /* 浅色强调底（tab/选中行）*/ --accent-light: #c7d2fe; /* 浅色描边 / 发光 */ --accent-rgb: 102, 126, 234; /* 供 rgba(var(--accent-rgb), a) 使用 */ /* ---------- 语义色 ---------- */ --success: #059669; --success-bg: #d1fae5; --warning: #d97706; --warning-bg: #fef3c7; --danger: #dc2626; /* 覆盖 #e74c3c/#f44336/#dc2626/#ff6b6b 红系 */ --danger-bg: #fee2e2; --info: #3498db; /* ---------- 表面 / 背景 ---------- */ --bg-page: #f5f7fa; /* 公开站默认底（同 body 现状）*/ --bg-card: #ffffff; --bg-elevated: #ffffff; --bg-hover: #f3f4f6; --bg-subtle: #f3f4f6; /* 图标底 / tag 底 */ --bg-input: #ffffff; --tag-bg: #f3f4f6; --bg-glass: rgba(255, 255, 255, 0.92); /* 卡片 / 搜索框玻璃底 */ --bg-glass-soft: rgba(255, 255, 255, 0.8); /* 按钮 / tab 玻璃底 */ /* ---------- 文本 ---------- */ --text-primary: #2c3e50; /* 标题 / 强文本（覆盖 42 处 #2c3e50）*/ --text-body: #333333; /* 正文 */ --text-secondary: #6b7280; --text-muted: #9ca3af; --text-dim: #7f8c8d; --text-inverse: #ffffff; /* ---------- 边框 ---------- */ --border: #d1d5db; --border-light: #e5e7eb; --border-color: #d1d5db; /* ---------- 圆角阶梯（4px 基准）---------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 50px; --radius-full: 50%; /* ---------- 阴影阶梯 ---------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2); /* 品牌着色阴影：聚焦 / 发光（rgba(102,126,234) 即 #667eea）*/ --shadow-brand-sm: 0 0 3px rgba(102, 126, 234, 0.1); --shadow-brand-md: 0 4px 14px rgba(102, 126, 234, 0.35); --shadow-brand-lg: 0 6px 20px rgba(102, 126, 234, 0.35); /* ---------- 间距阶梯（4px 基准）---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; /* ---------- 字体字号 ---------- */ --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-size-2xs: 10px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-xl: 16px; --font-size-3xl: 20px; --font-size-4xl: 24px; --font-size-5xl: 28px; --font-size-6xl: 32px; --font-size-8xl: 40px; --font-size-9xl: 48px; --font-size-display-md: 64px; --font-size-display-lg: 96px; --font-size-display-xl: 120px; --font-size-display-2xl: 154px; /* 语义别名：组件优先使用语义名，特殊展示再使用上方 primitive。 */ --font-size-caption: var(--font-size-2xs); /* 标签、时间、计数、图表注记 */ --font-size-meta: var(--font-size-sm); /* 元信息 / 次要说明 */ --font-size-small: var(--font-size-sm); /* 小号正文 / 紧凑控件 */ --font-size-control: var(--font-size-base); /* 紧凑按钮 / 表单控件 */ --font-size-body: var(--font-size-base); /* 默认正文 / 控件文字 */ --font-size-body-lg: var(--font-size-xl); /* 强调正文 */ --font-size-title: var(--font-size-xl); /* 卡片标题 */ --font-size-title-lg: var(--font-size-3xl); /* 大卡片标题 */ --font-size-heading: var(--font-size-3xl); /* 页面区块标题 */ /* ---------- 过渡 ---------- */ --transition-fast: 0.15s ease; --transition: 0.2s ease; /* ---------- 滚动条（跟随主题，见 styles/scrollbar.css）---------- */ --scrollbar-size: 10px; --scrollbar-track: transparent; --scrollbar-thumb: rgba(15, 23, 42, 0.2); --scrollbar-thumb-hover: rgba(15, 23, 42, 0.34); /* ---------- 层级（z-index）约定（全局唯一出处，仅此一处定义）---------- 全局顶层覆盖件的稳定分层。任何弹窗/抽屉/下拉自定义 z-index 都不得越过 --z-confirm。 修改变量（修改层级只动这里）： --z-drawer 1000 抽屉 overlay（调用处可用 --vc-drawer-z 覆盖） --z-modal 1100 模态 overlay（调用处可用 --vc-modal-z 覆盖） --z-custom-select 2000 下拉浮层（已 Teleport 到 body） --z-confirm 3000 全局单例确认框 ConfirmDialog（盖在任意 Modal/Drawer 之上） --z-toast 9999 Toast / 路由加载条（非阻塞通知，最高） 硬规则：全局确认框独占 --z-confirm(3000) 层。 ⚠️ 切勿把 --vc-modal-z / --vc-drawer-z / 下拉浮层设到 ≥3000，否则确认框被压后。 事故：数据管理 Modal 在 Home.vue 设 --vc-modal-z:2000 与确认框旧值 2000 打平， Modal 走 Teleport to="body" 后于 #app 子树挂载 → DOM 顺序取胜 → 确认框被盖。 现 ConfirmDialog 固定 3000、Modal/Drawer/CustomSelect 改读下方 --z-* 变量， 此约定防止复发。 */ --z-drawer: 1000; --z-modal: 1100; --z-custom-select: 2000; --z-confirm: 3000; --z-toast: 9999; } /* 深色：值对齐 AdminLayout 既有 .dark-mode 设定， 由 （documentElement.toggle）驱动，全局生效。*/ :root.dark, .vc-dark { color-scheme: dark; --gradient-primary-soft: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); --accent-bg: #1e293b; --accent-light: #334155; --bg-page: #0f172a; --bg-card: #1e293b; --bg-elevated: #1e293b; --bg-hover: #334155; --bg-subtle: #334155; --bg-input: #0f172a; --tag-bg: #334155; --bg-glass: rgba(30, 41, 59, 0.92); --bg-glass-soft: rgba(30, 41, 59, 0.6); --text-primary: #f1f5f9; --text-body: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --text-dim: #94a3b8; --border: #334155; --border-light: #334155; --border-color: #334155; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5); --shadow-brand-sm: 0 0 3px rgba(102, 126, 234, 0.25); --shadow-brand-md: 0 4px 14px rgba(102, 126, 234, 0.45); --shadow-brand-lg: 0 6px 20px rgba(102, 126, 234, 0.45); --success-bg: #064e3b; --warning-bg: #78350f; --danger-bg: #450a0a; /* 滚动条：深色下用浅色 thumb */ --scrollbar-thumb: rgba(241, 245, 249, 0.22); --scrollbar-thumb-hover: rgba(241, 245, 249, 0.36); }