/**
 * HoneyBox 管理后台 - 主题变量文件
 * 浅蓝色主题 (Light Blue Theme)
 * 
 * 使用方式: var(--变量名)
 * 切换主题: 修改 :root 下的变量值即可
 */

:root {
  /* ==================== 品牌色 ==================== */
  --primary-color: #4A90D9;           /* 主色调 - 天空蓝 */
  --primary-light: #74B9FF;           /* 主色浅色 */
  --primary-dark: #2B7DE9;            /* 主色深色 */
  --primary-bg: #E8F4FD;              /* 主色背景 */
  
  /* ==================== 功能色 ==================== */
  --success-color: #67C23A;           /* 成功色 */
  --warning-color: #E6A23C;           /* 警告色 */
  --danger-color: #F56C6C;            /* 危险色 */
  --info-color: #909399;              /* 信息色 */
  
  /* ==================== 文字色 ==================== */
  --text-primary: #303133;            /* 主要文字 */
  --text-regular: #606266;            /* 常规文字 */
  --text-secondary: #909399;          /* 次要文字 */
  --text-placeholder: #C0C4CC;        /* 占位文字 */
  --text-white: #FFFFFF;              /* 白色文字 */
  
  /* ==================== 边框色 ==================== */
  --border-base: #DCDFE6;             /* 基础边框 */
  --border-light: #E4E7ED;            /* 浅色边框 */
  --border-lighter: #EBEEF5;          /* 更浅边框 */
  --border-extra-light: #F2F6FC;      /* 极浅边框 */
  
  /* ==================== 背景色 ==================== */
  --bg-white: #FFFFFF;                /* 白色背景 */
  --bg-page: #F5F9FC;                 /* 页面背景 - 极浅蓝 */
  --bg-light: #F0F7FF;                /* 浅色背景 */
  --bg-hover: #E8F4FD;                /* 悬停背景 */
  
  /* ==================== 侧边栏 ==================== */
  --sidebar-bg: #F0F7FF;              /* 侧边栏背景 - 浅蓝白 */
  --sidebar-logo-bg: #4A90D9;         /* Logo区背景 - 主蓝色 */
  --sidebar-text: #606266;            /* 侧边栏文字 */
  --sidebar-text-active: #4A90D9;     /* 侧边栏激活文字 */
  --sidebar-item-hover: #E8F4FD;      /* 菜单项悬停背景 */
  --sidebar-item-active: #E8F4FD;     /* 菜单项激活背景 */
  --sidebar-submenu-bg: #E8F4FD;      /* 子菜单背景 */
  --sidebar-width: 200px;             /* 侧边栏宽度 */
  --sidebar-width-collapsed: 64px;    /* 折叠后宽度 */
  
  /* ==================== 顶部栏 ==================== */
  --header-bg: #FFFFFF;               /* 顶部栏背景 */
  --header-height: 50px;              /* 顶部栏高度 */
  --header-shadow: 0 1px 4px rgba(74, 144, 217, 0.1);  /* 顶部栏阴影 */
  
  /* ==================== 登录页 ==================== */
  --login-bg-start: #74B9FF;          /* 登录页渐变起始色 */
  --login-bg-end: #4A90D9;            /* 登录页渐变结束色 */
  --login-box-shadow: 0 4px 20px rgba(74, 144, 217, 0.15);  /* 登录框阴影 */
  
  /* ==================== 圆角 ==================== */
  --border-radius-small: 4px;
  --border-radius-base: 6px;
  --border-radius-large: 8px;
  --border-radius-round: 20px;
  
  /* ==================== 阴影 ==================== */
  --box-shadow-light: 0 2px 12px rgba(0, 0, 0, 0.05);
  --box-shadow-base: 0 2px 12px rgba(74, 144, 217, 0.1);
  --box-shadow-dark: 0 4px 20px rgba(74, 144, 217, 0.15);
  
  /* ==================== 过渡动画 ==================== */
  --transition-duration: 0.3s;
  --transition-timing: ease;
}

/* ==================== Element Plus 主题覆盖 ==================== */
:root {
  /* 覆盖 Element Plus 主色 */
  --el-color-primary: var(--primary-color);
  --el-color-primary-light-3: #7AB4E8;
  --el-color-primary-light-5: #A4CDF0;
  --el-color-primary-light-7: #CEE6F8;
  --el-color-primary-light-8: #E3F0FB;
  --el-color-primary-light-9: #F0F7FF;
  --el-color-primary-dark-2: #3B73AE;
  
  /* 覆盖功能色 */
  --el-color-success: var(--success-color);
  --el-color-warning: var(--warning-color);
  --el-color-danger: var(--danger-color);
  --el-color-info: var(--info-color);
  
  /* 覆盖文字色 */
  --el-text-color-primary: var(--text-primary);
  --el-text-color-regular: var(--text-regular);
  --el-text-color-secondary: var(--text-secondary);
  --el-text-color-placeholder: var(--text-placeholder);
  
  /* 覆盖边框色 */
  --el-border-color: var(--border-base);
  --el-border-color-light: var(--border-light);
  --el-border-color-lighter: var(--border-lighter);
  --el-border-color-extra-light: var(--border-extra-light);
  
  /* 覆盖背景色 */
  --el-bg-color: var(--bg-white);
  --el-bg-color-page: var(--bg-page);
  --el-bg-color-overlay: var(--bg-white);
  
  /* 覆盖圆角 */
  --el-border-radius-base: var(--border-radius-base);
  --el-border-radius-small: var(--border-radius-small);
  --el-border-radius-round: var(--border-radius-round);
}
