/** * tokens.css — 颜色/间距/字号/圆角/阴影/字体语义化变量 * 仅定义变量,具体值由 themes.css 和 accents.css 提供。 */ :root { /* 背景层级(从底层到顶层) */ --bg-base: #FFFFFF; --bg-soft: #F7F8FA; --bg-overlay: #FFFFFF; --bg-hover: #F3F4F6; /* 边框 */ --border: #E5E7EB; --border-soft: #F1F2F4; --border-strong: #D1D5DB; /* 文字层级(muted 保持可读:对底色对比 ≥ 3:1,仅作 placeholder/辅助信息) */ --text: #111827; --text-soft: #4B5563; --text-muted: #6B7280; /* 强调色(被 accents.css 覆盖) */ --accent: #5E6AD2; --accent-soft: rgba(94, 106, 210, 0.12); --accent-hover: rgba(94, 106, 210, 0.20); /* accent 底色上的文字色:亮色系 accent(green/orange)白字对比度仅 ~2:1, * accents.css 对这两个色系覆盖成深色文字。 */ --accent-text: #FFFFFF; /* accent 作「文字色」用时的取值(Tab 激活、复制按钮、外链等)。 * 默认 = accent 本身;light 主题下亮色系 accent 对比度不足, * accents.css 按 [data-theme="light"][data-accent="..."] 覆盖成深色变体。 */ --accent-fg: var(--accent); /* 状态色 */ --success: #10B981; --warn: #F59E0B; --warn-bg: rgba(245, 158, 11, 0.12); --danger: #EF4444; --danger-bg: rgba(239, 68, 68, 0.12); --danger-border: rgba(239, 68, 68, 0.4); /* 阴影 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); /* 圆角 */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; /* 字号(中文偏小容易糊,整体往上提一档;列表正文单独压一档避免占空间) */ --fs-xs: 11px; /* 时间戳/角标:再小就糊 */ --fs-sm: 12px; /* Tab/状态栏/设置副文字 */ --fs-base: 13px; /* 列表正文:清晰度优先 */ --fs-md: 14px; /* 标题/按钮/设置项 */ --fs-lg: 16px; /* 「关于」大标题 */ /* 行高(中文需要更大行高才不会笔画粘连;1.6 是 Windows 上 CJK 舒适区) */ --lh-base: 1.6; /* 字间距(提一档让小字笔画清晰;0.02em 在 13px 以上会显得字间距过大,收到 0.01em) */ --tracking-cn: 0.01em; /* 字体(fonts.css 会覆盖这两个) */ --font-ui: 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', 'Microsoft YaHei', monospace; /* 字重 */ --fw-medium: 500; --fw-semibold: 600; /* 动效 */ --transition-fast: 100ms ease-out; --transition-base: 150ms ease-out; }