/* ============================================================ 旭辰DMD助手 — 设计令牌系统 (Design Tokens) 版本: 1.0.0 基于: 4px 间距系统 · 移动端优先 · 暗色工业风 · 金色点缀 ============================================================ */ :root { /* ======================================== 0. 工业风表面色 · Industrial Surfaces ========================================== */ --surface-page: #000000; --surface-card: #0E0E0E; --surface-card-hover: #1A1A1A; --surface-elevated: #141414; --surface-inset: #080808; --border-subtle: rgba(255,255,255,0.06); --border-card: rgba(255,255,255,0.08); --border-hover: rgba(255,215,0,0.18); --border-active: rgba(255,215,0,0.35); --text-body: #E6E6E6; --text-muted: #999999; --text-dim: #666666; --text-gold: #FFD700; --text-on-gold: #000000; --glow-gold: rgba(255,215,0,0.06); --glow-gold-strong: rgba(255,215,0,0.15); --glow-blue: rgba(74,157,255,0.08); /* 玻璃质感 */ --glass-bg: rgba(14,14,14,0.85); --glass-border: rgba(255,255,255,0.06); --glass-blur: 12px; /* ======================================== 1. 品牌色 · Brand Colors 温暖蓝系为主，暖色点缀 ======================================== */ /* --- 主色调：温暖蓝 --- */ --color-primary-50: #EBF4FF; /* 最浅 — 背景/选中态 */ --color-primary-100: #D6E9FF; --color-primary-200: #ADD3FF; --color-primary-300: #7AB8FF; --color-primary-400: #4A9DFF; --color-primary-500: #2B82F6; /* 品牌主色 — 按钮/链接/图标 */ --color-primary-600: #1A6AD8; --color-primary-700: #1354AE; --color-primary-800: #0E3F84; --color-primary-900: #0A2B5A; /* --- 暖色点缀：金色/琥珀色（专业高级感）--- */ --color-gold-50: #FFFBE6; --color-gold-100: #FFF3B8; --color-gold-200: #FFE680; --color-gold-300: #FFD84D; --color-gold-400: #FFCC33; --color-gold-500: #FFD700; /* 金色主色 — 标题/强调 */ --color-gold-600: #D4A800; --color-gold-700: #AA8600; --color-gold-800: #806600; --color-gold-900: #554400; /* --- 暖色点缀：珊瑚橙（温暖、关怀感）--- --color-warm-50: #FFF5F2; --color-warm-100: #FFE8E0; --color-warm-200: #FFCBB8; --color-warm-300: #FFA98D; --color-warm-400: #FF8461; --color-warm-500: #FF6B47; /* 强调色 — 重要提示/CTA */ --color-warm-600: #E55A39; --color-warm-700: #C24224; --color-warm-800: #9E3016; --color-warm-900: #7A200C; /* --- 品牌爱心蓝 --- */ --color-heart: #4A9DFF; --color-heart-dark: #2B82F6; /* ======================================== 2. 功能色 · Functional Colors ======================================== */ /* 成功 — 柔和绿 */ --color-success-50: #EDFBF4; --color-success-100: #D2F5E3; --color-success-200: #A3E9C5; --color-success-300: #6CD9A3; --color-success-400: #3CC982; --color-success-500: #22C55E; --color-success-600: #16A34A; --color-success-700: #15803D; /* 警告 — 温暖琥珀 */ --color-warning-50: #FFF9EB; --color-warning-100: #FFF1D0; --color-warning-200: #FFE29F; --color-warning-300: #FFD16A; --color-warning-400: #FFC034; --color-warning-500: #F59E0B; --color-warning-600: #D97706; --color-warning-700: #B45309; /* 错误 — 柔和红 */ --color-error-50: #FFF0F0; --color-error-100: #FFDBDB; --color-error-200: #FFB3B3; --color-error-300: #FF8585; --color-error-400: #FF5757; --color-error-500: #EF4444; --color-error-600: #DC2626; --color-error-700: #B91C1C; /* 信息 — 青色 */ --color-info-50: #EFFBFF; --color-info-100: #D8F5FF; --color-info-200: #ADE9FF; --color-info-300: #7DDBFF; --color-info-400: #4DCBFF; --color-info-500: #0EA5E9; --color-info-600: #0284C7; --color-info-700: #0369A1; /* ======================================== 3. 中性色阶 · Neutral Scale 用于文字层级、背景、边框 ======================================== */ --color-white: #FFFFFF; --color-gray-50: #FAFAFA; --color-gray-100: #F5F5F5; --color-gray-200: #EEEEEE; --color-gray-300: #E0E0E0; --color-gray-400: #BDBDBD; --color-gray-500: #9E9E9E; --color-gray-600: #757575; --color-gray-700: #616161; --color-gray-800: #424242; --color-gray-900: #212121; --color-black: #121212; /* ======================================== 4. 语义色 · Semantic Tokens ======================================== */ /* 背景 */ --bg-page: var(--color-gray-50); --bg-surface: var(--color-white); --bg-surface-hover: var(--color-gray-50); /* 文字 */ --text-primary: var(--color-gray-900); --text-secondary: var(--color-gray-600); --text-tertiary: var(--color-gray-500); --text-disabled: var(--color-gray-400); --text-on-primary: var(--color-white); --text-on-warm: var(--color-white); /* 边框 */ --border-light: var(--color-gray-200); --border-medium: var(--color-gray-300); --border-focus: var(--color-primary-400); /* 链接 */ --link-color: var(--color-primary-600); --link-hover: var(--color-primary-700); /* ======================================== 5. 字体系统 · Typography ======================================== */ /* 字体族 */ --font-display: "PP Neue Machina", "Sharp Grotesk", "PingFang SC", "Microsoft YaHei", sans-serif; --font-sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", "Cascadia Code", "Fira Code", Menlo, "Courier New", monospace; "Consolas", monospace; /* 字号层级 — 移动端基准 (1rem = 16px) */ --text-xs: 0.75rem; /* 12px — 辅助文字/标签 */ --text-sm: 0.8125rem; /* 13px — 小号正文 */ --text-base: 0.9375rem; /* 15px — 正文（移动端） */ --text-md: 1rem; /* 16px — 正文（桌面） */ --text-lg: 1.125rem; /* 18px — 大号正文 */ --text-xl: 1.25rem; /* 20px — 小标题 */ --text-2xl: 1.5rem; /* 24px — 三级标题 */ --text-3xl: 1.75rem; /* 28px — 二级标题 */ --text-4xl: 2rem; /* 32px — 一级标题(移动端) */ --text-5xl: 2.5rem; /* 40px — 大标题(桌面) */ /* 行高 */ --leading-tight: 1.25; /* 标题 */ --leading-snug: 1.4; /* 紧凑正文 */ --leading-normal: 1.6; /* 正文 */ --leading-relaxed: 1.75; /* 舒适阅读 */ --leading-loose: 2; /* 宽松 */ /* 字重 */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* 字间距 */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-wider: 0.06em; /* ======================================== 6. 间距系统 · Spacing (4px base) ======================================== */ --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-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* ======================================== 7. 圆角 · Border Radius ======================================== */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px — 小标签/徽章 */ --radius-md: 0.5rem; /* 8px — 按钮/输入框 */ --radius-lg: 0.75rem; /* 12px — 卡片 */ --radius-xl: 1rem; /* 16px — 大卡片/面板 */ --radius-2xl: 1.25rem; /* 20px — 模态框 */ --radius-full: 9999px; /* 药丸形 — 标签/头像 */ /* ======================================== 8. 阴影 · Shadows 温暖柔和的投影 ======================================== */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04); --shadow-lg: 0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04); --shadow-xl: 0 20px 25px rgba(0,0,0,0.07), 0 8px 10px rgba(0,0,0,0.04); --shadow-2xl: 0 25px 50px rgba(0,0,0,0.08); /* 卡片专用 — 带蓝色微光的温暖阴影 */ --shadow-card: 0 2px 8px rgba(43, 130, 246, 0.08), 0 1px 3px rgba(0,0,0,0.04); --shadow-card-hover:0 4px 16px rgba(43, 130, 246, 0.14), 0 2px 6px rgba(0,0,0,0.06); /* ======================================== 9. 过渡动画 · Transitions ======================================== */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ======================================== 10. Z-Index 层级 ======================================== */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ======================================== 11. 布局 · Layout ======================================== */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; /* 底部导航栏高度 */ --bottom-nav-height: 56px; /* 顶部状态栏安全区 (iOS) */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); /* ======================================== 12. 响应式断点 (用于参考，实际用媒体查询) ======================================== */ /* 断点值(不生成CSS变量，仅作文档)： --bp-sm: 640px 手机横屏 / 小平板 --bp-md: 768px 平板竖屏 --bp-lg: 1024px 平板横屏 / 小桌面 --bp-xl: 1280px 桌面 */ }