/* ============================================
   Theme Variables - 主题变量系统
   ============================================ */

:root {
  /* 浅色主题 - 双猫配色方案 */
  
  /* 第一梯队：核心基础色 */
  --bg-color: #eee8df;           /* 背景色 - 橘白猫腹部/脚部的奶油白色，贴近白色 */
  --text-color: #2a221c;         /* 文本色 - 从深棕衍生，确保对比度 ≥ 4.5:1 */
  
  /* 第二梯队：功能性颜色 */
  --primary-color: #c0744b;      /* 主色 - 橘白猫头部/背部的暖橘色 */
  --secondary-color: #d8ccbc;    /* 次要色 - 暹罗猫背部/腹部的暖米色 */
  --accent-color: #48392e;       /* 强调色 - 暹罗猫头部/脚部的深巧克力色 */
  
  /* 链接与交互色 */
  --link-color: #c0744b;         /* 链接/主要按钮 - 使用主色 */
  --link-hover: #48392e;         /* 链接悬停 - 使用强调色 */
  
  /* 状态色 */
  --success-color: #7a9b7a;      /* 成功提示 */
  --warning-color: #c9a04a;      /* 警告提示 */
  --error-color: #c55a4a;        /* 错误提示 */
  --info-color: #6a8da0;         /* 信息提示 */
  
  /* 布局与组件 */
  --header-bg: rgba(238, 232, 223, 0.8);  /* 导航栏背景 - 半透明奶油白色 */
  --footer-bg: #e5ddd2;          /* 页脚背景 - 稍深奶油白色 */
  --border-color: #ddd5ca;       /* 边框色（极少使用） */
  --tooltip-bg: #2a221c;         /* Tooltip 背景 - 深褐色 */
  --tooltip-text: #eee8df;       /* Tooltip 文字 - 奶油白色 */
  --content-max-width: 900px;    /* 内容最大宽度 */
}

[data-theme="dark"] {
  /* 深色主题 - 双猫配色方案 */
  
  /* 第一梯队：核心基础色 */
  --bg-color: #1f1a16;           /* 背景色 - 深巧克力色背景 */
  --text-color: #e8dfd4;         /* 文本色 - 柔和浅米色 */
  
  /* 第二梯队：功能性颜色 */
  --primary-color: #d48a62;      /* 主色 - 提亮的暖橘色 */
  --secondary-color: #2a221c;    /* 次要色 - 深褐色 */
  --accent-color: #f0e6d8;       /* 强调色 - 浅米色 */
  
  /* 链接与交互色 */
  --link-color: #d48a62;         /* 链接/主要按钮 - 提亮的主色 */
  --link-hover: #f0e6d8;         /* 链接悬停 - 浅米色 */
  
  /* 状态色（降低饱和度，提高亮度） */
  --success-color: #8fb38f;      /* 成功提示 */
  --warning-color: #d4af5a;      /* 警告提示 */
  --error-color: #d46a5a;        /* 错误提示 */
  --info-color: #7a9db0;         /* 信息提示 */
  
  /* 布局与组件 */
  --header-bg: rgba(31, 26, 22, 0.8);    /* 导航栏背景 - 半透明深褐色 */
  --footer-bg: #161210;          /* 页脚背景 - 更深巧克力色 */
  --border-color: #2a221c;       /* 边框色（极少使用） */
  --tooltip-bg: #e8dfd4;         /* Tooltip 背景 - 浅米色 */
  --tooltip-text: #1f1a16;       /* Tooltip 文字 - 深巧克力色 */
}

/* ============================================
   Global Styles - 全局样式
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================
   Particle Canvas - 粒子画布
   ============================================ */

#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}