搭建一套可复用的配色系统

随手挑颜色，页面容易花。专业做法是用一套有层级的配色变量。

三类颜色

1. 主色（brand）：站点灵魂色，用于按钮、链接、强调。
2. 中性色（neutral）：文字、边框、背景的灰阶。
3. 语义色：成功/警告/危险（绿/黄/红），用于状态提示。

用阶梯组织

:root {
  --gray-50: #f8fafc; --gray-200: #e2e8f0; --gray-500: #64748b;
  --gray-800: #1e293b; --gray-900: #0f172a;
  --brand-500: #6366f1; --brand-600: #4f46e5;
}

灰阶按 50–900 排阶梯，正文用 800、次要文字用 500、边框用 200，层级一目了然。

改版时只调 --brand-* 一组，全站风格统一切换。建议主色不超过 2 个，避免视觉混乱。