样式指南
本文档定义了 Birdpaper UI 的样式规范，涵盖字体、尺寸、圆角、阴影、间距、动效等基础 Token，确保组件间的视觉一致性。所有 Token 均以 CSS 变量形式提供，支持主题定制和深色模式适配。
字体
字体族
font-family: Inter, -apple-system, BlinkMacSystemFont, PingFang SC,
Hiragino Sans GB, Noto Sans, Microsoft YaHei,
Helvetica Neue, Helvetica, Arial, sans-serif;优先使用系统字体栈（System Font Stack），保证各平台最佳的渲染效果和加载性能。西文优先使用 Inter，中文回退到各平台原生字体（PingFang SC / Noto Sans / Microsoft YaHei）。
字号
字号体系提供 4 个层级，覆盖从辅助文本到大标题的完整场景。
| 辅助文本 | 12px | 1.4 | 注释、时间戳、标签 |
| 正文 / 表单 | 14px | 1.6 | 段落、表单、表格内容 |
| 小标题 | 16px | 1.5 | 卡片标题、区块标题 |
| 大标题 | 20px | 1.4 | 页面标题、弹窗标题 |
提示：正文统一使用 14px，避免在同一页面混用过多字号层级。
字重
| Regular | 400 | 正文、描述文本 |
| Medium | 500 | 标题、强调文本 |
| Semibold | 600 | 大标题、关键信息 |
提示：Regular（400）为默认字重，Medium（500）用于小标题和强调，Semibold（600）仅用于页面级标题和关键信息，避免过度使用。
尺寸
组件提供 4 级尺寸体系，影响高度、字号、水平内边距和圆角。Button、Input、Select 等表单类组件均遵循此规范。
| Mini | --bp-size-height-mini | 22px | 12px | 10px | 3px |
| Small | --bp-size-height-small | 28px | 13px | 14px | 4px |
| Default | --bp-size-height-default | 32px | 14px | 20px | 6px |
| Large | --bp-size-height-large | 36px | 14px | 26px | 8px |
指南：同一表单区域内统一使用同一尺寸；Mini 适用于紧凑型表格操作列，Large 适用于独立的主操作按钮。
圆角
圆角与尺寸体系联动，不同尺寸的组件使用对应的圆角值，保持视觉节奏一致。
| 小圆角 | 3px | Mini 尺寸组件 |
| 默认圆角 | 6px | Default 尺寸组件 |
| 大圆角 | 8px | Large 尺寸组件、卡片、弹层 |
| 全圆角 | 40px | Pill 形按钮、胶囊标签 |
指南：卡片和弹层统一使用 8px 大圆角；Pill 形元素（如胶囊标签）使用 40px 全圆角；不要在同一页面混用多种圆角值。
阴影
分层级的阴影体系，用于表达元素的空间层级关系。
| 浅阴影 | 0 2px 8px rgba(0, 0, 0, 0.06) | 卡片 hover 态 |
| 默认阴影 | 0 4px 12px rgba(0, 0, 0, 0.1) | 弹出层、气泡 |
| 深阴影 | 0 4px 16px rgba(0, 0, 0, 0.15) | 浮层、下拉菜单 |
指南：hover 态使用浅阴影，弹出层使用默认阴影，浮层使用深阴影；阴影层级应与 z-index 层级对应，越高层级使用越深的阴影。
间距
基于 4px 网格的间距体系，确保元素间的空间关系可预测、可复用。
| 紧凑 | 4px | 图标与文字间距 |
| 小间距 | 8px | 表单项内部 |
| 中间距 | 12px | 列表项间距 |
| 默认间距 | 16px | 区块间距 |
| 大间距 | 24px | 页面区域间距 |
指南：优先使用预设间距 Token，避免随意使用非标值；紧凑（4px）仅用于图标与文字等紧邻元素；页面区域间使用大间距（24px）分隔。
边框
统一的边框规范，确保输入框、分割线、状态反馈的视觉一致性。
| 输入框、分割线 | 1px solid var(--bp-gray-2) |
| 聚焦态 | 1px solid var(--bp-primary-6) |
| 错误态 | 1px solid var(--bp-danger-6) |
| 禁用态 | 1px solid var(--bp-gray-3) |
指南：边框颜色使用语义化 CSS 变量，深色模式下自动适配；聚焦态边框颜色与品牌色一致；仅在表单校验失败时使用危险色边框。
层级 (z-index)
使用 CSS 变量统一管理 z-index，避免硬编码数值导致的层叠冲突。
| --z-index-base | 2000 | Trigger、Tooltip |
| --z-index-modal | 2000 | Modal 对话框 |
| --z-index-drawer | 2001 | Drawer 抽屉 |
| --z-index-message | 2003 | Message 消息提示 |
指南：业务侧如需自定义层级，建议基于
--z-index-base做偏移（如calc(var(--z-index-base) + 10)），避免直接使用魔数。
动效
统一的过渡时间和缓动函数，确保交互反馈的节奏感一致。
| 颜色 / 透明度变化 | 0.2s | ease |
| 弹出 / 收起 | 0.25s | ease-in-out |
| 布局变化 | 0.3s | ease |
| 加载旋转 | 1.2s | linear (infinite) |
指南：弹出类动效使用 ease-in-out（先慢后快再慢），消隐类动效使用 ease（自然减速）；避免使用超过 0.3s 的过渡时长，保持界面响应感。