/* ============================================================
   咸鱼社区 暗色主题 dark.css  v1.0
   ------------------------------------------------------------
   用法：html[data-theme="dark"] 时生效；JS（theme.js）负责
   设置 data-theme 并循环切换。浅色模式下本文件只提供
   .theme-toggle 按钮的基底样式，不改动任何亮色外观。

   设计原则：只覆盖值、不动结构；全部经由 style.css 的
   :root token + 少量组件硬编码补丁实现。

   —— 内联硬编码亮色清偿清单（后续应改到模板，改完可删对应补丁）——
   1. templates/activities.php:31   border:1px solid #e5e8f0   → 补丁 A1
   2. templates/invite.php:21       color:#2b5cd9              → 补丁 A3（同 app.js）
   3. templates/invite.php:49-51    th border-bottom #e5e8f0   → 补丁 A1
   4. templates/invite.php:57/60/61 td border-bottom #eef1f7   → 补丁 A2
   5. templates/tasks.php:16        进度条底 background #eef1f7 → 补丁 A2
   6. templates/shop.php:43         border:1px solid #e5e8f0   → 补丁 A1
   7. templates/shop.php:53         color:#ff9f27（品牌橙，暗色可读，无需处理）
   8. templates/activities.php:40   color:#ff9f27（同上，无需处理）
   9. static/js/app.js:369          color:#2b5cd9（回复提示取消链接）→ 补丁 A3
   10. templates/chat.php:12/14     全部 var() 引用，token 自动适配，无需处理
   11. templates/profile.php:46     渐变 var(--c-primary)+#5f7cf0，自动适配
   12. templates/msg.php:15         var(--c-err) 底，自动适配
   13. app/functions.php:367-371    字母头像 palette（#2b5cd9 等 + 1f 透明度底）
       → 半透明彩底在暗色下成立，仅补 inset 描边/微提亮（见「头像」段）；
         后续清偿建议改为 CSS 类 + token。
   14. templates/signin.php 日历格为 class 驱动（.sc-day 系），token 自动
       适配；无内联色。防御性补丁见「签到日历」段（若日后 JS 注入内联
       背景可用 .sign-calendar .sc-day[style] 兜底）。
   ============================================================ */

/* ============================================================
   1. Token 覆盖（对应 style.css :root）
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;

  /* —— 品牌色 —— */
  --c-primary: #5b7cf5;            /* 主色·提亮（暗底文字 4.9:1） */
  --c-primary-dark: #8299ff;       /* 链接/文字 hover：暗色下更亮 */
  --c-primary-soft: rgba(91, 124, 245, .16);
  --c-primary-ring: rgba(91, 124, 245, .38);

  --c-accent: #ff9f27;             /* 咸鱼干橙：不变 */
  --c-accent-bright: #ffb340;
  --c-accent-deep: #ff8c1a;
  --c-accent-ink: #4a2600;         /* 橙底上的深字：不变 */
  --c-accent-soft: rgba(255, 159, 39, .16);

  /* —— 语义色 —— */
  --c-ok: #0d8a5f;                 /* 保持（白字 4.5:1，作填充底成立） */
  --c-ok-soft: rgba(19, 170, 116, .18);
  --c-err: #d84a50;                /* 中间值：白字 4.1:1 / 暗底文字 4.9:1 */
  --c-err-soft: rgba(216, 74, 80, .18);

  /* —— 中性色阶（暗色翻转，冷蓝黑体系） —— */
  --n-0: #171e2e;                  /* 卡片面 */
  --n-50: #0f1420;                 /* 页面底 */
  --n-100: #1d2536;                /* 淡底/日历格/表头 */
  --n-200: #2a3348;                /* 边线 */
  --n-300: #3a445e;                /* 深边线 */
  --n-400: #5d6880;                /* 占位符/装饰 */
  --n-500: #8a93ab;                /* 辅助文字（卡片上 5.5:1） */
  --n-600: #a3adc4;                /* 次要文字 */
  --n-700: #c0c7d8;                /* 深次要 */
  --n-800: #dfe4ef;                /* 正文 */
  --n-900: #f2f5fa;                /* 标题（注：--c-main 单独下压，见下） */

  --c-bg: var(--n-50);
  --c-card: var(--n-0);
  --c-text: var(--n-800);
  --c-sub: var(--n-600);
  --c-faint: var(--n-500);
  --c-line: rgba(255, 255, 255, .08);   /* 白 8% */
  --c-main: #0a0e18;               /* 页脚深底：比页面更深，压住 --n-900 翻转 */

  /* —— 阴影（暗色下加深、去蓝灰改纯黑） —— */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .4);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, .45), 0 20px 48px rgba(0, 0, 0, .6);
  --shadow-primary: 0 4px 14px rgba(91, 124, 245, .35);
  --shadow-accent: 0 4px 14px rgba(255, 140, 26, .4);
}

/* ============================================================
   2. 基础 / 全局补丁
   ============================================================ */
html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 400px at 85% -120px, rgba(91, 124, 245, .08), transparent 60%),
    radial-gradient(900px 320px at 5% -80px, rgba(255, 159, 39, .05), transparent 55%),
    var(--c-bg);
}

html[data-theme="dark"] ::selection { background: rgba(91, 124, 245, .4); }

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16);
  border-radius: var(--r-full);
  border: 2px solid transparent;
  background-clip: content-box;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .28); }

/* ============================================================
   3. 组件补丁
   ============================================================ */

/* —— 导航栏（玻璃拟态转暗） —— */
html[data-theme="dark"] .navbar {
  background: rgba(15, 20, 32, .72);
  border-bottom-color: rgba(255, 255, 255, .07);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="dark"] .navbar { background: rgba(15, 20, 32, .97); }
}
html[data-theme="dark"] #userMenuBtn:hover,
html[data-theme="dark"] .nav-avatar-btn:hover { background: rgba(255, 255, 255, .06); border-color: var(--c-line); }
html[data-theme="dark"] .navbar .btn-ghost { color: var(--n-700); }

/* —— 导航搜索 —— */
html[data-theme="dark"] .nav-search .input { background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .nav-search .input:focus { background: var(--c-card); }

/* —— 下拉菜单 —— */
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] #userMenu {
  background: rgba(23, 30, 46, .92);
  border-color: rgba(255, 255, 255, .08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="dark"] .dropdown-menu,
  html[data-theme="dark"] #userMenu { background: var(--c-card); }
}

/* —— 卡片系（style.css 硬编码 rgba(35,42,61,.06) 边框） —— */
html[data-theme="dark"] .card,
html[data-theme="dark"] .thread-list,
html[data-theme="dark"] .thread-hd,
html[data-theme="dark"] .floor,
html[data-theme="dark"] .sign-card { border-color: var(--c-line); }

/* —— 楼层头部淡底 —— */
html[data-theme="dark"] .floor-hd { background: rgba(255, 255, 255, .03); }

/* —— 表单控件（暗底） —— */
html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .select {
  background: #131a2b;
  border-color: var(--n-300);
  color: var(--c-text);
}
html[data-theme="dark"] .nav-search .input { background: rgba(255, 255, 255, .06); }

/* —— 发帖工具栏 —— */
html[data-theme="dark"] .editor-toolbar { background: var(--n-100); }

/* —— 统计条：保持渐变，压深一档保证白字对比 —— */
html[data-theme="dark"] .stat-bar {
  background: linear-gradient(120deg, #161e3a 0%, #263360 60%, #37498c 100%);
}

/* —— 公告条（style.css 硬编码 #8a5410 文字在暗色下过深） —— */
html[data-theme="dark"] .site-notice { color: #ffc06a; border-color: rgba(255, 159, 39, .32); }

/* —— 代码块（本就深底，暗色下再压一档并加边线） —— */
html[data-theme="dark"] .bb-code {
  background: #0c1324;
  color: #d6e2ff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

/* —— 引用块：token 自动适配，补一层可读性微调 —— */
html[data-theme="dark"] .bb-quote { border-left-color: var(--c-primary); }

/* —— 聊天气泡（自己的气泡改深渐变保证白字对比） —— */
html[data-theme="dark"] .chat-me > div,
html[data-theme="dark"] .chat-item.chat-me > div {
  background: linear-gradient(135deg, #4d68e8, #3d55cf);
}
html[data-theme="dark"] .chat-you > div,
html[data-theme="dark"] .chat-item > div {
  background: var(--n-100);
  color: var(--n-800);
}

/* —— Toast（style.css 用 var(--n-900) 做底，token 翻转后必须单独压回） —— */
html[data-theme="dark"] .toast { background: #232c42; color: #eef1f8; }
html[data-theme="dark"] .toast.ok { background: #0d8a5f; color: #fff; }
html[data-theme="dark"] .toast.err { background: #c84348; color: #fff; }

/* —— 弹层 —— */
html[data-theme="dark"] .tip-modal-mask,
html[data-theme="dark"] #tipModalMask { background: rgba(4, 7, 14, .66); }
html[data-theme="dark"] .tip-modal,
html[data-theme="dark"] #tipModal { border: 1px solid var(--c-line); }

/* —— 签到日历（含防御性内联兜底） —— */
html[data-theme="dark"] .sign-calendar .sc-day { background: var(--n-100); }
html[data-theme="dark"] .sign-calendar .sc-day.on {
  background: linear-gradient(135deg, #12b078, #0d8a5f);
  box-shadow: 0 2px 8px rgba(13, 138, 95, .45);
}
/* 防御：若日后 JS 给格子注入内联背景，暗色下强制回落到 token 体系 */
html[data-theme="dark"] .sign-calendar .sc-day[style*="background"]:not(.on) {
  background: var(--n-100);
  color: var(--n-500);
}

/* —— 表格（th 用 token 自动适配；补 hover 对比） —— */
html[data-theme="dark"] .table th { background: var(--n-100); color: var(--n-900); }

/* —— 分页 —— */
html[data-theme="dark"] .pager .cur {
  background: #4d68e8;
  border-color: #4d68e8;
}

/* —— 移动端底部导航 —— */
html[data-theme="dark"] .mobile-nav {
  background: rgba(15, 20, 32, .85);
  border-top-color: rgba(255, 255, 255, .08);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="dark"] .mobile-nav { background: rgba(15, 20, 32, .98); }
}
html[data-theme="dark"] .m-nav-post span {
  box-shadow: var(--shadow-accent), 0 0 0 4px rgba(15, 20, 32, .9);
}

/* —— 页脚（--c-main 已单独压深，文字沿用白色系即可） —— */
html[data-theme="dark"] .site-footer { border-top: 1px solid rgba(255, 255, 255, .05); }

/* —— 空态：token 自动适配，仅微调 —— */
html[data-theme="dark"] .empty-state { color: var(--n-500); }

/* —— 头像（letter 底为 functions.php 内联半透明彩底） —— */
html[data-theme="dark"] .avatar { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
/* 字母头像（style 内含 1f 透明度彩底）：描边 + 叠一层白 4% 提高可辨识度 */
html[data-theme="dark"] .avatar[style*="1f"] {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 0 0 999px rgba(255, 255, 255, .04);
}

/* —— 搜索高亮 mark：暗色下降低黄块强度 —— */
html[data-theme="dark"] mark,
html[data-theme="dark"] .mark {
  background: linear-gradient(transparent 55%, rgba(255, 159, 39, .38) 55%);
}

/* —— 进度条：轨道 token 自动适配，填充渐变提亮 —— */
html[data-theme="dark"] .progress-in,
html[data-theme="dark"] .progress-bar > div {
  background: linear-gradient(90deg, #5b7cf5, #7e97ff);
}

/* —— 主按钮/当前页：白字对比，改用深端渐变（--c-primary-dark 已转为
      更亮色供链接 hover，故渐变在此单独下压） —— */
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #4d68e8, #3d55cf);
}
html[data-theme="dark"] .btn-primary:hover { color: #fff; }

/* ============================================================
   4. 内联硬编码兜底（详见文件头清偿清单 A1-A3）
   ============================================================ */
/* A1: #e5e8f0 亮色边框（activities / invite th / shop 商品卡） */
html[data-theme="dark"] [style*="#e5e8f0"] { border-color: var(--n-200) !important; }
/* A2: #eef1f7 —— tasks 进度条底（background）与 invite 行线（border-bottom） */
html[data-theme="dark"] [style*="#eef1f7"][style*="background"] { background: var(--n-100) !important; }
html[data-theme="dark"] [style*="#eef1f7"][style*="border-bottom"] { border-bottom-color: var(--n-200) !important; }
/* A3: #2b5cd9 文字（invite 邀请码 / app.js 回复取消链接）→ 指回主色 token */
html[data-theme="dark"] [style*="color:#2b5cd9"] { color: var(--c-primary) !important; }

/* ============================================================
   5. 主题切换按钮（light/dark 共用基底，走 token 自适配）
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--n-300);
  border-radius: var(--r-full);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.theme-toggle:hover {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}

/* ============================================================
   6. 切换转场（theme.js 切换时给 html 加 .theme-anim，300ms 后移除）
   ============================================================ */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* ============================================================
   7. 系统偏好兜底（no-JS / data-theme 缺失时跟随系统）
   仅复制 token + 全局关键项；组件级补丁在 JS 设定 data-theme
   后由上方规则接管。
   ============================================================ */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: dark;
    --c-primary: #5b7cf5;
    --c-primary-dark: #8299ff;
    --c-primary-soft: rgba(91, 124, 245, .16);
    --c-primary-ring: rgba(91, 124, 245, .38);
    --c-accent: #ff9f27;
    --c-accent-bright: #ffb340;
    --c-accent-deep: #ff8c1a;
    --c-accent-ink: #4a2600;
    --c-accent-soft: rgba(255, 159, 39, .16);
    --c-ok: #0d8a5f;
    --c-ok-soft: rgba(19, 170, 116, .18);
    --c-err: #d84a50;
    --c-err-soft: rgba(216, 74, 80, .18);
    --n-0: #171e2e;
    --n-50: #0f1420;
    --n-100: #1d2536;
    --n-200: #2a3348;
    --n-300: #3a445e;
    --n-400: #5d6880;
    --n-500: #8a93ab;
    --n-600: #a3adc4;
    --n-700: #c0c7d8;
    --n-800: #dfe4ef;
    --n-900: #f2f5fa;
    --c-bg: var(--n-50);
    --c-card: var(--n-0);
    --c-text: var(--n-800);
    --c-sub: var(--n-600);
    --c-faint: var(--n-500);
    --c-line: rgba(255, 255, 255, .08);
    --c-main: #0a0e18;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, .45), 0 20px 48px rgba(0, 0, 0, .6);
    --shadow-primary: 0 4px 14px rgba(91, 124, 245, .35);
    --shadow-accent: 0 4px 14px rgba(255, 140, 26, .4);
  }
  html:not([data-theme="dark"]):not([data-theme="light"]) body {
    background:
      radial-gradient(1200px 400px at 85% -120px, rgba(91, 124, 245, .08), transparent 60%),
      radial-gradient(900px 320px at 5% -80px, rgba(255, 159, 39, .05), transparent 55%),
      var(--c-bg);
  }
}