/* ============================================================ zhenzhenai V3 · 设计体系 Token（唯一视觉源） 版本：2.0.18 · 极简现代 Minimalist Modern 来源：docs/design/system/tokens.json（slash 命名） CSS 命名：--bg-page 对应 bg/page，--status-ok 对应 status/ok 引入方式：页面 第一行 stylesheet 引入本文件 主题：html[data-theme="dark"] 覆盖同名变量 维护：修改 token 必须同时改 tokens.json / tokens.md / 本文件 校验：npm run check:design-system 状态：已实施到项目实际页面 ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap"); :root { /* 背景与表面 */ --bg-page: #FAFAFA; /* bg/page */ --bg-card: #FFFFFF; /* bg/card */ --bg-muted: #F1F5F9; /* bg/muted */ --bg-soft-accent: rgba(0,82,255,.08); /* bg/soft-accent */ /* 文字 */ --text-primary: #0F172A; /* text/primary */ --text-body: #0F172A; /* text/body */ --text-muted: #64748B; /* text/muted */ --text-disabled: #94A3B8; /* text/disabled */ /* 边框 */ --border-default: #E2E8F0; /* border/default */ /* 强调 */ --accent: #0052FF; /* accent · Electric Blue */ --accent-secondary: #4D7CFF; /* accent-secondary */ --accent-foreground: #FFFFFF; /* accent-foreground */ --ring: #0052FF; /* ring */ --gradient: linear-gradient(135deg,#0052FF,#4D7CFF); /* 状态 */ --status-ok: #10B981; /* status/ok */ --status-ok-soft: rgba(16,185,129,.10); --status-warn: #F59E0B; /* status/warn */ --status-warn-soft: rgba(245,158,11,.12); --status-error: #EF4444; /* status/error */ --status-error-soft: rgba(239,68,68,.10); /* 阴影 */ --shadow-sm: 0 1px 3px rgba(0,0,0,.06); --shadow-md: 0 4px 6px rgba(0,0,0,.07); --shadow-lg: 0 10px 15px rgba(0,0,0,.08); --shadow-xl: 0 20px 25px rgba(0,0,0,.10); --shadow-accent: 0 4px 14px rgba(0,82,255,.25); --shadow-accent-lg: 0 8px 24px rgba(0,82,255,.35); /* 字体（用户选定「现代圆润」） */ --font-display: "Plus Jakarta Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif; --font-body: "Plus Jakarta Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif; --font-mono: "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* 间距（4px 基准刻度） */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* 圆角 */ --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* 动效 */ --dur-1: 150ms; --dur-2: 200ms; --dur-3: 300ms; --ease-out: cubic-bezier(.16,1,.3,1); --motion-pulse: 2s ease-in-out; --motion-float: 5s ease-in-out; --motion-spin: 60s linear; --motion-fade-up: 0.5s cubic-bezier(.16,1,.3,1); /* Z 轴 */ --z-sticky: 20; --z-drawer: 50; --z-cmd: 60; --z-toast: 70; } html[data-theme="dark"] { --bg-page: #0F172A; --bg-card: #1E293B; --bg-muted: #1E293B; --bg-soft-accent: rgba(111,160,255,.12); --text-primary: #F8FAFC; --text-body: #F8FAFC; --text-muted: #94A3B8; --text-disabled: #64748B; --border-default: #334155; --accent: #6FA0FF; --accent-secondary: #8CB4FF; --accent-foreground: #FFFFFF; --ring: #6FA0FF; --gradient: linear-gradient(135deg,#6FA0FF,#8CB4FF); --status-ok: #34D399; --status-ok-soft: rgba(52,211,153,.14); --status-warn: #FBBF24; --status-warn-soft: rgba(251,191,36,.14); --status-error: #F87171; --status-error-soft: rgba(248,113,113,.14); --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 4px 6px rgba(0,0,0,.4); --shadow-lg: 0 10px 15px rgba(0,0,0,.45); --shadow-xl: 0 20px 25px rgba(0,0,0,.5); --shadow-accent: 0 4px 14px rgba(0,82,255,.35); --shadow-accent-lg: 0 8px 24px rgba(0,82,255,.5); } /* 基础 */ body { margin: 0; background: var(--bg-page); color: var(--text-primary); font: 15px/1.7 var(--font-body); -webkit-font-smoothing: antialiased; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4, p { margin: 0; } .mono, [data-ds="minimal"] .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }