/* =============================================== Design Tokens — 风屿智航运营部 =============================================== */ :root { /* ---- Color: Background ---- */ --bg-page: #F7F8FA; --bg-sidebar: #F0F1F3; --bg-card: #FFFFFF; --bg-soft: #FAFBFC; --bg-header: #F7F7F9; --bg-table-header: #F7F8FA; --bg-hover: #F3F4F6; --bg-selected: #FFFFFF; --bg-disabled: #FAFAFA; --bg-count: #E5E7EB; --bg-count-active: #D1D5DB; --bg-muted: #F3F4F6; /* ---- Color: Border ---- */ --border: #E5E7EB; --border-strong: #D1D5DB; /* ---- Color: Text ---- */ --text-1: #1A1A1A; --text-2: #333333; --text-3: #555555; --text-4: #6B7280; --text-disabled: #D1D5DB; /* ---- Color: Status（状态语义：完成 / 错误） ---- */ --status-good: #279E49; /* 状态：好（已完成） */ --status-bad: #E53E3E; /* 状态：坏（错误/必填） */ --up: var(--status-good); /* alias：兼容旧引用，新代码请用 --status-good */ --down: var(--status-bad); /* alias：兼容旧引用，新代码请用 --status-bad */ --warning: #F59E0B; --danger: #E53E3E; /* ---- Color: Trend（指标涨跌，纯数值方向，中国习惯红涨绿跌） ---- */ --trend-up: #EF4444; /* 数值增加 = 红 */ --trend-down: #10B981; /* 数值降低 = 绿 */ --delta-up: var(--trend-up); /* alias：兼容旧引用，新代码请用 --trend-up */ --delta-down: var(--trend-down); /* alias：兼容旧引用，新代码请用 --trend-down */ --delta-flat: #6B7280; /* 持平 = 灰 */ /* ---- Color: Brand / Action ---- */ --primary: #111111; --primary-hover: #1F2937; --white: #FFFFFF; /* ---- Color: Platform Dots ---- */ --badge-dot-douyin: #FE2C55; --badge-dot-xiaohongshu: #EF4444; --badge-dot-shipinhao: #10B981; /* ---- Border Radius ---- */ --radius-card: 4px; --radius-btn: 4px; --radius-badge: 4px; --radius-md: 4px; /* ---- Spacing Tokens (4px 基准，命名化) ---- 组件间 8/12/16；区块间 24/28/32；页面级留白 40/48 */ --sp-2: 8px; /* 组件内微距 */ --sp-3: 12px; /* 组件间距-小 */ --sp-4: 16px; /* 组件间距-中 */ --sp-6: 24px; /* 区块间距 */ --sp-7: 28px; /* 区块间距 */ --sp-8: 32px; /* 区块间距 */ --sp-10: 40px; /* 页面级留白 */ --sp-12: 48px; /* 页面级留白 */ /* ---- Spacing: Layout（旧变量映射到新规范，保持向后兼容） ---- */ --sidebar-w: 216px; --header-h: 72px; --content-px: var(--sp-8); --content-py: var(--sp-6); --module-gap: var(--sp-7); --filter-gap: var(--sp-6); --card-gap: var(--sp-4); /* ---- Spacing: Component ---- */ --card-pad: var(--sp-6); --table-header-pad: var(--sp-4) var(--sp-6); --table-cell-px: var(--sp-3); --table-row-h: var(--sp-10); --pagination-pad: var(--sp-3) var(--sp-6); --filter-label-gap: var(--sp-3); --control-gap: var(--sp-3); --section-title-pad: var(--sp-2) var(--sp-3) var(--sp-2); --menu-item-px: var(--sp-4); --menu-item-h: var(--sp-10); --user-area-h: var(--sp-12); --user-area-pad: var(--sp-3) var(--sp-4); --logo-pad: var(--sp-4) var(--sp-4); --footer-note-mt: var(--sp-3); --meta-icon-gap: var(--sp-2); /* ---- Spacing: Internal ---- */ --card-label-mt: var(--sp-2); --card-change-mt: var(--sp-2); --label-value-gap: var(--sp-2); /* ============================================================ Typography — 统一字体与排版规范（单一事实来源） 所有页面 / 组件必须使用下方 token，禁止自行创建字体层级。 字号 7 级：Display 28 / H1 22 / H2 18 / Body 14 / Caption 13 / Label 12 / Micro 11 字重 4 级：Regular 400 / Medium 500 / Semibold 600 / Bold 700（禁止 800/900） ============================================================ */ /* ---- 字号标尺（规范 7 级，新代码请用这组） ---- */ --fs-display: 28px; /* 核心 KPI / 页面最重要数字 */ --fs-h1: 22px; /* 页面主标题 / 一级标题 */ --fs-h2: 18px; /* 区块标题 / 卡片标题 / 数据模块标题 */ --fs-body: 14px; /* 正文 / 表格主要内容 / 普通说明 */ --fs-caption: 13px; /* 表体辅助 / 数据说明 / 次级描述 / 时间范围 */ --fs-label: 12px; /* 标签 / 按钮辅助 / 表单字段说明 / 筛选条件 / 辅助信息 */ --fs-micro: 11px; /* 极小标注 / 数据单位 / 图表辅助标签（仅辅助信息，禁用于重要内容） */ /* ---- 行高标尺（规范） ---- */ --lh-display: 1.2; --lh-h1: 1.3; --lh-h2: 1.4; --lh-body: 1.6; --lh-caption: 1.5; --lh-label: 1.4; --lh-micro: 1.4; /* ---- 兼容映射：旧组件 token 指向规范值（保持向后兼容，新代码请用上面标尺） ---- */ --fs-page-title: var(--fs-h1); --fs-page-sub: var(--fs-caption); --fs-filter-label: var(--fs-label); /* 筛选条件 = Label 12px */ --fs-card-title: 13px; /* 注：实为 caption 级标签，并非 18px 卡片标题 */ --fs-card-value: var(--fs-display); /* KPI 核心数字 = Display 28px */ --fs-card-change: var(--fs-label); --fs-table-title: var(--fs-h2); /* 表 / 区块标题 = H2 18px */ --fs-table-head: var(--fs-label); /* 表头 = Label 12px */ --fs-table-cell: var(--fs-caption); /* 表体 = Caption 13px */ --fs-data-num: var(--fs-body); /* 表格数字字段 = Body 14px（比表体升一档，强调数据；与字号标尺同档） */ --lh-data-num: var(--lh-body); --fs-pagination: var(--fs-caption); --fs-footer: var(--fs-label); --fs-menu: var(--fs-body); --fs-section-title: 11px; --fs-count: var(--fs-micro); --fs-logo-cn: 13.5px; --fs-logo-en: 9.5px; --fs-btn: var(--fs-caption); /* 按钮文字 13px */ --fs-select: var(--fs-caption); --lh-page-title: var(--lh-h1); --lh-page-sub: var(--lh-caption); --lh-filter-label: var(--lh-body); --lh-card-title: var(--lh-caption); --lh-card-value: var(--lh-display); --lh-card-change: var(--lh-label); --lh-table-title: var(--lh-h2); --lh-table-head: var(--lh-label); --lh-table-cell: var(--lh-caption); --lh-data-num: var(--lh-body); /* 配套 --fs-data-num (14px/1.6) */ --lh-pagination: var(--lh-caption); --lh-footer: var(--lh-label); /* ---- Font Weight（规范：仅 400 / 500 / 600 / 700，禁止 800 / 900） ---- */ --fw-normal: 400; --fw-regular: 400; /* 正文 / 数据说明 / 辅助 / 表体 / 描述 */ --fw-medium: 500; /* 按钮 / 表头 / 菜单 / 标签 / 筛选项 / 次级强调 */ --fw-semibold: 600; /* 卡片标题 / 区块标题 / 导航激活 / 重要字段 / 小型 KPI 标题 */ --fw-bold: 700; /* 页面主标题 / KPI 核心数字 / 核心数据（最重要信息，禁止大面积使用） */ /* ---- Control Size ---- */ --control-h: 34px; --control-h-sm: 30px; --control-px: 16px; --select-px: 10px; --page-btn-min-w: 34px; --page-btn-h: 34px; /* ---- Sidebar Icon ---- */ --icon-menu: 17px; --icon-logo: 16px; --icon-badge-arrow: 10px; --icon-page-arrow: 14px; --icon-toggle: 13px; /* ---- Logo ---- */ --logo-icon-size: 32px; --logo-icon-radius: var(--radius-card); --logo-gap: 10px; --logo-en-ls: 2px; /* ---- Avatar ---- */ --avatar-size: 32px; --avatar-fs: 12.5px; /* ---- Badge ---- */ --badge-fs: 12px; --badge-pad: 3px 8px; --badge-lh: 16px; --count-pad: 1px 6px; --count-min-w: 22px; /* ---- Animation ---- */ --transition-fast: 0.15s; /* ---- Sparkline ---- */ --sparkline-bar-w: 3px; --sparkline-bar-gap: 2px; --sparkline-bar-bg: #D1D5DB; --sparkline-bar-active: #111111; /* ---- Welcome Section（问候语遵循规范字号标尺，不超出 7 级） ---- */ --fs-greeting: var(--fs-h2); --lh-greeting: var(--lh-h2); --fs-greeting-sub: var(--fs-caption); --lh-greeting-sub: var(--lh-caption); --greeting-emoji-fs: 22px; /* ---- Week Pill ---- */ --week-pill-h: 30px; --week-pill-px: 14px; --week-pill-dot: 6px; /* ---- Overview ---- */ --overview-card-value: 28px; --overview-card-lh: 34px; --overview-grid-cols: 4; /* ---- Font Family（规范：中文系统无衬线；数字 / 金额 / 百分比 / 日期 / 编号优先等宽） ---- */ --font-sans: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; }