/* ============================================================ 索微运营中心 · 设计 Token v2 单一真相源：所有颜色 / 字体 / 间距 / 圆角 / 阴影 / 动效 引入方式： 切换主题： | 注意：禁止在页面里硬编码颜色 / 间距 / 圆角，必须使用 token ============================================================ */ :root, :root[data-theme="light"] { /* ---- 颜色 · 表面 ---- */ --sw-bg-page: #FAFAF9; /* 页面底色（暖灰） */ --sw-bg-sidebar: #F4F3EF; /* 侧栏底色 */ --sw-bg-surface: #FFFFFF; /* 卡片 / 输入框 / 表格行 */ --sw-bg-subtle: #F8F6F0; /* 表头 / 弱化背景 */ --sw-bg-hover: #EFEDE6; /* hover 态 */ --sw-bg-active: #E8E6DF; /* 选中 / pressed */ /* ---- 颜色 · 边框 ---- */ --sw-border: #E8E6DF; /* 默认 0.5px 边框 */ --sw-border-soft: #F1EFE8; /* 表格行分隔线 */ --sw-border-strong:#D3D1C7; /* hover 边框 */ /* ---- 颜色 · 文字 ---- */ --sw-text: #2C2C2A; /* 主文字 / 大标题 / 数字 */ --sw-text-body: #444441; /* 正文 */ --sw-text-muted: #5F5E5A; /* 二级文字 */ --sw-text-faint: #888780; /* 占位 / 时间戳 / 分组小标题 */ /* ---- 颜色 · 强调（克制使用） ---- */ --sw-accent: #2C2C2A; /* 主操作按钮：黑底反白 */ --sw-accent-on: #FAFAF9; /* 主按钮上的文字 */ --sw-accent-hover: #1A1A18; /* 主按钮 hover */ --sw-link: #534AB7; /* 次要操作 / 文字链 */ --sw-link-hover: #3C3489; /* ---- 颜色 · 状态（pill / 标签）---- */ --sw-success-bg: #EAF3DE; --sw-success-fg: #3B6D11; --sw-warning-bg: #FAEEDA; --sw-warning-fg: #854F0B; --sw-danger-bg: #FCEBEB; --sw-danger-fg: #A32D2D; --sw-info-bg: #E6F1FB; --sw-info-fg: #0C447C; --sw-neutral-bg: #F1EFE8; --sw-neutral-fg: #5F5E5A; /* ---- 颜色 · 状态点（小圆点指示符） ---- */ --sw-dot-ok: #3B6D11; --sw-dot-warn: #BA7517; --sw-dot-err: #A32D2D; /* ---- 字体 ---- */ --sw-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Inter, sans-serif; --sw-font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; --sw-font-num: var(--sw-font-mono); /* 大数字专用 */ /* ---- 字号 ---- */ --sw-fs-xs: 10px; /* 表头小标 / 字距加宽分组 */ --sw-fs-sm: 11px; /* KPI 卡标签 / 时间戳 */ --sw-fs-base: 12px; /* 表格 / 筛选条 */ --sw-fs-md: 13px; /* 菜单项 / 表格主体 */ --sw-fs-lg: 14px; /* topbar 标题 / 卡片小标题 */ --sw-fs-15: 15px; /* 卡片标题（Linear/Vercel 标准） */ --sw-fs-xl: 16px; /* 二级页标题 */ --sw-fs-2xl: 22px; /* KPI 数字（次） */ --sw-fs-3xl: 26px; /* KPI 数字（主） */ /* ---- 字重 ---- */ --sw-fw-regular: 400; --sw-fw-medium: 500; --sw-fw-bold: 600; /* 大数字专用，更稳重压得住 */ /* ---- 字距 ---- */ --sw-track-tight: -0.01em; /* 大数字 */ --sw-track-normal: 0; --sw-track-wide: 0.04em; /* 表头 / 标签 */ --sw-track-wider: 0.08em; /* 侧栏分组小标题 / 农历 */ --sw-track-widest: 0.1em; /* ---- 行高 ---- */ --sw-lh-tight: 1.2; --sw-lh-normal: 1.5; --sw-lh-loose: 1.7; /* ---- 间距阶梯（4 的倍数） ---- */ --sw-space-1: 4px; --sw-space-2: 6px; --sw-space-3: 8px; --sw-space-4: 10px; --sw-space-5: 12px; --sw-space-6: 14px; --sw-space-7: 16px; --sw-space-8: 20px; --sw-space-9: 24px; --sw-space-10:32px; /* ---- gap 别名（语义清晰，便于 grid/flex 使用） ---- */ --sw-gap-tight: 10px; /* KPI 网格 / 紧凑布局 */ --sw-gap-normal: 12px; /* 默认网格 */ --sw-gap-loose: 16px; /* 大卡片之间 */ /* ---- 圆角 ---- */ --sw-radius-xs: 3px; /* 状态 pill */ --sw-radius-sm: 6px; /* 输入框 / 筛选条 / 菜单项 */ --sw-radius-md: 8px; /* 卡片 / 主按钮 */ --sw-radius-lg: 12px; /* 大容器（少用） */ --sw-radius-full: 999px; /* ---- 阴影（极克制，仅在 modal / dropdown）---- */ --sw-shadow-none: none; --sw-shadow-sm: 0 1px 2px rgba(44, 44, 42, 0.04); --sw-shadow-md: 0 4px 12px rgba(44, 44, 42, 0.08); --sw-shadow-lg: 0 12px 32px rgba(44, 44, 42, 0.12); /* ---- 焦点环（无障碍必需） ---- */ --sw-focus-ring: 0 0 0 2px rgba(83, 74, 183, 0.35); /* ---- 动效 ---- */ --sw-ease: cubic-bezier(0.2, 0, 0, 1); --sw-dur-fast: 120ms; --sw-dur-base: 180ms; --sw-dur-slow: 240ms; /* ---- 布局 ---- */ --sw-sidebar-w: 184px; --sw-topbar-h: 44px; --sw-content-px: 24px; --sw-content-py: 20px; --sw-bp-mobile: 768px; } /* ============================================================ 暗色模式 ============================================================ */ :root[data-theme="dark"] { --sw-bg-page: #14171C; --sw-bg-sidebar: #0F1115; --sw-bg-surface: #1A1E25; --sw-bg-subtle: #161A20; --sw-bg-hover: #232831; --sw-bg-active: #2C323D; --sw-border: #232831; --sw-border-soft: #1F232B; --sw-border-strong:#3A4150; --sw-text: #E6EAF2; --sw-text-body: #C9CFDA; --sw-text-muted: #9AA4B2; --sw-text-faint: #6B7784; /* 提升到 3.5:1 对比，给安全裕度 */ --sw-accent: #E6EAF2; --sw-accent-on: #14171C; --sw-accent-hover: #FFFFFF; --sw-link: #AFA9EC; --sw-link-hover: #CECBF6; --sw-success-bg: #1A2D14; --sw-success-fg: #97C459; --sw-warning-bg: #2D2114; --sw-warning-fg: #EF9F27; --sw-danger-bg: #2D1717; --sw-danger-fg: #F09595; --sw-info-bg: #0F1F35; --sw-info-fg: #85B7EB; --sw-neutral-bg: #1F232B; --sw-neutral-fg: #9AA4B2; --sw-dot-ok: #97C459; --sw-dot-warn: #EF9F27; --sw-dot-err: #F09595; --sw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --sw-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --sw-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); --sw-focus-ring: 0 0 0 2px rgba(175, 169, 236, 0.45); } /* ============================================================ 全局 reset & 字体应用 ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: var(--sw-font-sans); font-size: var(--sw-fs-md); font-weight: var(--sw-fw-regular); line-height: var(--sw-lh-normal); color: var(--sw-text-body); background: var(--sw-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 可访问性：焦点环 */ :focus-visible { outline: none; box-shadow: var(--sw-focus-ring); border-radius: var(--sw-radius-sm); } /* 可访问性：减少动效偏好 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }