/*!
 * 主题变量系统 - 支持浅色/深色模式切换
 * 基于统计分析的颜色使用频率优化
 */

/* === 浅色主题 (默认) === */
:root {
  /* 基础色彩 - 基于现有最常用颜色 */
  --color-bg-primary: #fff;           /* 使用频率: 46次 */
  --color-bg-secondary: #fbfbfb;      /* 使用频率: 14次 */
  --color-bg-tertiary: #f0f0f0;      /* 背景变化层次 - 增强对比度 */
  --color-bg-overlay: rgba(255,255,255,0.9);
  
  /* 文字颜色 - 基于现有文字色彩 */
  --color-text-primary: #333;         /* 主文字颜色 */
  --color-text-secondary: #555;       /* 次要文字颜色 */
  --color-text-muted: #999;          /* 使用频率: 32次 */
  --color-text-light: #bbb;          /* 使用频率: 20次 */
  --color-text-disabled: #ddd;       /* 使用频率: 10次 */
  
  /* 品牌色彩 - 保持现有品牌识别 */
  --color-brand-primary: #FF6651;     /* 使用频率: 29次, 主品牌色 */
  --color-brand-secondary: #EA7FB9;   /* meta theme-color中使用 */
  --color-brand-accent: #ff8a75;      /* 品牌色变体 */
  --color-brand-error: #FF5E52;       /* 使用频率: 4次 */
  
  /* 功能性色彩 */
  --color-success: #5CB85C;           /* 使用频率: 3次 */
  --color-info: #45B6F7;             /* 使用频率: 3次 */
  --color-warning: #F0AD4E;
  --color-purple: #C35BFF;           /* 使用频率: 3次 */
  
  /* 边框和分割线 */
  --color-border-primary: #eee;       /* 使用频率: 43次 */
  --color-border-secondary: #ddd;     /* 使用频率: 10次 */
  --color-border-light: #f0f0f0;
  --color-border-dark: #aaa;         /* 使用频率: 4次 */
  
  /* 交互状态 */
  --color-hover: rgba(255, 102, 81, 0.1);
  --color-active: rgba(255, 102, 81, 0.2);
  --color-focus: rgba(255, 102, 81, 0.3);
  
  /* 阴影系统 - 基于现有阴影 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);   /* 基于现有box-shadow */
  --shadow-lg: 1px 0 5px rgba(0,0,0,0.06);  /* 基于header阴影 */
  --shadow-overlay: 0 0 10px rgba(0,0,0,0.1);
  
  /* 渐变 - 基于现有渐变 */
  --gradient-overlay: linear-gradient(transparent, rgba(0,0,0,0.9));
  --gradient-mask: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent 100%);
}

/* === 深色主题 === */
[data-theme="dark"] {
  /* 基础色彩 - 深色模式适配 */
  --color-bg-primary: #1a1a1a;        /* 主背景 */
  --color-bg-secondary: #2d2d2d;      /* 次要背景 */
  --color-bg-tertiary: #404040;       /* 第三层背景 - 增强对比度 */
  --color-bg-overlay: rgba(26,26,26,0.9);
  
  /* 文字颜色 - 深色模式优化 */
  --color-text-primary: #e2e8f0;      /* 主文字 - 高对比度 */
  --color-text-secondary: #cbd5e0;    /* 次要文字 */
  --color-text-muted: #a0aec0;        /* 弱化文字 */
  --color-text-light: #718096;        /* 更淡的文字 */
  --color-text-disabled: #4a5568;     /* 禁用状态 */
  
  /* 品牌色彩 - 保持品牌识别度 */
  --color-brand-primary: #FF6651;     /* 主品牌色保持不变 */
  --color-brand-secondary: #EA7FB9;   /* 副品牌色保持不变 */
  --color-brand-accent: #ff8a75;      /* 品牌色变体 */
  --color-brand-error: #FF6B6B;       /* 错误色稍微调亮 */
  
  /* 功能性色彩 - 深色模式优化 */
  --color-success: #68D391;           /* 成功色调亮 */
  --color-info: #63B3ED;             /* 信息色调亮 */
  --color-warning: #F6E05E;          /* 警告色调亮 */
  --color-purple: #D69E2E;           /* 紫色调整 */
  
  /* 边框和分割线 - 深色模式适配 */
  --color-border-primary: #4a5568;    /* 主要边框 */
  --color-border-secondary: #2d3748;  /* 次要边框 */
  --color-border-light: #384047;      /* 浅色边框 */
  --color-border-dark: #1a202c;       /* 深色边框 */
  
  /* 交互状态 - 深色模式增强 */
  --color-hover: rgba(255, 102, 81, 0.2);
  --color-active: rgba(255, 102, 81, 0.3);
  --color-focus: rgba(255, 102, 81, 0.4);
  
  /* 阴影系统 - 深色模式增强 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 1px 0 5px rgba(0,0,0,0.3);
  --shadow-overlay: 0 0 10px rgba(0,0,0,0.5);
  
  /* 渐变 - 深色模式调整 */
  --gradient-overlay: linear-gradient(transparent, rgba(0,0,0,0.9));
  --gradient-mask: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 100%);
}

/* === 主题切换过渡效果 === */
* {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease, 
              color 0.3s ease,
              box-shadow 0.3s ease;
}

/* 避免过渡影响某些元素 */
img, video, iframe, 
.glide *, 
[class*="tipsy"] {
  transition: none !important;
}

/* === 主题切换按钮样式 === */
.theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-primary);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  font-size: 20px;
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background: var(--color-hover);
  transform: scale(1.05);
}

/* === Header中的主题切换按钮样式 === */
.theme-toggle-header {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  cursor: pointer;
  color: var(--color-text-primary);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: all 0.2s ease;
  float: right;
  margin-top: 24px;
  /* 桌面端保持原始尺寸协调 */
  position: relative;
  z-index: 10;
}

.theme-toggle-header:hover {
  background: var(--color-hover);
  color: var(--color-brand-primary);
}

/* --- 图标显示逻辑 --- */

/* 默认 (浅色模式) 显示月亮 */
html:not([data-theme="dark"]) .theme-icon.light {
  display: inline-block;
}
html:not([data-theme="dark"]) .theme-icon.dark {
  display: none;
}

/* 深色模式时显示太阳 */
[data-theme="dark"] .theme-icon.light {
  display: none;
}
[data-theme="dark"] .theme-icon.dark {
  display: inline-block;
}

/* Header中图标的具体样式 */
.theme-toggle-header .theme-icon {
  font-size: 18px; /* 稍微调大图标 */
  line-height: 1; /* 确保垂直居中 */
}

/* === 移动端适配 (新) === */
@media (max-width: 1024px) {
  .theme-toggle-header {
    display: inline-flex; /* 在移动端显示 */
    position: absolute;
    top: 24px; /* (80px 头部高度 - 32px 按钮高度) / 2 */
    right: 50px; /* 定位在搜索按钮左侧 */
    margin: 0; /* 覆盖桌面端样式 */
    float: none; /* 覆盖桌面端样式 */
  }
}

@media (max-width: 544px) {
  .theme-toggle-header {
    top: 5px; /* (50px 头部高度 - 28px 按钮高度) / 2 */
    /* right: 15px; 移动到右边缘，避免与logo重叠 */
    width: 28px; /* 缩小按钮尺寸 */
    height: 28px; /* 缩小按钮尺寸 */
    z-index: 1001; /* 更高的层级 */
    min-width: 40px; /* 保持足够的触摸区域 */
    min-height: 40px;
    /* 确保不会与logo区域重叠 */
    margin: 0;
    padding: 6px;
  }
  
  /* 在小屏幕上调整图标大小 */
  .theme-toggle-header .theme-icon {
    font-size: 14px;
  }
    
  /* 增强点击区域检测 */
  .theme-toggle-header::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    z-index: -1;
  }
}

/* === 深色模式图片优化 === */
/* 基于专业研究的深色模式图片优化 */
[data-theme="dark"] img {
  filter: brightness(0.9) contrast(1.1);
  transition: filter 0.3s ease;
}

/* 主要内容图片的特殊处理 */
[data-theme="dark"] .image-content img,
[data-theme="dark"] .article-content img,
[data-theme="dark"] .gallery img,
[data-theme="dark"] .imgbox img {
  filter: brightness(0.85) contrast(1.15) saturate(1.05);
}

/* 头像和人物照片的优化 */
[data-theme="dark"] .avatar img,
[data-theme="dark"] .author-avatar img {
  filter: brightness(0.9) contrast(1.1) saturate(0.95);
}

/* logo和品牌图片保持原始效果 */
[data-theme="dark"] .logo img,
[data-theme="dark"] .brand img,
[data-theme="dark"] .header-logo img {
  filter: none;
}

/* 图标和装饰性图片保持原始 */
[data-theme="dark"] .icon img,
[data-theme="dark"] .decoration img,
[data-theme="dark"] .emoji {
  filter: none;
}

/* 悬停时微调亮度增强交互性 */
[data-theme="dark"] .imgbox:hover img,
[data-theme="dark"] .gallery-item:hover img {
  filter: brightness(0.95) contrast(1.1) saturate(1.05);
}

/* 移动端性能优化 - 简化滤镜 */
@media (max-width: 768px) {
  [data-theme="dark"] img {
    filter: brightness(0.9);
  }
  
  [data-theme="dark"] .image-content img,
  [data-theme="dark"] .article-content img {
    filter: brightness(0.85) contrast(1.1);
  }
}

/* === SEO 标题优化 === */
/* 深色模式下的 SEO 标题样式优化 */
[data-theme="dark"] .seo-title {
  color: var(--color-text-primary) !important;
  background: var(--color-bg-secondary) !important;
  border: 1px solid var(--color-border-primary);
  opacity: 0.9; /* 深色模式下稍微提高不透明度 */
}

/* 高对比度模式下禁用滤镜 */
@media (prefers-contrast: high) {
  [data-theme="dark"] img {
    filter: none !important;
  }
}

/* 减少动画偏好下禁用过渡 */
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] img {
    transition: none;
  }
}