/* ========================================================================== * 知穹网 · 全站设计 Token * 文件：static/zai/ui/tokens.css * 版本：v1.0（2026-10-23） * 说明：本文件只声明 CSS 自定义属性（:root + 字体栈 + 重置）， * 不包含任何组件样式。组件样式见 components.css。 * 落地约定： * · 套件 CSS 只能用 var(--zai-*)，不得重定义 :root 变量 * · 如需局部覆盖（如美业换主色），在套件顶级容器上做 * .zai-wrap.is-beauty { --zai-color-primary: var(--zai-color-accent); } * ========================================================================== */ /* -------------------------------------------------------------------------- * 字体栈（必须含 PingFang SC / Microsoft YaHei 兜底） * -------------------------------------------------------------------------- */ :root { --zai-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --zai-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* -------------------------------------------------------------------------- * 颜色：品牌色 * ------------------------------------------------------------------------ */ --zai-color-primary: #2563EB; --zai-color-primary-hover: #1D4ED8; --zai-color-primary-soft: #EFF6FF; --zai-color-accent: #D85A30; --zai-color-accent-hover: #C14C28; --zai-color-accent-soft: #FEF3EF; /* -------------------------------------------------------------------------- * 颜色：中性灰（9 阶 Slate） * ------------------------------------------------------------------------ */ --zai-neutral-50: #F8FAFC; --zai-neutral-100: #F1F5F9; --zai-neutral-200: #E2E8F0; --zai-neutral-300: #CBD5E1; --zai-neutral-400: #94A3B8; --zai-neutral-500: #64748B; --zai-neutral-600: #475569; --zai-neutral-700: #334155; --zai-neutral-800: #1E293B; --zai-neutral-900: #0F172A; /* -------------------------------------------------------------------------- * 颜色：语义色 * ------------------------------------------------------------------------ */ --zai-color-success: #16A34A; --zai-color-success-soft: #DCFCE7; --zai-color-warning: #D97706; --zai-color-warning-soft: #FEF3C7; --zai-color-danger: #DC2626; --zai-color-danger-soft: #FEE2E2; --zai-color-danger-veil: rgba(220, 38, 38, .06); --zai-color-danger-line: rgba(220, 38, 38, .16); --zai-color-info: #0891B2; --zai-color-info-soft: #CFFAFE; /* -------------------------------------------------------------------------- * 颜色：语义变量（引用上面的色阶） * ------------------------------------------------------------------------ */ --zai-bg: var(--zai-neutral-50); --zai-surface: #FFFFFF; --zai-surface-sunken: var(--zai-neutral-100); --zai-border: var(--zai-neutral-200); --zai-border-strong: var(--zai-neutral-300); --zai-text-primary: var(--zai-neutral-900); --zai-text-secondary: var(--zai-neutral-600); --zai-text-muted: var(--zai-neutral-400); --zai-text-on-primary: #FFFFFF; --zai-link: var(--zai-color-primary); --zai-link-hover: var(--zai-color-primary-hover); /* -------------------------------------------------------------------------- * 字号阶梯 * ------------------------------------------------------------------------ */ --zai-font-display: 48px; --zai-font-h1: 36px; --zai-font-h2: 28px; --zai-font-h3: 20px; --zai-font-body-lg: 16px; --zai-font-body: 14px; --zai-font-label: 14px; --zai-font-caption: 12px; /* -------------------------------------------------------------------------- * 间距（8px 基准，8 档） * ------------------------------------------------------------------------ */ --zai-space-1: 4px; --zai-space-2: 8px; --zai-space-3: 12px; --zai-space-4: 16px; --zai-space-6: 24px; --zai-space-8: 32px; --zai-space-12: 48px; --zai-space-16: 64px; /* -------------------------------------------------------------------------- * 间距语义别名（2026-10-23 A 机补，与 site.css 对齐） * site.css 用 xs/sm/md/lg/xl/2xl 语义档，这里补一层等价别名指向数字档。 * 既不破坏数字档，也让语义档统一落到 tokens.css 唯一真相源。 * ------------------------------------------------------------------------ */ --zai-space-xs: var(--zai-space-1); --zai-space-sm: var(--zai-space-2); --zai-space-md: var(--zai-space-4); --zai-space-lg: var(--zai-space-6); --zai-space-xl: var(--zai-space-8); --zai-space-2xl: var(--zai-space-12); /* -------------------------------------------------------------------------- * 圆角 * ------------------------------------------------------------------------ */ --zai-radius-xs: 4px; --zai-radius-sm: 6px; --zai-radius-md: 8px; --zai-radius-lg: 12px; --zai-radius-xl: 16px; --zai-radius-2xl: 24px; --zai-radius-full: 9999px; /* -------------------------------------------------------------------------- * 阴影 * ------------------------------------------------------------------------ */ --zai-shadow-xs: 0 1px 2px rgba(15, 23, 42, .06); --zai-shadow-sm: 0 2px 8px rgba(15, 23, 42, .08); --zai-shadow-md: 0 6px 16px rgba(15, 23, 42, .10); --zai-shadow-lg: 0 12px 32px rgba(15, 23, 42, .14); --zai-shadow-focus: 0 0 0 3px rgba(37, 99, 235, .28); /* -------------------------------------------------------------------------- * 层级（z-index） * ------------------------------------------------------------------------ */ --zai-z-content: 0; --zai-z-sticky: 100; --zai-z-popover: 200; --zai-z-modal-backdrop: 300; --zai-z-modal: 301; --zai-z-drawer: 302; --zai-z-toast: 400; /* -------------------------------------------------------------------------- * 动效 * ------------------------------------------------------------------------ */ --zai-ease-out: cubic-bezier(.2, .8, .2, 1); --zai-ease-in-out: cubic-bezier(.4, 0, .2, 1); --zai-duration-fast: 80ms; --zai-duration-base: 160ms; --zai-duration-slow: 280ms; --zai-duration-entrance: 400ms; /* -------------------------------------------------------------------------- * 布局 * ------------------------------------------------------------------------ */ --zai-container-max: 1200px; --zai-container-wide: 1440px; --zai-gutter: 24px; --zai-header-h: 56px; --zai-header-h-mobile: 48px; --zai-sidebar-w: 240px; /* -------------------------------------------------------------------------- * 图标尺寸 * ------------------------------------------------------------------------ */ --zai-icon-xs: 12px; --zai-icon-sm: 16px; --zai-icon-md: 20px; --zai-icon-lg: 24px; --zai-icon-xl: 32px; } /* -------------------------------------------------------------------------- * 全局重置（极简，只做跨浏览器一致性） * ------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; padding: 0; font-family: var(--zai-font-sans); font-size: var(--zai-font-body); line-height: 1.7; color: var(--zai-text-primary); background: var(--zai-bg); } a { color: var(--zai-link); text-decoration: none; transition: color var(--zai-duration-fast) var(--zai-ease-out); } a:hover { color: var(--zai-link-hover); } /* 清晰焦点环，不被裁切 */ :focus-visible { outline: none; box-shadow: var(--zai-shadow-focus); border-radius: var(--zai-radius-sm); } /* 图片自适应 */ img { max-width: 100%; display: block; } /* 降低动效偏好 → 全部禁动效 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Knowledge 紫色系 — T-B11 入口需求 */ --zai-color-accent-purple: #7C3AED; --zai-color-accent-purple-hover: #6D28D9; --zai-color-accent-purple-soft: #F5F3FF;