色彩
Birdpaper UI 的色彩体系由 功能色 和 中性色 两部分组成。功能色用于传达状态和语义，中性色用于文本、背景、边框等基础界面元素。所有颜色均提供浅色和深色模式两套变量，支持主题切换。
功能色
功能色包含品牌色、成功色、警告色、危险色，每个色系提供 10 个色阶。点击任意色块可复制色值。
主题色#165dff
成功色#009622
警告色#ff7d00
危险色#f53f3f
中性色
中性色用于文本、背景、边框、分割线等基础界面元素，是使用频率最高的色系。点击可复制色值。
色阶使用规范
每个功能色提供 10 个色阶，按用途可分为以下层级：
| 层级 | 色阶 | 使用场景 |
|---|---|---|
| 浅底 | 1 - 2 | 背景色、标签底色 |
| 边框 | 3 - 4 | 边框、分割线 |
| 辅助 | 5 | hover 态、辅助元素 |
| 主色 | 6 | 主要图标、文本、按钮 |
| 交互 | 7 - 8 | hover / active 态 |
| 深色 | 9 - 10 | 深色文本、深色背景 |
RGB 变量
每个颜色同时提供 RGB 变量（后缀 -rgb），用于需要设置透明度的场景：
css
/* 基础用法 */
color: var(--bp-primary-6);
/* 带透明度用法 */
background: rgba(var(--bp-primary-6-rgb), 0.1);深色模式
深色模式下变量名添加 -dark- 中缀，色阶方向反转（1 最深，10 最浅）：
css
/* 浅色模式 */
--bp-primary-6: #165dff;
/* 深色模式 */
--bp-primary-dark-6: #3c7eff;组件库通过 CSS 变量自动适配深色模式，业务侧无需手动切换。