/* ============================================================ 蓝鲸云 全站设计令牌（唯一来源）— 依据 UI_SPECIFICATION.md 第 1/2 节 硬规则：组件 CSS / 模板 / 内联样式禁止出现未映射为令牌的字面色。 主题机制：（切换脚本见各页面 head）。 ============================================================ */ :root, [data-theme="light"] { /* 品牌色 */ --bk-primary: #0066cc; --bk-primary-hover: #0052a8; --bk-primary-active: #003f80; --bk-primary-soft: rgba(0, 102, 204, 0.08); --bk-accent: #1677ff; --bk-gold: #ffb400; /* 功能色 */ --bk-success: #52c41a; --bk-success-soft: rgba(82, 196, 26, 0.12); --bk-warning: #faad14; --bk-warning-soft: rgba(250, 173, 20, 0.12); --bk-error: #ff4d4f; --bk-error-soft: rgba(255, 77, 79, 0.12); --bk-info: #1677ff; --bk-info-soft: rgba(22, 119, 255, 0.12); /* 中性色 */ --bk-text-1: #1d1d1f; --bk-text-2: #4b4b4f; --bk-text-3: #6e6e73; --bk-text-4: #86868b; --bk-border-1: #d2d2d7; --bk-border-2: #e8e8ed; --bk-bg-1: #ffffff; --bk-bg-2: #f5f5f7; --bk-bg-3: #ebebf0; /* 圆角 */ --bk-radius-sm: 8px; --bk-radius-md: 12px; --bk-radius-lg: 16px; --bk-radius-xl: 24px; --bk-radius-full: 9999px; /* 阴影 */ --bk-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.06); --bk-shadow-2: 0 12px 40px rgba(0, 0, 0, 0.08); --bk-shadow-3: 0 30px 80px rgba(0, 0, 0, 0.12); /* 动效 */ --bk-dur-fast: 150ms; --bk-dur-base: 250ms; --bk-dur-slow: 600ms; --bk-ease: cubic-bezier(0.4, 0, 0.2, 1); /* z-index 档位 */ --bk-z-dropdown: 100; --bk-z-sticky: 200; --bk-z-header: 300; --bk-z-toast: 500; --bk-z-modal: 600; --bk-z-loading: 700; } [data-theme="dark"] { --bk-primary: #3b9dff; --bk-primary-hover: #5cb0ff; --bk-primary-active: #7ec1ff; --bk-primary-soft: rgba(59, 157, 255, 0.16); --bk-accent: #3b9dff; --bk-gold: #ffc53d; --bk-success: #6ddc3c; --bk-success-soft: rgba(109, 220, 60, 0.16); --bk-warning: #ffc53d; --bk-warning-soft: rgba(255, 197, 61, 0.16); --bk-error: #ff7875; --bk-error-soft: rgba(255, 120, 117, 0.16); --bk-info: #3b9dff; --bk-info-soft: rgba(59, 157, 255, 0.16); --bk-text-1: #f5f5f7; --bk-text-2: #c7c7cc; --bk-text-3: #98989d; --bk-text-4: #6e6e73; --bk-border-1: #3a3a3c; --bk-border-2: #2c2c2e; --bk-bg-1: #1c1c1e; --bk-bg-2: #111113; --bk-bg-3: #2c2c2e; --bk-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35); --bk-shadow-2: 0 12px 40px rgba(0, 0, 0, 0.5); --bk-shadow-3: 0 30px 80px rgba(0, 0, 0, 0.6); } /* ---- 全站基础（字体栈含 Inter，修复"加载未使用"问题） ---- */ html { scrollbar-width: thin; scrollbar-color: var(--bk-text-4) var(--bk-bg-3); } body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, sans-serif; font-size: 15px; line-height: 1.6; color: var(--bk-text-1); background: var(--bk-bg-2); -webkit-font-smoothing: antialiased; } /* 统一焦点环（WCAG 2.4.7） */ :focus-visible { outline: 2px solid var(--bk-primary); outline-offset: 2px; } /* 数字排版 */ .bk-num, .tabular-nums { font-variant-numeric: tabular-nums; } /* 统一滚动条 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bk-bg-3); } ::-webkit-scrollbar-thumb { border-radius: var(--bk-radius-full); background: var(--bk-text-4); } ::-webkit-scrollbar-thumb:hover { background: var(--bk-text-3); } /* 全站动效降级 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }