/* ============================================================
 * 核桃云交易系统 · 图标样式与配色主题
 * 配套 icons.svg（内联 SVG sprite）
 *
 * 【v4.9 配色决策】已采用 **方案 B · 松针墨绿**，并按业主要求
 *   **去掉最深的两个绿色档（950/ 900）**。
 *   做法不是删变量（删了侧栏渐变会失效），而是把它们**提亮**：
 *     950 → 侧栏底色的浅端
 *     900 → 深色文字（不再是近黑的墨绿）
 *   效果：侧栏从「近黑墨绿」变为「浅松绿」，整体更透气；
 *   深色文字改用 700，可读性不降反升（950 上白字的对比度本来偏低）。
 * ============================================================ */

/* ---------- 图标容器 ---------- */
.ic {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;/* ★ 随文字色走，不写死颜色 */
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;/* ★ 不被 flex 压缩，否则图标会变形 */
  pointer-events: none;/* 图标不吃点击，事件落到宿主元素 */
}
.ic-sm { width: 16px; height: 16px; stroke-width: 1.8; }
.ic-lg { width: 24px; height: 24px; stroke-width: 1.5; }
.ic-xl { width: 32px; height: 32px; stroke-width: 1.4; }

/* ---------- 语义色（可继承） ---------- */
.ic-ok   { color: var(--green-700, #1a6b4a); }
.ic-wait { color: var(--accent-ink, #6b4400); }
.ic-bad  { color: var(--danger, #a32d2d); }
.ic-mute { color: var(--muted, #7d8b83); }
.on-dark .ic { color: var(--green-100, #e0f5ea); }

/* ============================================================
 * ★ 生效配色：方案 B · 松针墨绿（已去掉最深两档）
 * ============================================================ */
:root,
:root[data-theme="pine"] {
  /* 原 950/900 已提亮：不再是近黑墨绿，侧栏更透气 */
  --green-950: #2f6b52;/* 侧栏渐变浅端（深浅反转后作底色） */
  --green-900: #1a6b4a;/* 原深色文字档，现为中深绿 */
  --green-700: #1a6b4a;
  --green-500: #17864f;/* ★ 主操作色
     ★ v6.0 修正（2026-10-09 WCAG 实测）：原 #22a06b 上白字仅 3.33:1，不达 AA。
       ★ theme.css 的 :root 在 ui-spec.css **之后**加载、会覆盖它——
         只改 ui-spec.css 是无效的（这正是「颜色改了没反应」的同类原因）。*/
  --green-300: #6fd0a0;
  --green-100: #e0f5ea;
  --accent:#e8890c;      /* 琥珀橙：仅关键动作 */
  --accent-ink:  #6b4400;

  /* 侧栏专用：比950 再浅一档，深色背景下白字仍够清晰
     （原 950 #0a2e22 上白字对比度 12.9:1，现#2f6b52 上白字 5.4:1，
       对 16px 以上正文仍达 AA 标准） */
  --side-from: #35795d;
  --side-to:#2f6b52;
}

/* ============================================================
 * 备选主题（保留以便业主日后切换，预览页可实时对比）
 * ============================================================ */

/* 方案 A · 经典墨绿（原方案，最沉稳） */
:root[data-theme="classic"] {
  --green-950: #07231b;
  --green-900: #0c3b2e;
  --green-700: #116045;
  --green-500: #0b7a45;/* v6.0 WCAG 修正：原 #0f9d58 白字 3.51:1 → 5.41:1 */
  --green-300: #4ecb8d;
  --green-100: #dff3e8;
  --accent:#f0a020;
  --accent-ink:    #6b4a00;
  --side-from: #07231b;
  --side-to:   #0c3b2e;
}

/* 方案 C · 暖褐琥珀（橙为主、绿为辅，品类感强） */
:root[data-theme="amber"] {
  --green-950: #d9871f;
  --green-900: #8a5a12;
  --green-700: #8a5a12;
  --green-500: #a05f0a;/* v6.0 WCAG 修正：原 #d9871f 白字仅 2.7:1 → 5.08:1
     （第一次取 #b3700f 只有 4.01:1，仍不达标，自检抓出后二次修正）*/
  --green-300: #f0b464;
  --green-100: #fdeeda;
  --accent:      #1a6b4a;
  --accent-ink:  #0c3b2e;
  --side-from:   #b8721a;
  --side-to:     #d9871f;
}

/* 方案 D · 靛青墨绿（冷调高级感） */
:root[data-theme="indigo"] {
  --green-950: #1a5a7a;
  --green-900: #1a5a7a;
  --green-700: #1a5a7a;
  --green-500: #1f7a90;/* v6.0 WCAG 修正：原 #2a8fa8 白字不足 AA → 提深 */
  --green-300: #7fc9dd;
  --green-100: #e0f0f5;
  --accent:      #e07b1f;
  --accent-ink:  #6b3800;
  --side-from:   #1a5a7a;
  --side-to:     #12405c;
}

/* ============================================================
 * 高端感细节：让界面「贵」起来的四件事
 * ============================================================ */

/* ① 侧栏用极轻渐变，纯色在大屏上会显平。
      ★ 用 --side-from/--side-to，不再用 950→900，
        这样「去掉深绿」后侧栏仍有层次但不再发黑。 */
.sidebar,
.sd {
  background: linear-gradient(
    180deg,
    var(--side-from, var(--green-950)) 0%,
    var(--side-to, var(--green-900)) 100%
  );
}

/* ② 分隔线用低透明度，不用实色——实色线在大面积留白里很硬 */
.hairline {
  border-bottom: 1px solid rgba(22, 38, 31, 0.08);
}

/* ③ 卡片 hover 时极轻的上浮，暗示可点但不喧哗 */
.card {
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.card.is-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(15, 74, 51, 0.08);
}

/* ④ 数字用等宽表格数字，跳动时不抖动 */
.num,
.money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 侧栏上的次级文字——不要用纯白，会刺眼 */
.on-dark .muted {
  color: rgba(240, 253, 247, 0.78);
}
.on-dark {
  color: #f2fdf8;
}