/* ========================================================================== 达播工作台 Design Tokens — 浅色主题（Product 寄存器 / DENSITY=7） 三层结构：Primitive(A1) → Semantic(A2) → Component(B/C) 主色 #4A7BFF（品牌蓝，禁止更换 / 禁止紫粉渐变） 规则：全站禁用裸 hex（仅 #fff/#000 例外），一律引用本文件 CSS 变量。 ========================================================================== */ :root { /* ------------------------------------------------------------------ 一、Primitive（A1-identity / A1-structure）—— 原始值，不直接用于组件 ------------------------------------------------------------------ */ /* 主色 · 品牌蓝（保留现有主色，只收敛使用） */ --color-primary-50: #EEF2FF; /* 激活底 / 选中 tint / 行 hover */ --color-primary-100: #E0E8FF; --color-primary-200: #C5D4FF; --color-primary-300: #9FB8FF; --color-primary-400: #7A9AFF; --color-primary-500: #4A7BFF; /* 基准（=现有 --primary） */ --color-primary-600: #3A67E8; /* hover */ --color-primary-700: #2F54C8; /* active */ --color-primary-800: #28479F; --color-primary-900: #223A7E; /* 中性色 · 冷灰带蓝（替代旧系统「苹果灰 + Tailwind 默认灰」双灰体系） */ --color-gray-0: #FFFFFF; /* 卡片 / 侧栏底 */ --color-gray-50: #FAFBFC; /* 页面底 */ --color-gray-100: #F5F7FB; /* hover 底 / 表头底 */ --color-gray-200: #EEF1F6; /* 行分隔 / 禁用底 */ --color-gray-300: #E8ECF4; /* 默认边框 */ --color-gray-400: #D0D5E0; /* 强边框 / 输入框描边 */ --color-gray-500: #A6ADBC; /* 占位符 / 禁用文字 */ --color-gray-600: #8E8E93; /* 次级文字 */ --color-gray-700: #6B7280; /* 辅助说明 */ --color-gray-800: #464A52; /* 次要标题 */ --color-gray-900: #1D1D1F; /* 主文字 */ /* 字体栈（全站唯一） */ --font-family-body: "Inter", "PingFang SC", -apple-system, "Noto Sans SC", sans-serif; --font-family-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* 字号阶梯（8 级） */ --font-size-xs: 12px; /* 辅助 / 徽章 / 表头小字 */ --font-size-sm: 13px; /* 表格正文（密集） */ --font-size-base: 14px; /* 正文 / 表单 */ --font-size-lg: 16px; /* 卡片标题 / 强调 */ --font-size-xl: 20px; /* 模块标题 */ --font-size-2xl: 24px; /* 页面标题 */ --font-size-3xl: 30px; /* KPI 数字 */ --font-size-4xl: 36px; /* 看板大数字（极少用） */ /* 字重三级体系：Read(400) / Emphasize(510) / Announce(590) */ --font-weight-regular: 400; --font-weight-medium: 510; --font-weight-semibold: 590; /* 行高 */ --font-line-height-body: 1.5; --font-line-height-tight: 1.2; /* 字距 */ --font-letter-spacing-body: 0; --font-letter-spacing-display: -0.02em; /* ≥30px 标题 */ --font-letter-spacing-caps: 0.06em; /* ALL CAPS */ /* 间距（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; /* 圆角阶梯（卡片收敛 10–12px，禁用 16px+ 过度圆润） */ --radius-none: 0; --radius-sm: 6px; /* 徽章 / 标签 / 小按钮 */ --radius-md: 8px; /* 按钮 / 输入框 / 表头 */ --radius-lg: 10px; /* 卡片 */ --radius-xl: 12px; /* 弹窗 / 抽屉 */ --radius-pill: 9999px; /* 头像 / 状态胶囊 */ /* 阴影三级（克制，卡片用 1px 环而非阴影） */ --shadow-flat: none; --shadow-ring: 0 0 0 1px var(--color-gray-300); --shadow-raised: 0 2px 8px color-mix(in srgb, var(--color-gray-900) 6%, transparent); /* 动效（功能性，收敛 150ms；禁止弹性缓动） */ --motion-fast: 150ms; /* hover / active / 选中 */ --motion-base: 200ms; /* 下拉展开 / 抽屉滑入 */ --motion-slow: 300ms; /* 跨屏 / 弹窗 */ --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* 图标（Lucide 内联 SVG，三档尺寸，stroke-width 2） */ --icon-size-sm: 16px; --icon-size-md: 20px; --icon-size-lg: 24px; --icon-stroke-width: 2; /* 布局 */ --container-max: 1440px; --form-max-width: 1080px; /* 二级表单页内容最大宽度（原 720px 过窄，放宽） */ --sidebar-width: 240px; /* 展开 */ --sidebar-width-icon: 64px; /* 折叠 icon 模式 */ --sidebar-offset: 14px; /* 侧栏悬浮：四周留白间距 */ --page-padding: var(--space-6); --header-height: 56px; --section-y: var(--space-8); --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* 层级 z-index */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1100; --z-modal: 1200; --z-toast: 1300; /* ------------------------------------------------------------------ 二、Semantic（A2）—— 语义别名，组件层引用的唯一入口 ------------------------------------------------------------------ */ /* 前景 */ --color-fg: var(--color-gray-900); /* 主文字 */ --color-fg-2: var(--color-gray-700); /* 次级 */ --color-muted: var(--color-gray-700); /* 副标题 / 说明（原 gray-600 3.3:1 不达标，调深到 4.8:1） */ --color-meta: var(--color-gray-600); /* 元数据 / 占位（原 gray-500 2.3:1 太浅） */ /* 表面 */ --color-bg: var(--color-gray-50); /* 页面底 */ --color-surface: var(--color-gray-0); /* 卡片 */ --color-surface-2: var(--color-gray-100); /* hover / 表头底 */ /* 边框 */ --color-border: var(--color-gray-300); --color-border-soft: var(--color-gray-200); /* 强调（每屏可见使用 ≤ 2 处：主 CTA + 激活态） */ --color-accent: var(--color-primary-500); --color-accent-hover: var(--color-primary-600); --color-accent-active: var(--color-primary-700); --color-accent-on: #FFFFFF; --color-accent-text: var(--color-primary-700); /* 强调文字/图标（primary-500 仅 3.8:1 不达标，用深蓝 6.3:1） */ /* 语义色（文字用「深色变体」，浅底成对，保证 WCAG 4.5:1） */ --color-success: #0E9F6E; --color-success-bg: #E6FAF3; --color-warning: #C46A12; --color-warning-bg: #FFF3EB; --color-danger: #D43A38; --color-danger-bg: #FFEBEB; --color-price: #E02A20; /* 价格（醒目红，带货场景） */ --color-info: #4A7BFF; --color-info-bg: #EEF2FF; /* 图表分类色（单色分类，非渐变） */ --color-chart-1: #4A7BFF; --color-chart-2: #5CD6B0; --color-chart-3: #FF8C42; --color-chart-4: #8B7CF0; --color-chart-5: #8E8E93; /* 事项类型色（严格对齐新建排期 timeline 环节配色，全站统一，勿改） */ --color-item-arrival: #86868B; /* 到达 */ --color-item-trace: #34C759; /* 溯源拍摄 */ --color-item-source-live: #0E9F6E; /* 溯源直播（深绿，区分溯源拍摄） */ --color-item-course: #0071E3; /* 小课堂 */ --color-item-interview: #AF52DE; /* 博士访谈 */ --color-item-live: #FF3B30; /* 带货直播 */ --color-item-departure: #86868B; /* 离开 */ /* ------------------------------------------------------------------ 三、Component（B-slot / C-extension）—— 组件专用 token ------------------------------------------------------------------ */ /* 聚焦环（继承主色，不硬编码） */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 22%, transparent); /* 按钮 */ --button-primary-bg: var(--color-accent); --button-primary-fg: var(--color-accent-on); --button-primary-hover: var(--color-accent-hover); --button-primary-active: var(--color-accent-active); --button-secondary-bg: transparent; --button-secondary-fg: var(--color-accent-text); --button-secondary-border: var(--color-gray-400); --button-ghost-bg: transparent; --button-ghost-fg: var(--color-fg); --button-danger-bg: var(--color-danger); --button-danger-fg: #FFFFFF; /* 输入框 */ --input-bg: var(--color-surface); --input-border: var(--color-gray-400); --input-focus-border: var(--color-accent); --input-error-border: var(--color-danger); --input-disabled-bg: var(--color-surface-2); --input-disabled-text: var(--color-meta); /* 表格（DENSITY=7：1px 行分隔线代替卡片盒） */ --table-header-bg: var(--color-surface-2); --table-header-fg: var(--color-fg-2); --table-row-hover: var(--color-primary-50); --table-divider: var(--color-border-soft); /* 徽章（状态「深字 + 浅底」成对） */ --badge-success-fg: var(--color-success); --badge-success-bg: var(--color-success-bg); --badge-warning-fg: var(--color-warning); --badge-warning-bg: var(--color-warning-bg); --badge-danger-fg: var(--color-danger); --badge-danger-bg: var(--color-danger-bg); --badge-info-fg: var(--color-info); --badge-info-bg: var(--color-info-bg); } /* 无障碍：偏好减少动效时关闭位移/缩放，仅保留透明度变化 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }