/* ========================================================================== afront — IDE/Notion 极简专业风 见行标书 · 专业招投标 AI 平台 -------------------------------------------------------------------------- 设计原则：去装饰、用线不用面、高信息密度、灰度降噪、主色克制 数据和文档本身是界面的主角，所有非数据装饰元素（阴影/粗边框/大色块）一律剥除 ========================================================================== */ :root { /* ── Palette 调色板 ── */ /* 文字用灰度阶层（对齐 Notion 的 rgba(0,0,0,N) 体系，降噪关键）*/ --af-ink: #172033; /* 主文字 */ --af-ink-secondary: #526071; /* 次级文字（标签、说明）*/ --af-steel: #7C8899; /* 辅助文字（meta、时间）*/ --af-muted: #98A2B1; /* 弱化文字（占位、空状态）*/ /* 主色：降饱和的沉稳科技蓝，仅用于 CTA（行动号召）*/ --af-signal: #2563EB; /* 主色（沉稳蓝，降低饱和度）*/ --af-signal-hover: #1D4ED8; --af-signal-active: #1E40AF; --af-signal-light: #EFF6FF; /* 主色浅底（tag/选中，极淡）*/ --af-signal-lighter: #F5F8FF; /* 背景：极淡冷灰带一丝蓝调（比死灰更有质感，比纯白柔和，避免刺眼）*/ --af-canvas: #F3F5F7; /* 应用画布 */ --af-paper: var(--af-canvas); --af-content-bg: var(--af-canvas); --af-aside-bg: #F7F8FA; --af-surface-muted: #F7F8FA; --af-subtle: var(--af-surface-muted); --af-surface: #FFFFFF; /* 卡片/弹窗表面（纯白，与 paper 形成对比）*/ /* 边框：极细 hairline，rgba 透明黑（比实色 hex 更柔和、更"轻"）*/ --af-rule: #DDE2E8; --af-rule-soft: #EDF0F3; --af-rule-strong: #C6CDD7; --af-overlay: rgba(0, 0, 0, 0.40); /* 遮罩 */ /* 保留语义色名（向后兼容大量页面引用）*/ --af-ink-900: #111827; --af-ink-700: #374151; --af-ink-500: #6B7280; --af-ink-300: #D1D5DB; /* ── 状态色（仅用于状态标记，不用于装饰）── */ --af-success: #16835C; --af-success-bg: #ECF8F3; --af-success-border: rgba(22,131,92,0.25); --af-warning: #A86100; --af-warning-bg: #FFF7E8; --af-warning-border: rgba(168,97,0,0.25); --af-danger: #C43D4B; --af-danger-bg: #FFF1F2; --af-danger-border: rgba(196,61,75,0.25); --af-info: #466A9F; --af-info-bg: #EEF4FF; --af-info-border: rgba(70,106,159,0.25); /* ── Typography 字体 ── */ --af-font: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif; --af-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Consolas', 'Liberation Mono', monospace; --af-text-2xs: 11px; --af-lh-2xs: 1.45; --af-text-xs: 12px; --af-lh-xs: 1.5; --af-text-sm: 13px; --af-lh-sm: 1.5; --af-text-base: 14px; --af-lh-base: 1.5; --af-text-lg: 16px; --af-lh-lg: 1.4; --af-text-xl: 18px; --af-lh-xl: 1.35; --af-fw-normal: 400; --af-fw-medium: 500; --af-fw-semibold: 600; /* ── Radius 圆角（收紧：外层 8px，内部按钮/输入 4px）── */ --af-r-xs: 4px; --af-r-sm: 6px; --af-r-md: 8px; --af-r-lg: 10px; --af-r-xl: 12px; /* 大卡片容器 */ --af-r-pill: 9999px; /* 胶囊（仅 chip/badge/顶栏 CTA）*/ /* ── Spacing 间距（高密度表单）── */ --af-s-1: 4px; --af-s-2: 8px; --af-s-3: 12px; --af-s-4: 16px; --af-s-5: 20px; --af-s-6: 24px; /* ── Shadow 阴影（克制但保留质感：卡片用极浅复合阴影，浮层/弹窗逐级加重）── */ --af-shadow-none: none; --af-shadow-xs: 0 1px 2px 0 rgba(15,23,42,0.04); --af-shadow-sm: 0 1px 2px 0 rgba(15,23,42,0.05), 0 1px 3px 0 rgba(15,23,42,0.04); --af-shadow-md: 0 2px 4px -1px rgba(15,23,42,0.06), 0 4px 12px -2px rgba(15,23,42,0.05); --af-shadow-lg: 0 4px 8px -2px rgba(15,23,42,0.08), 0 12px 28px -4px rgba(15,23,42,0.10); --af-shadow-xl: 0 8px 16px -4px rgba(15,23,42,0.10), 0 20px 40px -8px rgba(15,23,42,0.14); /* 卡片：极浅复合阴影（1px 接触阴影 + 远距极淡扩散），克制浮起感 */ --af-shadow-card: 0 1px 2px 0 rgba(15,23,42,0.04), 0 1px 3px 0 rgba(15,23,42,0.03); /* 交互态 */ --af-shadow-focus: 0 0 0 2px rgba(37,99,235,0.15); --af-shadow-focus-ring: 0 0 0 2px var(--af-surface), 0 0 0 4px rgba(37,99,235,0.35); --af-shadow-glow: none; /* 主色按钮 hover 不加辉光（克制）*/ /* ── Layout 布局 ── */ --af-header-h: 48px; --af-sidebar-w: 220px; --af-sidebar-w-collapsed: 56px; --af-page-max-w: 1400px; --af-read-w: 780px; /* ── Duration 动效 ── */ --af-dur-fast: 0.15s; --af-dur: 0.2s; --af-dur-slow: 0.25s; --af-ease: cubic-bezier(0.4, 0, 0.2, 1); --af-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ── Z-Index 层级 ── */ --af-z-base: 1; --af-z-sticky: 100; --af-z-header: 200; --af-z-overlay: 1000; --af-z-dialog: 1010; --af-z-toast: 2000; /* ========================================================================== Element Plus Bridge — 将 Element Plus 组件纳入设计系统（IDE 极简风） ========================================================================== */ --el-color-primary: var(--af-signal); --el-color-primary-light-3: #60A5FA; --el-color-primary-light-5: #93C5FD; --el-color-primary-light-7: #BFDBFE; --el-color-primary-light-8: #DBEAFE; --el-color-primary-light-9: var(--af-signal-light); --el-color-primary-dark-2: var(--af-signal-hover); --el-border-radius-base: var(--af-r-sm); --el-border-radius-small: var(--af-r-xs); --el-border-radius-round: var(--af-r-md); --el-font-family: var(--af-font); --el-font-size-base: var(--af-text-sm); --el-font-weight-primary: var(--af-fw-medium); --el-font-line-height-primary: 22px; --el-bg-color: var(--af-surface); --el-bg-color-page: var(--af-content-bg); --el-bg-color-overlay: var(--af-surface); --el-text-color-primary: var(--af-ink); --el-text-color-regular: var(--af-ink-secondary); --el-text-color-secondary: var(--af-steel); --el-text-color-placeholder: var(--af-muted); --el-transition-duration: var(--af-dur); --el-transition-duration-fast: var(--af-dur-fast); --el-border-color: var(--af-rule); --el-border-color-light: var(--af-rule); --el-border-color-lighter: var(--af-rule-soft); --el-border-color-hover: var(--af-rule-strong); --el-fill-color: var(--af-subtle); --el-fill-color-light: var(--af-subtle); --el-fill-color-lighter: var(--af-subtle); --el-fill-color-blank: var(--af-surface); --el-mask-color: var(--af-overlay); --el-box-shadow-light: var(--af-shadow-sm); --el-box-shadow: var(--af-shadow-md); --el-box-shadow-dark: var(--af-shadow-lg); /* 状态色桥接 */ --el-color-success: var(--af-success); --el-color-warning: var(--af-warning); --el-color-danger: var(--af-danger); --el-color-error: var(--af-danger); --el-color-info: var(--af-ink-secondary); /* ========================================================================== @deprecated Bridge — 旧 token 名别名（逐步迁移，请勿新代码使用） ========================================================================== */ /* ── 旧前缀 --af-blue-* / --af-zinc-* / --af-bg-* / --af-text-* 等 ── */ --af-blue: var(--af-signal); --af-blue-primary: var(--af-signal); --af-blue-hover: var(--af-signal-hover); --af-blue-active: var(--af-signal-hover); --af-blue-light: var(--af-signal-light); --af-blue-gradient: var(--af-signal); --af-blue-shadow: none; --af-zinc-50: var(--af-subtle); --af-zinc-100: var(--af-paper); --af-zinc-200: var(--af-rule); --af-zinc-300: #CBD5E1; --af-zinc-400: #94A3B8; --af-zinc-500: var(--af-steel); --af-zinc-700: var(--af-ink); --af-bg-page: var(--af-paper); --af-bg-surface: var(--af-surface); --af-bg-subtle: var(--af-subtle); --af-bg-primary: var(--af-surface); --af-bg-secondary: var(--af-paper); --af-bg-tertiary: var(--af-paper); --af-text-primary: var(--af-ink); --af-text-secondary: var(--af-steel); --af-text-disabled: #94A3B8; --af-text-inverse: #FFFFFF; --af-text-placeholder: #94A3B8; --af-border-subtle: 1px solid var(--af-rule); --af-border-default: 1px solid var(--af-rule); --af-border-strong: 1px solid #CBD5E1; --af-border-color: var(--af-rule); --af-radius-xs: var(--af-r-xs); --af-radius-sm: var(--af-r-sm); --af-radius-md: var(--af-r-md); --af-radius-lg: var(--af-r-lg); --af-radius-full: var(--af-r-pill); --af-font-sans: var(--af-font); --af-font-normal: var(--af-fw-normal); --af-font-medium: var(--af-fw-medium); --af-font-semibold: var(--af-fw-semibold); --af-font-bold: var(--af-fw-semibold); --af-space-1: var(--af-s-1); --af-space-2: var(--af-s-2); --af-space-3: var(--af-s-3); --af-space-4: var(--af-s-4); --af-space-5: var(--af-s-5); --af-space-6: var(--af-s-6); --af-space-7: 32px; --af-space-8: 40px; --af-shadow-2xs: var(--af-shadow-xs); --af-shadow-xl: var(--af-shadow-xl); --af-header-height: var(--af-header-h); --af-sidebar-width: var(--af-sidebar-w); --af-sidebar-collapsed-width: var(--af-sidebar-w-collapsed); --af-page-max-width: var(--af-page-max-w); --af-duration-fast: var(--af-dur-fast); --af-duration-normal: var(--af-dur); --af-duration-slow: var(--af-dur-slow); --af-ease-default: var(--af-ease); --af-status-success: var(--af-success); --af-status-warning: var(--af-warning); --af-status-danger: var(--af-danger); --af-status-info: var(--af-signal); --af-ring-focus: var(--af-shadow-focus), 0 0 0 1px var(--af-signal) inset; /* ── 无前缀旧 token（variables.scss 遗留，逐步迁移）── */ --text-primary: var(--af-ink); --text-secondary: var(--af-steel); --text-tertiary: #94A3B8; --bg-primary: var(--af-surface); --bg-secondary: var(--af-paper); --bg-tertiary: var(--af-paper); --app-primary: var(--af-signal); --app-primary-light: var(--af-signal-light); --blue-primary: var(--af-signal); --blue-gradient: var(--af-signal); --blue-glow: none; --border-color: var(--af-rule); --shadow-sm: var(--af-shadow-sm); --shadow-md: var(--af-shadow-md); --shadow-lg: var(--af-shadow-lg); --shadow-pill: var(--af-shadow-md); }