/**
 * 语义色与浅色主题组件 token — 唯一来源
 * Graphite / Finance / Tech 由 html[data-theme] 选择；:root 默认 Graphite
 * Mountain 深色见 theme-mountain.css（在 base.html 中后加载覆写 :root）
 *
 * 配色原则：每主题「中性底 + 同色系边框/文字 + 单一强调色」，避免跨主题复用硬编码蓝。
 */

/* ── Graphite（暖石灰，无明显黄调）── */
:root,
html[data-theme="graphite"] {
  --color-bg-page: #f3f0ec;
  --color-bg-surface: #fcfaf8;
  --color-bg-elevated: #f7f4f0;
  --color-border-subtle: #e8e4de;
  --color-border-strong: #ddd8d0;
  --color-text-primary: #1c1917;
  --color-text-secondary: #57534e;
  --color-text-tertiary: #a8a29e;
  --color-brand: #57534e;
  --color-brand-strong: #292524;
  --color-brand-soft: rgba(87, 83, 78, 0.12);
  --color-state-up: #dc2626;
  --color-state-down: #059669;
  --color-state-warning: #d97706;
  --color-state-danger: #b91c1c;
  --color-overlay: rgba(28, 25, 23, 0.38);
  --nav-glass-bg: color-mix(in srgb, var(--color-bg-page) 94%, transparent);
  --nav-border: rgba(120, 113, 108, 0.2);
  --nav-icon-muted: #a8a29e;
  --menu-hover-bg: #ede9e3;

  --strategy-long-bg: #faf9f7;
  --strategy-long-border: #a8a29e;
  --strategy-hint-color: #44403c;
  --strategy-hint-bg: #faf9f7;
  --strategy-hint-border: #e5e1db;
  --hf-banner-info-bg: #faf9f7;
  --hf-banner-info-border: #e5e1db;
  --hf-banner-info-text: #44403c;
  --hf-table-row-highlight: #f8f6f2;
}

/* ── Finance（冷蓝灰底 + 专业蓝强调）── */
html[data-theme="finance"] {
  --color-bg-page: #e4ecfb;
  --color-bg-surface: #f3f7ff;
  --color-bg-elevated: #eaf0fc;
  --color-border-subtle: #cdd9ed;
  --color-border-strong: #b4c5e3;
  --color-text-primary: #0b1a3a;
  --color-text-secondary: #3d5282;
  --color-text-tertiary: #5a729e;
  --color-brand: #1d5cf0;
  --color-brand-strong: #1748c9;
  --color-brand-soft: rgba(29, 92, 240, 0.14);
  --color-state-up: #dc2626;
  --color-state-down: #059669;
  --color-state-warning: #d97706;
  --color-state-danger: #b91c1c;
  --color-overlay: rgba(11, 26, 58, 0.38);
  --nav-glass-bg: color-mix(in srgb, var(--color-bg-page) 94%, transparent);
  --nav-border: rgba(29, 92, 240, 0.22);
  --nav-icon-muted: #5a729e;
  --menu-hover-bg: color-mix(in srgb, var(--color-brand-soft) 62%, var(--color-bg-elevated));

  --strategy-long-bg: #f0f5ff;
  --strategy-long-border: #4d8ef5;
  --strategy-hint-color: #1748c9;
  --strategy-hint-bg: #f0f5ff;
  --strategy-hint-border: #c5d9fc;
  --hf-banner-info-bg: #f0f5ff;
  --hf-banner-info-border: #c5d9fc;
  --hf-banner-info-text: #1748c9;
  --hf-table-row-highlight: #f0f5ff;
}

/* ── Tech（青灰底 + 深海青绿强调）── */
html[data-theme="tech"] {
  --color-bg-page: #edf5f3;
  --color-bg-surface: #f9fcfb;
  --color-bg-elevated: #f2f8f6;
  --color-border-subtle: #d5e8e2;
  --color-border-strong: #b8d4cc;
  --color-text-primary: #0f2828;
  --color-text-secondary: #3d5553;
  --color-text-tertiary: #6b8682;
  --color-brand: #0d9488;
  --color-brand-strong: #0f766e;
  --color-brand-soft: rgba(13, 148, 136, 0.12);
  --color-state-up: #dc2626;
  --color-state-down: #059669;
  --color-state-warning: #d97706;
  --color-state-danger: #b91c1c;
  --color-overlay: rgba(15, 40, 40, 0.38);
  --nav-glass-bg: color-mix(in srgb, var(--color-bg-page) 94%, transparent);
  --nav-border: rgba(13, 148, 136, 0.22);
  --nav-icon-muted: #6b8682;
  --menu-hover-bg: color-mix(in srgb, var(--color-brand-soft) 50%, var(--color-bg-elevated));

  --strategy-long-bg: #f2fdf9;
  --strategy-long-border: #2dd4bf;
  --strategy-hint-color: #0f766e;
  --strategy-hint-bg: #f2fdf9;
  --strategy-hint-border: #b8f0e3;
  --hf-banner-info-bg: #f2fdf9;
  --hf-banner-info-border: #b8f0e3;
  --hf-banner-info-text: #0f766e;
  --hf-table-row-highlight: #f2fdf9;
}

/* ── 浅色主题共享组件（Mountain 由 theme-mountain.css 覆写 :root）── */
:root,
html[data-theme="graphite"],
html[data-theme="finance"],
html[data-theme="tech"] {
  color-scheme: light;
  --nav-active-glow: color-mix(in srgb, var(--color-brand) 22%, transparent);
  --nav-active-bg: color-mix(in srgb, var(--color-brand-soft) 72%, transparent);
  --nav-active-border: color-mix(in srgb, var(--color-brand) 20%, transparent);
  --nav-active-dot-shadow: color-mix(in srgb, var(--color-brand) 34%, transparent);

  --card-bg: linear-gradient(180deg, var(--color-bg-surface) 0%, var(--color-bg-page) 100%);
  --card-border: var(--color-border-subtle);
  --card-shadow: var(--shadow-xs), var(--shadow-md);
  --table-head-bg: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-border-subtle) 100%);
  --table-row-bg: var(--color-bg-surface);
  --table-row-alt-bg: var(--color-bg-elevated);
  --table-row-hover-bg: var(--menu-hover-bg);
  --tab-track-bg: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-border-subtle) 100%);
  --tab-active-bg: var(--color-bg-surface);
  --tab-text: var(--color-text-secondary);
  --tab-text-active: var(--color-text-primary);
  --more-menu-sheet-bg: color-mix(in srgb, var(--color-bg-surface) 96%, transparent);
  --more-menu-sheet-shadow: 0 -12px 36px color-mix(in srgb, var(--color-text-primary) 8%, transparent);

  --settings-input-bg: var(--color-bg-surface);
  --settings-input-border: var(--color-border-strong);
  --settings-input-text: var(--color-text-primary);
  --settings-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 18%, transparent);
  --settings-card-h2-border: var(--color-border-subtle);
  --settings-tabs-bg: var(--color-bg-elevated);
  --settings-tabs-border: var(--color-border-subtle);
  --settings-tab-hover-bg: var(--menu-hover-bg);
  --settings-tab-active-bg: var(--color-bg-elevated);
  --strategy-topbar-bg: var(--color-bg-surface);
  --strategy-topbar-border: var(--color-border-subtle);
  --strategy-select-border: var(--color-border-strong);
  --btn-logout-bg: var(--color-bg-surface);
  --btn-logout-border: var(--color-border-subtle);
  --btn-logout-hover-bg: #fef2f2;
  --btn-logout-hover-text: #dc2626;
  --btn-logout-hover-border: #fecaca;

  --hf-stat-bg: var(--color-bg-elevated);
  --hf-table-bg: var(--color-bg-surface);
  --hf-table-cell-border: var(--color-border-subtle);
  --hf-table-head-bg: var(--color-bg-elevated);
  --industry-panel-bg: var(--color-bg-surface);
  --industry-panel-border: var(--color-border-strong);
  --industry-tools-bg: var(--color-bg-elevated);
  --industry-tools-border: var(--color-border-strong);
}

/* ── Finance / Tech 品牌色 accent（须在共享块之后）── */
html[data-theme="finance"] {
  --card-shadow: 0 1px 2px rgba(11, 26, 58, 0.05), 0 12px 28px rgba(29, 92, 240, 0.1);
  --table-head-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-brand) 10%, var(--color-bg-elevated)) 0%,
    color-mix(in srgb, var(--color-brand) 7%, var(--color-border-subtle)) 100%
  );
  --tab-track-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-brand) 9%, var(--color-bg-elevated)) 0%,
    color-mix(in srgb, var(--color-brand) 6%, var(--color-border-subtle)) 100%
  );
}

html[data-theme="tech"] {
  --card-shadow: 0 1px 2px rgba(15, 40, 40, 0.04), 0 12px 28px rgba(13, 148, 136, 0.08);
  --table-head-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-brand) 8%, var(--color-bg-elevated)) 0%,
    color-mix(in srgb, var(--color-brand) 5%, var(--color-border-subtle)) 100%
  );
  --tab-track-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-brand) 7%, var(--color-bg-elevated)) 0%,
    color-mix(in srgb, var(--color-brand) 4%, var(--color-border-subtle)) 100%
  );
}

html[data-theme="graphite"] {
  --card-shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 12px 28px rgba(87, 83, 78, 0.06);
  --table-head-bg: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-brand) 5%, var(--color-bg-elevated)) 0%,
    color-mix(in srgb, var(--color-brand) 3%, var(--color-border-subtle)) 100%
  );
}