/* ============================================
 * 噢易云VI色值体系 - OYUN Color System
 * 版本: 1.0.0
 * 适用: 噢易云旗下所有产品项目
 * ============================================ */

:root {
  /* ------------ 标准色 - 活力橙系 ------------ */
  --color-vital-orange: #FF6A00;      /* 活力橙主色 - 核心按钮、标题、核心视觉区 */
  --color-vital-orange-light: #FF9F26; /* 次要强调色 - 二级按钮、重要状态 */
  --color-vital-orange-lighter: #FFB84D; /* 辅助色 - 标签、高亮提示 */
  --color-vital-orange-soft: #FFF2E6;   /* 浅底色 - 背景、卡片浅色区域 */

  /* ------------ 标准色 - 跃迁紫蓝系 ------------ */
  --color-leap-purple: #5341FF;       /* 跃迁紫蓝 - 点缀元素、交互状态 */
  --color-leap-purple-light: #7A69FF; /* 浅紫蓝 - 次要点缀 */
  --color-leap-purple-lighter: #9B8FFF; /* 更浅紫蓝 - 柔和提示 */

  /* ------------ 标准色 - 生态绿系 ------------ */
  --color-eco-green: #82B800;         /* 生态绿 - 成功状态、正向提示 */

  /* ------------ 标准色 - 中性色系 ------------ */
  --color-milk-white: #FCFCFF;        /* 偏奶白 - 大面积背景主色 */
  --color-light-gray: #E8ECEF;        /* 亮灰 - 次要背景、分隔线 */
  --color-border-gray: #B8B9FA;       /* 线框色 - 边框、分割线 */

  /* ------------ 色阶使用 - 文字/背景 ------------ */
  --color-text-primary: #1A1A2E;      /* 主文字 - 标题、正文 */
  --color-text-secondary: #5A5A75;    /* 次要文字 - 辅助说明 */
  --color-text-muted: #9494AD;        /* 弱化文字 - 占位、提示 */
  --color-bg-dark: #0A0A1A;           /* 深色背景 - 深色模式、Hero区域 */
  --color-bg-card: #FFFFFF;           /* 卡片背景 - 白色卡片 */
  --color-bg-page: #FCFCFF;           /* 页面背景 - 主背景 */

  /* ------------ 透明度变体 ------------ */
  --color-orange-10: rgba(255,106,0,0.10);
  --color-orange-20: rgba(255,106,0,0.20);
  --color-orange-30: rgba(255,106,0,0.30);
  --color-orange-40: rgba(255,106,0,0.40);

  /* ------------ 旧版变量兼容 ------------ */
  --brand-orange: var(--color-vital-orange);
  --brand-orange-dark: #E05E00;
  --brand-orange-light: var(--color-orange-10);
  --brand-purple: var(--color-leap-purple);
  --brand-green: var(--color-eco-green);
  --brand-white: var(--color-milk-white);
  --brand-light: var(--color-light-gray);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-muted);
  --bg-dark: var(--color-bg-dark);
  --bg-card: var(--color-bg-card);
  --border: var(--color-light-gray);

  /* ------------ 设计参数 ------------ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.15);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
 * 颜色应用类 - 快速使用
 * ============================================ */

/* 文字颜色类 */
.text-vital-orange { color: var(--color-vital-orange); }
.text-leap-purple { color: var(--color-leap-purple); }
.text-eco-green { color: var(--color-eco-green); }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }

/* 背景颜色类 */
.bg-vital-orange { background-color: var(--color-vital-orange); }
.bg-vital-orange-soft { background-color: var(--color-vital-orange-soft); }
.bg-leap-purple { background-color: var(--color-leap-purple); }
.bg-milk-white { background-color: var(--color-milk-white); }
.bg-light-gray { background-color: var(--color-light-gray); }
.bg-dark { background-color: var(--color-bg-dark); }

/* 边框颜色类 */
.border-vital-orange { border-color: var(--color-vital-orange); }
.border-leap-purple { border-color: var(--color-leap-purple); }
.border-light-gray { border-color: var(--color-light-gray); }

/* ============================================
 * 渐变背景类
 * ============================================ */
.bg-gradient-orange {
  background: linear-gradient(135deg, var(--color-vital-orange) 0%, #E05E00 100%);
}
.bg-gradient-orange-soft {
  background: linear-gradient(135deg, var(--color-vital-orange-soft) 0%, #ffe4cc 100%);
}
.bg-gradient-purple {
  background: linear-gradient(135deg, var(--color-leap-purple) 0%, #4332E0 100%);
}