/* 全局CSS变量定义 - 核心！后续主题切换仅需修改这里的变量值 */
/* 灰色系（高级中性灰）- 简约沉稳/商务风 */
:root {
  /* 主色调（灰色系）- 主题色核心，后续切换只改这几个 */
  --primary-color: #4b5563;        /* 主灰（中深）- 按钮、文字hover、选中态 */
  --primary-color-light: #6b7280;  /* 中灰 - 渐变、卡片边框hover */
  --primary-color-lighter: #9ca3af;/* 浅灰 - 边框hover、背景点缀 */
  --primary-rgb: 75, 85, 99;         /* 主色RGB值 - 适配rgba透明度（关键） */

  --h1-gradient-last: #9ca3af;     /* h1渐变色的最后一个数值 */

  /* 背景色系列 */
  --bg-page: #f3f4f6;              /* 页面整体背景 - 浅灰底，更柔和 */
  --bg-white: #ffffff;             /* 纯白背景 - 卡片、搜索框、按钮等，对比清晰 */
  --bg-primary-light: #f9fafb;     /* 主色浅背景 - 标签hover、徽章背景，低饱和灰 */
  --bg-yellow-light: #fef3c7;      /* 黄色浅背景 - 大小徽章，保留辅助色突出关键信息 */

  /* 文本色系列 - 从深到浅，适配不同层级 */
  --text-main: #1f2937;            /* 主文本 - 标题、重要内容，深灰更易读 */
  --text-secondary: #6b7280;       /* 次要文本 - 说明、统计，中灰适配主题 */
  --text-tertiary: #9ca3af;        /* 第三文本 - 标签、链接默认、页脚链接，浅灰 */
  --text-placeholder: #d1d5db;     /* 占位符文本 - 输入框placeholder，超浅灰 */
  --text-yellow: #d97706;          /* 黄色文本 - 大小徽章，保留辅助色 */
  --text-white: #ffffff;           /* 白色文本 - 按钮文字，和灰色按钮对比清晰 */

  /* 边框色系列 */
  --border-main: #e5e7eb;          /* 主要边框 - 卡片、搜索框、分页等，浅灰边框更协调 */
  --border-nav: rgba(0, 0, 0, 0.08);/* 导航栏底边框，稍加深一点适配灰色调 */
  --border-transparent: transparent;/* 透明边框 */

  /* 其他辅助色/透明值 */
  --white-rgb: 255, 255, 255;      /* 白色RGB值 - 适配导航栏透明背景 */
  --black-rgb: 0, 0, 0;            /* 黑色RGB值 - 备用 */
}