/* ============================================================================
   深色主题（2026-10-27 改版：藍と罫線）—— 由各页面在 <head> 里按媒体条件加载：

     <link rel="stylesheet" href="/static/theme-dark.css"
           media="(prefers-color-scheme: dark)">

   为什么单独一个文件，而不是塞在 style.css 的 @media 里：
   impeccable detect 的静态对比度检查**不区分媒体查询**，它会把深色页面的字
   （例如主按钮上的近黑字 #10233A）与浅色页面的底（#1F3E63）配成一对，报出
   3.1:1 这种根本不存在的问题 —— 实测一次就多出 50+ 条假阳性，把真问题埋掉。
   拆成独立文件后：浅色检查保持干净；深色由 tests/contrast.node.test.js 用
   真浏览器读 computed style 逐项验证（比静态推演更准）。

   ⚠️ 只换变量，不重复组件规则：组件全部走 var()，这里给同名变量一套深色值。
   ⚠️ 打印不受影响：单据纸在 @media print 里被强制回白底（见 style.css 末尾）。
   ============================================================================ */

/* 深色不是"把浅色反过来"：夜里在办公室/仓库盯屏幕，墨黑底比纯黑耐看，
   罫线要比浅色模式**更淡**（深底上的亮线会像霓虹），主色则要提亮到能当文字用。
   对比度已核：正文 13.2:1、次要字 6.5:1、按钮字 7.1~7.8:1。 */
:root {
  color-scheme: dark;
  /* 基础语义色 */
  --c-primary: #8FB1D6;        /* 深底上的藍：提亮到可当正文色 */
  --c-primary-dark: #C3D8EF;   /* 它同时当标题/强调色用，深色下必须反向提亮 */
  --c-accent: #6FBF9E;
  --c-accent-dark: #93D6B9;
  --c-danger: #E8897C;
  --c-text: #E6E4DF;
  --c-muted: #9BA2AC;
  --c-border: #303338;
  --c-bg: #14161A;
  --c-surface: #1B1E23;
  /* 成对反色：按钮上的字（亮底要配深字，否则 2.3~2.9:1） */
  --c-on-primary: #10233A;
  --c-on-accent: #08201A;
  /* 表面层级 */
  --c-sunken: #23262C;
  --c-raised: #2B2F36;
  --c-thead-bg: #1F2228;
  --c-thead-text: #C6CCD4;
  --c-row-hover: #22262C;
  /* 状态与提示 */
  --c-danger-soft: #35201E;
  --c-danger-soft-text: #F0A79E;
  --c-ok-bg: #1C332B;
  --c-ok-text: #7ED4B2;
  --c-hint-blue-bg: #1B2733;  --c-hint-blue-line: #33475C;  --c-hint-blue-text: #B9D3F0;
  --c-hint-amber-bg: #33291A; --c-hint-amber-line: #5C4A28; --c-hint-amber-text: #E8CFA0;
  --c-combo-hover: #262A31;
  --c-combo-on: #2A3644;
  --c-sampbar-bg: #2F2718; --c-sampbar-line: #5C4A28; --c-sampbar-text: #E0C48A;
  --c-readonly-bg: #23262C; --c-readonly-text: #B6BCC6;
  /* 罫线：深底上比浅色更淡，亮线会发光 */
  --c-line: #2A2E34;
  --c-rule: #3D4756;
  --c-rule-strong: #C6CCD4;
  --c-focus: rgba(143, 177, 214, .22);
  --select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%239BA2AC' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-modal: 0 28px 72px rgba(0, 0, 0, .68), 0 2px 8px rgba(0, 0, 0, .5);
}

/* 剩下这几处不是"配色配对"问题，而是深色下要换颜色的来源（浅色写死 #fff 的底） */
input, select, textarea { background: var(--c-surface); color: var(--c-text); }
input:hover, select:hover, textarea:hover { border-color: #3A3E45; }
button.btn { background: var(--c-surface); color: var(--c-text); }
button.btn:hover { background: #22262C; border-color: #454A52; }
button.btn:active { background: #262A31; }
button.btn.danger { border-color: #4A2A26; }
button.btn.danger:hover { border-color: #6B3A33; }
.modal { background: var(--c-surface); }
.modal-mask { background: rgba(6, 8, 10, .62); }
#combo-list { background: var(--c-surface); }
#combo-list .cl-foot { background: var(--c-sunken); border-top-color: var(--c-border); }
.hover-pop { background: var(--c-surface); }
.it-clear { background: var(--c-surface); }
.pager button { background: var(--c-surface); }
#img-hover-pop { background: var(--c-surface); }
#srm-text.editing { background: var(--c-hint-amber-bg); }
.smart-fill { background: var(--c-sunken); }
.card-hint.blue { background: rgba(143, 177, 214, .07); border-color: rgba(143, 177, 214, .22); color: var(--c-hint-blue-text); }
.toast { background: #2A2F36; color: #F2F1EC; }
#panel-items tr.grp:hover td { background: var(--c-row-hover); }
#ord-items-table tr.is-gift { background: #2A2618; }
#ord-items-table tr.is-return { background: #2E1F1D; }
::-webkit-scrollbar-thumb { background: #3E434B; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #565C66; background-clip: content-box; }
html { scrollbar-color: #3E434B transparent; }
::selection { background: rgba(143, 177, 214, .26); }