/* ============================================================
 * 全站颜色变量(2026-10-17 深色模式第一步)
 *  - 浅色值 = 现有页面最常用的那几个颜色,铺上去不改外观
 *  - 深色用 html[data-theme="dark"] 覆盖(特异性 0,1,1,压得过 main.css 的 :root)
 *  - 命名:--t-surface* 背景层次;--t-text* 文字层次;--t-line* 边框;--t-white/--t-black 恒定;
 *         语义色各有 填充(fill)/文字(-text)/浅底(-soft)/浅边(-line) 四档
 *  - 用法:写样式一律用变量,不要再写死颜色;新加页面也是
 * ============================================================ */
:root {
  color-scheme: light;

  /* 背景层次:页面 → 卡片 → 浅灰块 → 更灰 → 轨道 / 禁用 */
  --t-bg: #ffffff;
  --t-surface: #ffffff;
  --t-surface-2: #f8fafc;
  --t-surface-3: #f1f5f9;
  --t-surface-4: #e2e8f0;
  --t-ink: #1e293b;            /* 深色填充(提示条、深色按钮、底栏) */

  /* 文字层次 */
  --t-text: #0f172a;
  --t-text-2: #334155;
  --t-text-3: #64748b;
  --t-text-4: #94a3b8;
  --t-text-5: #cbd5e1;
  --t-on-ink: #ffffff;         /* 深色填充上的字 */

  /* 边框 */
  --t-line: #e5e7eb;
  --t-line-2: #f1f5f9;
  --t-line-3: #cbd5e1;

  /* 恒定色(两种模式都不变:彩色按钮上的白字、遮罩) */
  --t-white: #ffffff;
  --t-black: #000000;

  /* 主色 */
  --t-primary: #006fff;
  --t-primary-text: #006fff;
  --t-primary-hover: #0058d9;
  --t-primary-dark: #0049b3;
  --t-primary-soft: #eef5ff;
  --t-primary-soft-2: #dbeafe;
  --t-primary-line: #bfdbfe;

  /* 错误 / 危险 */
  --t-danger: #dc2626;
  --t-danger-text: #dc2626;
  --t-danger-strong: #b91c1c;
  --t-danger-soft: #fef2f2;
  --t-danger-soft-2: #fee2e2;
  --t-danger-line: #fecaca;

  /* 成功 */
  --t-success: #16a34a;
  --t-success-text: #16a34a;
  --t-success-strong: #15803d;
  --t-success-soft: #ecfdf5;
  --t-success-soft-2: #dcfce7;
  --t-success-line: #bbf7d0;

  /* 警告 / 橙 */
  --t-warning: #f59e0b;
  --t-warning-text: #b45309;
  --t-warning-strong: #92400e;
  --t-warning-soft: #fef3c7;
  --t-warning-soft-2: #fffbeb;
  --t-warning-line: #fde68a;

  /* 信息 / 天蓝 */
  --t-info: #0284c7;
  --t-info-text: #0369a1;
  --t-info-soft: #e0f2fe;
  --t-info-soft-2: #f0f9ff;
  --t-info-line: #bae6fd;

  /* 强调 / 紫 */
  --t-accent: #7c3aed;
  --t-accent-text: #6d28d9;
  --t-accent-soft: #eef2ff;
  --t-accent-soft-2: #f5f3ff;
  --t-accent-line: #c7d2fe;

  /* 阴影(深色下减淡) */
  --t-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .06);
}

html[data-theme="dark"] {
  color-scheme: dark;

  /* 中性灰系(参考 zh.pro:页面 #181818 / 卡片 #2a2a2a / 边框 #323232 / 正文近白),不带蓝调,层次靠深浅灰 */
  --t-bg: #181818;
  --t-surface: #232323;
  --t-surface-2: #2a2a2a;
  --t-surface-3: #323232;
  --t-surface-4: #3e3e3e;
  --t-ink: #3a3a3a;

  --t-text: #f2f2f2;
  --t-text-2: #d4d4d4;
  --t-text-3: #9e9e9e;
  --t-text-4: #808080;
  --t-text-5: #5e5e5e;
  --t-on-ink: #ffffff;

  --t-line: #323232;
  --t-line-2: #2a2a2a;
  --t-line-3: #454545;

  /* 主色压一档,浅底用「主色 20% 叠在卡片上」的中性深蓝灰 */
  --t-primary: #2f80ff;
  --t-primary-text: #6aa6ff;
  --t-primary-hover: #4a90ff;
  --t-primary-dark: #8dbaff;
  --t-primary-soft: #223040;
  --t-primary-soft-2: #243a56;
  --t-primary-line: #2f4d78;

  --t-danger: #e5484d;
  --t-danger-text: #ff7070;
  --t-danger-strong: #ff9a9a;
  --t-danger-soft: #3a2424;
  --t-danger-soft-2: #472a2a;
  --t-danger-line: #6a3535;

  --t-success: #22a35e;
  --t-success-text: #34d399;
  --t-success-strong: #6ee7b7;
  --t-success-soft: #1f3129;
  --t-success-soft-2: #203d31;
  --t-success-line: #2a5a44;

  --t-warning: #d9960f;
  --t-warning-text: #f5b942;
  --t-warning-strong: #fbd27a;
  --t-warning-soft: #3a2f18;
  --t-warning-soft-2: #332a14;
  --t-warning-line: #6b5424;

  --t-info: #0ea5e9;
  --t-info-text: #4cc3f7;
  --t-info-soft: #1e3038;
  --t-info-soft-2: #1a2a31;
  --t-info-line: #244a5c;

  --t-accent: #8b5cf6;
  --t-accent-text: #b197fb;
  --t-accent-soft: #2d2742;
  --t-accent-soft-2: #28233a;
  --t-accent-line: #45396e;

  --t-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 4px 14px rgba(0, 0, 0, .35);

  /* 主题模板自带的 HSL 变量(main.css 用 hsl(var(--white)) 这种写法)一并翻过去 */
  --white: 0 0% 14%;             /* 原白底 → 深色卡片 #232323 */
  --light-h: 0; --light-s: 0%; --light-l: 72%;      /* 正文灰 → 浅灰字 */
  --black-h: 0; --black-s: 0%; --black-l: 95%;      /* 原黑字 → 近白 */
  --heading-color: 0 0% 95%;
  --border-color: 0 0% 20%;
  --section-bg: 0 0% 9%;         /* 原浅灰分区 → 页面深底 #171717 */

  /* design-system.css 的一套 */
  --ds-bg-body: #181818; --ds-bg-card: #232323; --ds-bg-elevated: #323232; --ds-bg-muted: #2a2a2a;
  --ds-text-primary: #f2f2f2; --ds-text-secondary: #d4d4d4; --ds-text-muted: #9e9e9e;
  --ds-border: #323232; --ds-border-hover: #454545;
  --ds-gray-50: #2a2a2a; --ds-gray-100: #323232; --ds-gray-200: #3a3a3a; --ds-gray-300: #454545;
}

html[data-theme="dark"] body { background-color: var(--t-bg); color: var(--t-text); }

/* ============================================================
 * 深色下第三方 / 框架样式覆盖(Bootstrap 5.2 没有自带深色;5.3 才有)
 * ============================================================ */
html[data-theme="dark"] {
  --bs-body-bg: var(--t-bg); --bs-body-color: var(--t-text); --bs-border-color: var(--t-line);
  --bs-secondary-color: var(--t-text-3); --bs-tertiary-bg: var(--t-surface-2); --bs-heading-color: var(--t-text);
}
html[data-theme="dark"] .modal-content, html[data-theme="dark"] .offcanvas, html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .card, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .toast, html[data-theme="dark"] .popover {
  background-color: var(--t-surface); color: var(--t-text); border-color: var(--t-line);
}
html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer, html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer { border-color: var(--t-line); background-color: transparent; }
html[data-theme="dark"] .dropdown-item { color: var(--t-text-2); }
html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--t-surface-3); color: var(--t-text); }
html[data-theme="dark"] .dropdown-divider { border-color: var(--t-line); }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] .input-group-text, html[data-theme="dark"] textarea, html[data-theme="dark"] select,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]) {
  background-color: var(--t-surface-2); color: var(--t-text); border-color: var(--t-line);
}
html[data-theme="dark"] .form-control::placeholder, html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--t-text-4); }
html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: var(--t-surface-2); color: var(--t-text); border-color: var(--t-primary); box-shadow: 0 0 0 3px var(--t-primary-soft); }
html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly] { background-color: var(--t-surface-3); color: var(--t-text-3); }
html[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--t-text); --bs-table-border-color: var(--t-line); --bs-table-striped-bg: var(--t-surface-2); --bs-table-hover-bg: var(--t-surface-2); color: var(--t-text); }
html[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-color: var(--t-line); }
html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .btn-outline-dark { background-color: var(--t-surface-3); color: var(--t-text); border-color: var(--t-line); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(150%); }
html[data-theme="dark"] .pagination .page-link { background-color: var(--t-surface); color: var(--t-text-2); border-color: var(--t-line); }
html[data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--t-primary); border-color: var(--t-primary); color: var(--t-white); }
html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: var(--t-surface) !important; }
html[data-theme="dark"] .text-dark { color: var(--t-text) !important; }
html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: var(--t-text-3) !important; }
html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-start, html[data-theme="dark"] .border-end { border-color: var(--t-line) !important; }
html[data-theme="dark"] hr { border-color: var(--t-line); opacity: 1; }
html[data-theme="dark"] .badge.bg-light, html[data-theme="dark"] .badge.text-bg-light { background-color: var(--t-surface-3) !important; color: var(--t-text-2) !important; }
html[data-theme="dark"] .alert-light, html[data-theme="dark"] .alert-secondary { background-color: var(--t-surface-2); color: var(--t-text-2); border-color: var(--t-line); }
html[data-theme="dark"] .tooltip-inner { background-color: var(--t-ink); color: var(--t-on-ink); }
/* select2 */
html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-selection--multiple, html[data-theme="dark"] .select2-dropdown,
html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--t-surface-2); color: var(--t-text); border-color: var(--t-line); }
html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--t-text); }
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--t-primary); }
html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--t-surface-3); }
/* summernote 编辑器 */
html[data-theme="dark"] .note-editor.note-frame, html[data-theme="dark"] .note-editor .note-toolbar, html[data-theme="dark"] .note-editor .note-statusbar { background-color: var(--t-surface-2); border-color: var(--t-line); color: var(--t-text); }
html[data-theme="dark"] .note-editor .note-editable { background-color: var(--t-surface); color: var(--t-text); }
html[data-theme="dark"] .note-editor .note-btn { background-color: var(--t-surface-3); color: var(--t-text-2); border-color: var(--t-line); }
/* iziToast(站内提示) */
html[data-theme="dark"] .iziToast { background: var(--t-surface); color: var(--t-text); box-shadow: 0 0 8px 2px rgba(0,0,0,.45); }
html[data-theme="dark"] .iziToast > .iziToast-body .iziToast-title, html[data-theme="dark"] .iziToast > .iziToast-body .iziToast-message { color: var(--t-text); }
html[data-theme="dark"] .iziToast > .iziToast-close { color: var(--t-text-3); }
/* 轮播圆点 / 滚动条跟随 color-scheme;图片不做反色 */
html[data-theme="dark"] .owl-theme .owl-dots .owl-dot span { background: var(--t-line-3); }
html[data-theme="dark"] .owl-theme .owl-dots .owl-dot.active span { background: var(--t-primary); }
html[data-theme="dark"] ::selection { background: var(--t-primary); color: var(--t-white); }

/* 站内零散:字面量 hsl / 用户内容内联色 / 组件自带深色调 → 跟全站 */
html[data-theme="dark"] .blog-item__thumb, html[data-theme="dark"] .bl-thumb { background: var(--t-surface-3); }
html[data-theme="dark"] .pd-tab-content { color: var(--t-text-2); }
html[data-theme="dark"] .pd-tab-content [style*="color"] { color: inherit !important; }
html[data-theme="dark"] .pd-tab-content [style*="background"] { background: transparent !important; }
html[data-theme="dark"] body .sm.sm.sm, html[data-theme="dark"] body .so.so.so {   /* 压过组件 scoped 的 [data-theme="dark"] .sm[data-v-…] (0,3,0) 与 :not() 版 (0,4,1) */
  --bg: var(--t-bg); --surface: var(--t-surface); --card: var(--t-surface); --field: var(--t-surface-2); --txt: var(--t-text);
  --ink: var(--t-text); --ink2: var(--t-text-2); --muted: var(--t-text-3); --faint: var(--t-text-4);
  --line: var(--t-line); --line2: var(--t-line-3); --soft: var(--t-surface-2); --chip: var(--t-surface-3);
  --brand: var(--t-primary); --brand-h: var(--t-primary-hover); --brand-soft: var(--t-primary-soft); --brand-border: var(--t-primary-line);
  --ok: var(--t-success-text); --ok-soft: var(--t-success-soft); --warn: var(--t-warning-text); --warn-soft: var(--t-warning-soft); --bad: var(--t-danger-text); --bad-soft: var(--t-danger-soft);
  --sh: none; --sh-md: 0 18px 42px rgba(0,0,0,.5); --sh-raised: 0 2px 6px rgba(0,0,0,.4);
}

/* 个别页:按钮用了「文字档」变量当底色 / 价格盒双色渐变在深色下发闷 → 改平 */
html[data-theme="dark"] .dp-btn { background: var(--t-ink); color: var(--t-on-ink); }
html[data-theme="dark"] .dp-btn:hover { background: var(--t-surface-4); }
html[data-theme="dark"] .product-detail-page .pd-price-block { background: var(--t-surface-2); }

/* 主题模板里带透明度的黑:遮罩要保持黑,阴影要保持黑(--black 已翻成近白,只有这几处不能跟着翻) */
html[data-theme="dark"] .body-overlay, html[data-theme="dark"] .sidebar-overlay { background: rgba(0, 0, 0, .65); }
html[data-theme="dark"] { --header-box-shadow: 0 2px 10px rgba(0, 0, 0, .45); --mobile-box-shadow: 0 2px 12px rgba(0, 0, 0, .6); }

/* 卖家推广页:按钮底色用的页内变量被归到「文字档」(浅蓝) → 深色下按钮用主色填充 */
html[data-theme="dark"] .pm-btn { background: var(--t-primary); border-color: var(--t-primary); }
html[data-theme="dark"] .pm-btn--line { background: var(--t-surface); color: var(--t-primary-text); }

/* 赞助栏:--ad-white 既当卡片底又当品牌色上的白字,按用法归到了底色档 → 标题文字固定白 */
html[data-theme="dark"] .ad-panel__hd { color: var(--t-white); background-color: var(--ad-brand, var(--t-primary)); }   /* 上面 .card-header 透明化会把品牌色条抹掉,这里补回 */

/* 博客正文(作者自己写的内联颜色 / 白底)跟商品描述同样处理 */
html[data-theme="dark"] .art-body { color: var(--t-text-2); }
html[data-theme="dark"] .art-body [style*="color"] { color: inherit !important; }
html[data-theme="dark"] .art-body [style*="background"] { background: transparent !important; }

/* 富文本编辑器里的已存内容(作者内联色)只在显示上中和,保存的 HTML 不变 */
html[data-theme="dark"] .note-editable [style*="color"] { color: inherit !important; }
html[data-theme="dark"] .note-editable [style*="background"] { background: transparent !important; }

/* SEO 落地页的「深色横幅」用的是页内 --xx-dark / --xx-ink(同时也是标题字色,归到了文字档)→ 横幅底固定深灰;实心按钮的 --xx-blue 归到了浅蓝文字档 → 按钮用主色填充 */
html[data-theme="dark"] .st-cta, html[data-theme="dark"] .hub-cta, html[data-theme="dark"] .bm-band, html[data-theme="dark"] .sw-cta { background: var(--t-ink); color: var(--t-white); }
html[data-theme="dark"] .st-btn-solid, html[data-theme="dark"] .hub-btn-solid, html[data-theme="dark"] .bm-btn-solid, html[data-theme="dark"] .sw-btn-solid,
html[data-theme="dark"] .altv2-btn-primary, html[data-theme="dark"] .mc-btn--pri, html[data-theme="dark"] .profile-warning__btn { background: var(--t-primary); border-color: var(--t-primary); color: var(--t-white); }
/* Bootstrap 手风琴(FAQ) */
html[data-theme="dark"] .accordion-item { --bs-accordion-bg: var(--t-surface); --bs-accordion-color: var(--t-text); --bs-accordion-border-color: var(--t-line); --bs-accordion-btn-color: var(--t-text); --bs-accordion-btn-bg: var(--t-surface); --bs-accordion-active-bg: var(--t-surface-2); --bs-accordion-active-color: var(--t-primary-text); background-color: var(--t-surface); color: var(--t-text); border-color: var(--t-line); }
html[data-theme="dark"] .accordion-button { background-color: var(--t-surface); color: var(--t-text); }
html[data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--t-surface-2); color: var(--t-primary-text); box-shadow: none; }
html[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.6); }
html[data-theme="dark"] .accordion-body { color: var(--t-text-2); }
html[data-theme="dark"] .drop-hint { color: var(--t-text-3); }

/* 首页横幅的蓝色斜纹底图 / 页脚(浅色下是深海军蓝)→ 深色下统一中性灰,不再出现蓝调色块 */
html[data-theme="dark"] .banner-section { background: var(--t-bg); }
html[data-theme="dark"] .banner-section-bg-img img { filter: grayscale(1); opacity: .35; }
html[data-theme="dark"] .footer-compact { background: var(--t-surface); color: var(--t-text-3); border-top: 1px solid var(--t-line); }

/* 品牌标识:黑色 / 近黑的 logo(Apple、GitHub、X、TikTok、Amazon)在深底上看不见 → 反相再把色相转回来,
   黑变白、彩色部分(TikTok 青红、Amazon 橙)保持原色系;任何地方用到这些图(分类菜单、分类页、社媒推广)都生效 */
html[data-theme="dark"] img[src*="/brand-icons/apple.svg"], html[data-theme="dark"] img[src*="/brand-icons/github.svg"],
html[data-theme="dark"] img[src*="/brand-icons/x.svg"], html[data-theme="dark"] img[src*="/brand-icons/tiktok.svg"],
html[data-theme="dark"] img[src*="/brand-icons/amazon.svg"] { filter: invert(1) hue-rotate(180deg); }
/* 用字体图标 + 内联近黑品牌色的(社媒推广里的 X / Threads / TikTok) */
html[data-theme="dark"] i[style*="rgb(17, 17, 17)"], html[data-theme="dark"] i[style*="rgb(0, 0, 0)"], html[data-theme="dark"] i[style*="#111"],
html[data-theme="dark"] i[style*="#000"], html[data-theme="dark"] i[style*="rgb(24, 23, 23)"] { color: var(--t-text) !important; }

/* ★ 2026-10-17 用户富文本(商品描述 / 文章 / 公告)里写死的深色字:layouts/app 的小脚本打 data-dm-c 标记,
   深色模式换成可读颜色(灰黑 → 正常字色;彩色 → 同色相调亮的 --dm-c)。浅色模式不受影响 */
html[data-theme="dark"] [data-dm-c] { color: var(--dm-c, var(--t-text)) !important; }