创建协调的颜色系统，语义颜色基于主色生成，提供更精细的控制
选择一个流行的设计系统主题来快速应用配色方案。
选择推荐辅助色:
传统策略：使用经典的语义颜色组合。信息色为蓝色(210°)，成功色为绿色(145°)，警告色为橙色(45°)，错误色为红色(0°)。符合用户习惯的颜色认知。
这是一个卡片组件示例，展示了文本和背景颜色。
这是一个信息提示消息，用于提供一般信息。
操作已成功完成！
请注意，此操作可能产生意想不到的结果。
操作失败，请检查您的输入并重试。
:root {
/* 主色系 */
--primary-color: hsl(220, 89%, 53%);
--primary-light: hsl(220, 74%, 68%);
--primary-dark: hsl(220, 99%, 38%);
/* 辅助色系 */
--secondary-color: hsl(40, 89%, 53%);
--secondary-light: hsl(40, 69%, 73%);
--secondary-dark: hsl(40, 99%, 38%);
/* 品牌色系 */
--accent-color: hsl(320, 75%, 55%);
--accent-light: hsl(320, 60%, 70%);
--accent-dark: hsl(320, 85%, 40%);
/* 语义颜色 */
--info-color: hsl(240, 79%, 53%);
--info-light: hsl(240, 59%, 73%);
--info-dark: hsl(240, 94%, 38%);
--success-color: hsl(340, 74%, 58%);
--success-light: hsl(340, 54%, 78%);
--success-dark: hsl(340, 89%, 43%);
--warning-color: hsl(260, 89%, 63%);
--warning-light: hsl(260, 69%, 83%);
--warning-dark: hsl(260, 104%, 48%);
--error-color: hsl(0, 99%, 53%);
--error-light: hsl(0, 79%, 73%);
--error-dark: hsl(0, 114%, 38%);
--debug-color: hsl(420, 69%, 43%);
--debug-light: hsl(420, 49%, 63%);
--debug-dark: hsl(420, 84%, 28%);
/* 中性色阶 */
--neutral-50: hsl(220, 15%, 95%);
--neutral-100: hsl(220, 15%, 90%);
--neutral-200: hsl(220, 15%, 80%);
--neutral-300: hsl(220, 15%, 70%);
--neutral-400: hsl(220, 15%, 60%);
--neutral-500: hsl(220, 15%, 50%);
--neutral-600: hsl(220, 15%, 40%);
--neutral-700: hsl(220, 15%, 30%);
--neutral-800: hsl(220, 15%, 20%);
--neutral-900: hsl(220, 15%, 10%);
}