/* ===================================================================== 设计令牌 (Design Tokens) — 浅色简约 SaaS 风格 --------------------------------------------------------------------- 本文件定义整个设计系统的基础变量，是 app.css 与 admin.css 的根基。 美学方向：浅色简约 SaaS（类似 Notion / Linear） 所有色彩、字体、间距、阴影、动效均从此处统一调配。 说明：使用系统字体栈，不加载自定义字体。 ===================================================================== */ /* ===================================================================== 设计令牌根变量 ===================================================================== */ :root { /* ================================================================= 色彩系统 — 浅色简约 ================================================================= */ /* ---- 背景层 ---- */ --bg-base: #FFFFFF; /* 主背景 */ --bg-elevated: #F9FAFB; /* 稍亮层 */ --bg-card: #FFFFFF; /* 卡片背景 */ --bg-card-solid: #FFFFFF; /* 不透明卡片背景 */ --bg-overlay: rgba(255, 255, 255, 0.85); /* 遮罩层背景 */ --bg-inset: #F3F4F6; /* 内陷区域（输入框/代码块） */ /* ---- 边框 ---- */ --border-subtle: #F3F4F6; /* 极淡边框 */ --border-default: #E5E7EB; /* 默认边框 */ --border-strong: #D1D5DB; /* 强调边框 */ /* ---- 强调色 ---- */ --accent-primary: #111827; /* 主按钮 / 链接 / 数据高亮（近黑） */ --accent-primary-glow: rgba(17, 24, 39, 0.08); /* 主色阴影（替换发光） */ --accent-primary-dim: rgba(17, 24, 39, 0.05); /* 主色淡背景 */ --accent-secondary: #F59E0B; /* 警示 / 待审核 / 金额（琥珀） */ --accent-secondary-glow: rgba(245, 158, 11, 0.12); --accent-danger: #EF4444; /* 封禁 / 删除 / 错误（红） */ --accent-danger-glow: rgba(239, 68, 68, 0.12); --accent-success: #10B981; /* 成功（绿） */ --accent-info: #3B82F6; /* 信息蓝 */ /* ---- 文本 ---- */ --text-primary: #111827; /* 主要文本（近黑） */ --text-secondary: #6B7280; /* 次要文本（灰） */ --text-muted: #9CA3AF; /* 静默文本（浅灰） */ --text-inverse: #FFFFFF; /* 深色背景上的反色文本（用于主按钮内文字） */ /* ---- 图层叠加色 ---- */ --scanline-color: transparent; /* 扫描线颜色（已禁用） */ --grid-color: transparent; /* 网格背景线颜色（已禁用） */ /* ================================================================= 字体系统 — 系统字体栈 ================================================================= */ --font-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; /* 标题 / 品牌 */ --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* 数据 / 代码 / 域名 / IP */ --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; /* 正文 */ /* ---- 字号 ---- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 2rem; /* 32px */ --text-4xl: 3rem; /* 48px */ --text-5xl: 4rem; /* 64px */ /* ---- 行高 ---- */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed: 1.8; /* ---- 字重 ---- */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* ---- 字间距 ---- */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* 用于等宽徽章 / 品牌标记 */ /* ================================================================= 间距系统 — 4px 基准 ================================================================= */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* 容器宽度 */ --container-max: 1200px; --container-narrow: 760px; --container-wide: 1440px; /* ================================================================= 圆角系统 ================================================================= */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ================================================================= 阴影系统 — 轻微阴影，无发光 ================================================================= */ --shadow-glow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 基础轻微阴影 */ --shadow-glow-strong: 0 2px 8px rgba(0, 0, 0, 0.12); /* 较强阴影 */ --shadow-glow-amber: 0 1px 3px rgba(0, 0, 0, 0.1); /* 琥珀阴影 */ --shadow-glow-danger: 0 1px 3px rgba(0, 0, 0, 0.1); /* 珊瑚阴影 */ --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.08); /* 卡片悬浮阴影 */ --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.1); /* 下拉阴影 */ --shadow-inset: inset 0 1px 0 rgba(0, 0, 0, 0.02); /* 内嵌高光 */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); /* ================================================================= 过渡系统 ================================================================= */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --transition-bounce: 250ms cubic-bezier(0.4, 0, 0.2, 1); /* 简化（去弹性回弹） */ --transition-signal: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* 简化（去信号波感） */ /* ================================================================= z-index 层级 ================================================================= */ --z-base: 1; --z-elevated: 10; --z-nav: 100; --z-dropdown: 200; --z-sticky: 300; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; --z-tooltip: 1200; /* ================================================================= 动画时长（用于配合 keyframes） ================================================================= */ --duration-pulse: 0s; /* 脉冲已禁用 */ --duration-shimmer: 1.5s; /* 流光（加载骨架） */ --duration-scanline: 0s; /* 扫描线已禁用 */ --duration-blink: 0s; /* 光标闪烁已禁用 */ --duration-fade-up: 0.4s; /* ================================================================= 导航 / 侧边栏尺寸 ================================================================= */ --nav-height: 64px; --admin-sidebar-width: 240px; --admin-header-height: 56px; } /* --------------------------------------------------------------------- 全局盒模型重置（轻量，仅令牌相关基础项，完整重置由 app.css 负责） --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* 降低动态偏好的无障碍适配 */ @media (prefers-reduced-motion: reduce) { :root { --duration-pulse: 0s; --duration-shimmer: 0s; --duration-scanline: 0s; --duration-blink: 0s; --duration-fade-up: 0s; --transition-bounce: 0ms; --transition-signal: 0ms; } }