/* ================== 设计系统 · 统一变量体系 ==================

   命名规范：
   --c-*   博客自定义变量（统一前缀，避免与任何第三方冲突）
   所有颜色引用统一走 --c-* 变量体系
   dark mode 使用 html[data-theme='dark']（butterfly 标准切换方式）

   ================== */

:root {
  /* --- 色彩 --- */
  --c-primary:       #1677B3;
  --c-primary-dark:  #134e75;
  --c-primary-light: #49b1f5;
  --c-primary-rgb:    22, 119, 179;
  --c-primary-dark-rgb: 19, 78, 117;

  /* 背景 */
  --c-bg:            #F8FAFC;
  --c-surface:       #FFFFFF;
  --c-footer-bg:     #F0F9FF;

  /* 边框 */
  --c-border:        #E5E7EB;

  /* 文字 */
  --c-text:          #374151;
  --c-text-secondary:#6B7280;
  --c-text-rgb:      55, 65, 81;

  /* 语义色（来自 custom-* 变量归一化） */
  --c-accent:        #1677B3;   /* 强调色（原 --custom-accent） */
  --c-meta:          #6B7280;    /* 次要文字（原 --custom-meta） */
  --c-separator:     #E5E7EB;    /* 分隔线（原 --custom-separator） */
  --c-card-bg:       rgba(255,255,255,0.85); /* 卡片背景 */
  --c-highlight:     #1677B3;    /* 高亮（原 --text-highlight, --text-high） */
  --c-secondary:     #6B7280;    /* 次要文字（原 --secondary） */

  /* --- 圆角 --- */
  --c-radius-sm: 8px;
  --c-radius-md: 12px;
  --c-radius-lg: 16px;

  /* --- 间距 --- */
  --c-space-xs:  4px;
  --c-space-sm:  8px;
  --c-space-md:  16px;
  --c-space-lg:  24px;
  --c-space-xl:  40px;
  --c-space-2xl: 64px;

  /* --- 字号 --- */
  --c-text-xs:  12px;
  --c-text-sm:  14px;
  --c-text-base:16px;
  --c-text-lg:  18px;
  --c-text-xl:  20px;
  --c-text-2xl: 24px;
  --c-text-3xl: 30px;
  --c-text-4xl: 36px;

  /* --- 阴影 --- */
  --c-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --c-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --c-shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

  /* --- 动画缓动 --- */
  --c-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ================== 暗黑模式 ================== */
html[data-theme='dark'] {
  --c-bg:            #0f1419;
  --c-surface:       #1a2332;
  --c-footer-bg:     #0f1419;
  --c-border:        #2a3a4e;

  --c-primary:       #64b5f6;
  --c-primary-dark:  #1e3a5f;
  --c-primary-light: #90caf9;
  --c-primary-rgb:   100, 181, 246;
  --c-primary-dark-rgb: 30, 58, 95;

  --c-text:          #e8eef4;
  --c-text-secondary:#8b9db5;
  --c-text-rgb:      232, 238, 244;

  --c-accent:        #64b5f6;
  --c-meta:          #8b9db5;
  --c-separator:     #2a3a4e;
  --c-card-bg:       #1a2332;
  --c-highlight:     #64b5f6;
  --c-secondary:     #8b9db5;

  --c-shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --c-shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --c-shadow-lg: 0 10px 30px rgba(0,0,0,0.6);
}

/* ================== 全局基础样式 ================== */
html { scroll-behavior: auto; }
body { background: var(--c-bg) !important; }

/* ================== 遗留 ad-hoc 变量兼容别名（md 内联样式遗留） ==================
   这些变量名（--border, --secondary, --accent 等）是 md 文件里自创的，
   在 --c-* 体系建立前就存在于此博客的各个页面中。
   通过别名映射确保它们继续正常工作，同时逐步迁移到 --c-* 体系。
   ================== */
:root {
  /* 遗留 ad-hoc 别名 → --c-* 映射 */
  --border:             var(--c-border);
  --secondary:          var(--c-secondary);
  --text-high:          var(--c-highlight);
  --text-highlight:     var(--c-highlight);
  --text-highlight-color: var(--c-highlight);
  --text-color:         var(--c-text);
  --card-bg:            var(--c-card-bg);
  --accent:             var(--c-accent);
  --theme-color:        var(--c-primary);
  --color-primary:      var(--c-primary);
  --color-primary-rgb:  var(--c-primary-rgb);
  --color-primary-dark-rgb: var(--c-primary-dark-rgb);
  --color-text:         var(--c-text);
  --color-text-secondary: var(--c-text-secondary);
  --color-surface:      var(--c-surface);
  --color-bg:           var(--c-bg);
  --custom-text:        var(--c-text);
  --custom-meta:        var(--c-meta);
  --custom-accent:      var(--c-accent);
  --custom-separator:   var(--c-separator);

  /* 以下 3 个是页面里在用了、却一直没有定义的变量（历史遗漏），补上别名。
     缺定义时 color: var(--sec-text) 整条声明失效，文字退回默认色，
     深色模式下会变成黑底黑字，实际效果就是「文字不见了」。
     影响：archives 页 + 5 个分类展示页 + 友链申请弹窗输入框。 */
  --sec-text:            var(--c-text-secondary);
  --primary:             var(--c-primary);
  --color-primary-light: var(--c-primary-light);
}

/* ================== 页脚 ================== */
#footer-wrap {
  background: var(--c-footer-bg) !important;
  background-image: none !important;
  border-top: 1px solid var(--c-border) !important;
  padding: 10px 0 !important;
  min-height: unset !important;
  height: auto !important;
  line-height: 1.6 !important;
  box-shadow: none !important;
  text-align: center;
}
#footer-wrap .copyright,
#footer-wrap .framework-info {
  text-align: center !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px !important;
  color: var(--c-text-secondary) !important;
}
#footer-wrap #ghbdages {
  text-align: center !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
#footer-wrap a { color: var(--c-primary) !important; text-decoration: none; }
#footer-wrap a:hover { text-decoration: underline; }

/* ================== 暗黑模式页脚 ================== */
html[data-theme='dark'] #footer-wrap,
html[data-theme='dark'] #footer-wrap {
  background: var(--c-bg) !important;
  border-top: 1px solid var(--c-border) !important;
}
html[data-theme='dark'] #footer-wrap .copyright,
html[data-theme='dark'] #footer-wrap .framework-info,
html[data-theme='dark'] #footer-wrap .copyright,
html[data-theme='dark'] #footer-wrap .framework-info {
  color: var(--c-text-secondary) !important;
}
html[data-theme='dark'] #footer-wrap a,
html[data-theme='dark'] #footer-wrap a {
  color: var(--c-primary-light) !important;
}

/* ================== 暗黑模式 ad-hoc 别名 ================== */
html[data-theme='dark'] {
  --border:             var(--c-border);
  --secondary:          var(--c-secondary);
  --text-high:          var(--c-highlight);
  --text-highlight:     var(--c-highlight);
  --text-highlight-color: var(--c-highlight);
  --text-color:         var(--c-text);
  --card-bg:            var(--c-card-bg);
  --accent:             var(--c-accent);
  --theme-color:        var(--c-primary);
  --color-primary:      var(--c-primary);
  --color-primary-rgb:  var(--c-primary-rgb);
  --color-primary-dark-rgb: var(--c-primary-dark-rgb);
  --color-text:         var(--c-text);
  --color-text-secondary: var(--c-text-secondary);
  --color-surface:      var(--c-surface);
  --color-bg:           var(--c-bg);
  --custom-text:        var(--c-text);
  --custom-meta:        var(--c-meta);
  --custom-accent:      var(--c-accent);
  --custom-separator:   var(--c-separator);
}