/* ============================================================
   themes.css — 四套视觉主题 (Teal / Panel / Terminal / Vibrants)
   通过 [data-theme] 覆盖 :root 中的 DESIGN.md 变量
   Teal 为默认值（已在各 HTML :root 中定义），此处只需定义 Panel / Terminal / Vibrants
   ============================================================ */

/* ─── PANEL THEME ─── */
[data-theme="panel"] {
  --color-canvas-porcelain: #e5e7eb;
  --color-white: #ffffff;
  --color-midnight-ink: #000000;
  --color-harbor-mist: #575c75;
  --color-forest-canopy: #000000;
  --color-deep-teal: #f43325;
  --color-fresh-teal: #0078a8;
  --gradient-fresh-teal: linear-gradient(90deg, rgb(0, 120, 168), rgb(244, 51, 37) 48.5%, rgb(87, 92, 117));
  --color-muted-sage: #bbbbbb;
  --color-soft-peach: #e5e7eb;
  --color-muted-mandarin: #d1d5db;
  --color-sky-haze: #a3a3a3;
  --color-lime-glow: #f43325;
  --color-spring-bud: #0078a8;

  --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: Georgia, Cambria, 'Times New Roman', Times, serif;

  --radius-navigation: 4px;
  --radius-cards: 127.397px;
  --radius-badges: 9999px;
  --radius-buttons: 270.89px;

  --border-subtle: rgba(0, 0, 0, 0.15);
  --border-strong: rgba(0, 0, 0, 0.28);
  --red: #f43325;
  --overlay-bg: rgba(0, 0, 0, 0.85);
  --body-grid: linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  --body-grid-size: 40px 40px;

  /* dtbp-design.css 令牌覆盖 */
  --bg: #e5e7eb;
  --bg-card: #ffffff;
  --bg-surface: #f0f2f5;
  --bg-subtle: #e8eaed;
  --line: rgba(0,0,0,.12);
  --line-md: rgba(0,0,0,.20);
  --line-dark: rgba(0,0,0,.30);
  --tx: #000000;
  --tx-mid: #575c75;
  --tx-dim: #8a8a8a;
  --tx-faint: #bbbbbb;
  --accent: #f43325;
  --accent-d: rgba(244,51,37,.10);
  --accent-b: rgba(244,51,37,.28);
  --accent-hv: #d62d20;
  --blue: #0078a8;  --blue-d: rgba(0,120,168,.10);   --blue-b: rgba(0,120,168,.28);
  --teal: #0891b2;   --teal-d: rgba(8,145,178,.10);  --teal-b: rgba(8,145,178,.28);
  --green: #16a34a;  --green-d: rgba(22,163,74,.10);  --green-b: rgba(22,163,74,.28);
  --amber: #d97706;  --amber-d: rgba(217,119,6,.10);  --amber-b: rgba(217,119,6,.28);
  --purple: #7c3aed; --purple-d: rgba(124,58,237,.10);--purple-b: rgba(124,58,237,.28);
  --gray: #64748b;   --gray-d: rgba(100,116,139,.10); --gray-b: rgba(100,116,139,.28);
  --font-display: ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  --shadow: 0 1px 4px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.14), 0 8px 28px rgba(0,0,0,.10);
  --shadow-hv: 0 6px 20px rgba(0,0,0,.16), 0 12px 36px rgba(0,0,0,.12);
  --r-sm: 4px;
  --r: 6px;
  --r-md: 8px;
}

/* ─── TERMINAL THEME ─── */
[data-theme="terminal"] {
  --color-canvas-porcelain: #101011;
  --color-white: #313131;
  --color-midnight-ink: #ffffff;
  --color-harbor-mist: #8a8a8a;
  --color-forest-canopy: #000000;
  --color-deep-teal: #ffffff;
  --color-fresh-teal: #32A4C3;
  --gradient-fresh-teal: linear-gradient(90deg, rgb(50, 164, 195), rgb(187, 187, 187) 48.5%, rgb(49, 49, 49));
  --color-muted-sage: #717172;
  --color-soft-peach: #313131;
  --color-muted-mandarin: #717172;
  --color-sky-haze: #555556;
  --color-lime-glow: #32A4C3;
  --color-spring-bud: #bbbbbb;

  --font-ui: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-serif: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius-navigation: 0px;
  --radius-cards: 0px;
  --radius-badges: 0px;
  --radius-buttons: 0px;

  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.25);
  --red: #f87171;
  --overlay-bg: rgba(0, 0, 0, 0.92);
  --body-grid: none;
  --body-grid-size: 0;

  /* dtbp-design.css 令牌覆盖 */
  --bg: #101011;
  --bg-card: #313131;
  --bg-surface: #1a1a1c;
  --bg-subtle: #242426;
  --line: rgba(255,255,255,.10);
  --line-md: rgba(255,255,255,.18);
  --line-dark: rgba(255,255,255,.28);
  --tx: #ffffff;
  --tx-mid: #8a8a8a;
  --tx-dim: #717172;
  --tx-faint: #555556;
  --accent: #32A4C3;
  --accent-d: rgba(50,164,195,.10);
  --accent-b: rgba(50,164,195,.28);
  --accent-hv: #2b8ca8;
  --blue: #32A4C3;   --blue-d: rgba(50,164,195,.10);  --blue-b: rgba(50,164,195,.28);
  --teal: #32A4C3;   --teal-d: rgba(50,164,195,.10);  --teal-b: rgba(50,164,195,.28);
  --green: #34d399;  --green-d: rgba(52,211,153,.10);  --green-b: rgba(52,211,153,.28);
  --amber: #fbbf24;  --amber-d: rgba(251,191,36,.10);  --amber-b: rgba(251,191,36,.28);
  --purple: #a78bfa; --purple-d: rgba(167,139,250,.10);--purple-b: rgba(167,139,250,.28);
  --gray: #717172;   --gray-d: rgba(113,113,114,.10);  --gray-b: rgba(113,113,114,.28);
  --font-display: 'IBM Plex Mono', ui-monospace, monospace;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, monospace;
  --shadow-sm: none;
  --shadow: none;
  --shadow-md: none;
  --shadow-hv: none;
  --r-sm: 0px;
  --r: 0px;
  --r-md: 0px;
}

/* ─── TEAL — 仅定义 Teal 特有的辅助变量，主色值已在各 HTML :root 中 ─── */
[data-theme="teal"] {
  --overlay-bg: rgba(1, 38, 32, 0.88);
  --body-grid: linear-gradient(rgba(15, 22, 30, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 22, 30, 0.04) 1px, transparent 1px);
  --body-grid-size: 48px 48px;
}

/* ─── VIBRANTS THEME ─── */
/* 基于 DESIGN3.md — 白色画布 + 森林绿活力强调色 */
[data-theme="vibrants"] {
  --color-canvas-porcelain: #ffffff;
  --color-white: #f2f6ff;
  --color-midnight-ink: #021422;
  --color-harbor-mist: #808f9c;
  --color-forest-canopy: #001f38;
  --color-deep-teal: #00852e;
  --color-fresh-teal: #91c3ff;
  --gradient-fresh-teal: linear-gradient(90deg, rgb(0, 133, 46), rgb(145, 195, 255) 48.5%, rgb(255, 185, 49));
  --color-muted-sage: #6a7c89;
  --color-soft-peach: #f2f6ff;
  --color-muted-mandarin: #e6e8e9;
  --color-sky-haze: #ccd2d7;
  --color-lime-glow: #ffb931;
  --color-spring-bud: #00852e;

  --font-ui: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: Georgia, Cambria, 'Times New Roman', Times, serif;

  --radius-navigation: 8px;
  --radius-cards: 8px;
  --radius-badges: 3px;
  --radius-buttons: 8px;

  --border-subtle: rgba(2, 20, 34, 0.10);
  --border-strong: rgba(2, 20, 34, 0.20);
  --red: #d32f2f; --red2: #e53935;
  --teal: #00852e;
  --blue: #91c3ff; --gold: #ffb931;
  --up: #00852e; --dn: #d32f2f;

  --overlay-bg: rgba(0, 20, 56, 0.85);
  --body-grid: linear-gradient(rgba(2, 20, 34, 0.04) 1px, transparent 1px);
  --body-grid-size: 40px 40px;

  /* dtbp tokens */
  --bg: #ffffff;
  --bg-card: #f2f6ff;
  --bg-surface: #f2f6ff;
  --bg-subtle: #e6e8e9;
  --line: rgba(2,20,34,.10);
  --line-md: rgba(2,20,34,.18);
  --line-dark: rgba(2,20,34,.28);
  --tx: #021422;
  --tx-mid: #808f9c;
  --tx-dim: #6a7c89;
  --tx-faint: #ccd2d7;
  --accent: #00852e;
  --accent-d: rgba(0,133,46,.10);
  --accent-b: rgba(0,133,46,.28);
  --accent-hv: #006b24;
  --blue: #91c3ff;  --blue-d: rgba(145,195,255,.10);   --blue-b: rgba(145,195,255,.28);
  --teal: #00852e;   --teal-d: rgba(0,133,46,.10);  --teal-b: rgba(0,133,46,.28);
  --green: #00852e;  --green-d: rgba(0,133,46,.10);  --green-b: rgba(0,133,46,.28);
  --amber: #ffb931;  --amber-d: rgba(255,185,49,.10);  --amber-b: rgba(255,185,49,.28);
  --purple: #7c3aed; --purple-d: rgba(124,58,237,.10);--purple-b: rgba(124,58,237,.28);
  --gray: #808f9c;   --gray-d: rgba(128,143,156,.10); --gray-b: rgba(128,143,156,.28);
  --font-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow: 0 1px 4px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --shadow-hv: 0 6px 20px rgba(0,0,0,.12);
  --r-sm: 4px;
  --r: 6px;
  --r-md: 8px;
}

/* ════════════════════════════════════════════════
   功能说明-晾晒排名.html — Terminal 主题修复
   该页面 --ink/--ink2 映射到 --color-deep-teal/--color-midnight-ink，
   Terminal 下均解析为 #ffffff → 白底白字不可见
   ════════════════════════════════════════════════ */

/* 结构性背景：ink/ink2 在 Terminal 变成白色，强制改用黑色 */
[data-theme="terminal"] #topbar,
[data-theme="terminal"] #dnav,
[data-theme="terminal"] .hero,
[data-theme="terminal"] .fhero,
[data-theme="terminal"] .tbl th,
[data-theme="terminal"] .rt th,
[data-theme="terminal"] .mhd,
[data-theme="terminal"] .rchd.c1,
[data-theme="terminal"] .fi,
[data-theme="terminal"] .dbg,
[data-theme="terminal"] .dbtn:hover,
[data-theme="terminal"] .fex {
  background: #000000;
}

/* 硬编码浅色背景 → Terminal 深色 */
[data-theme="terminal"] .tbl tr:nth-child(even) td {
  background: #1a1a1c;
}
[data-theme="terminal"] .bt {
  background: #2a2a2a;
}
[data-theme="terminal"] .fchd {
  background: #1a1a1c;
  border-bottom-color: rgba(255,255,255,.08);
}
[data-theme="terminal"] .fnote {
  background: #1a1a1c;
}
[data-theme="terminal"] .mt th {
  background: #242426;
  color: var(--tx-mid);
  border-bottom-color: rgba(255,255,255,.18);
}
[data-theme="terminal"] .rt tr:hover td {
  background: rgba(255,255,255,.04);
}

/* 标签深色化 */
[data-theme="terminal"] .tu {
  background: rgba(52,211,153,.12);
  color: #34d399;
}
[data-theme="terminal"] .td {
  background: rgba(248,113,113,.12);
  color: #f87171;
}
[data-theme="terminal"] .tb2 {
  background: rgba(50,164,195,.12);
  color: #32A4C3;
}
[data-theme="terminal"] .tg {
  background: rgba(251,191,36,.12);
  color: #fbbf24;
}
[data-theme="terminal"] .tgy {
  background: rgba(255,255,255,.06);
  color: var(--tx-dim);
}

/* 信息框深色化 */
[data-theme="terminal"] .ib-b {
  background: rgba(50,164,195,.08);
  border-left-color: #32A4C3;
  color: var(--tx-mid);
}
[data-theme="terminal"] .ib-g {
  background: rgba(251,191,36,.08);
  border-left-color: #fbbf24;
  color: #d4a020;
}
[data-theme="terminal"] .ib-t {
  background: rgba(52,211,153,.08);
  border-left-color: #34d399;
  color: #34d399;
}

/* 卡片角色头 */
[data-theme="terminal"] .rchd.c2 {
  background: #1a4878;
}
[data-theme="terminal"] .rchd.c3 {
  background: #065f46;
}

/* 文字色修正 */
[data-theme="terminal"] .fd.u {
  color: #34d399;
}

/* 图表条形 Terminal 色 */
[data-theme="terminal"] .bf.gd {
  background: linear-gradient(90deg, #059669, #28a090);
}

/* 导航高亮 */
[data-theme="terminal"] .di.on {
  background: rgba(244,51,37,.2);
}

/* Modal 遮罩 */
[data-theme="terminal"] .ov {
  background: rgba(0,0,0,.7);
}

/* ════════════════════════════════════════════════
   功能说明-商机推进.html — 主题修复
   新加的 NPI 特性 / NRE 预算区域包含硬编码浅色值
   ════════════════════════════════════════════════ */

/* ── Terminal ── */
[data-theme="terminal"] {
  --moulding-bg: #1a1a2e;
  --moulding-border: #5b52cc;
  --moulding-text: #b8b0f0;
  --commodity-bg: #2a2010;
  --commodity-border: #d4a040;
  --commodity-text: #e8c878;
  --risk-bg: #2a1010;
  --risk-border: #e05050;
  --risk-text: #f08080;
}
[data-theme="terminal"] .npi-label {
  background: #1a1a2e;
  border-color: #5b52cc;
  color: #b8b0f0;
}
[data-theme="terminal"] .npi-cost-hi {
  background: rgba(240,128,128,.15);
  color: #f08080;
}
[data-theme="terminal"] .npi-cost-md {
  background: rgba(218,165,32,.15);
  color: #daa520;
}
[data-theme="terminal"] .npi-cost-lo {
  background: rgba(144,238,144,.15);
  color: #90ee90;
}

/* ── Panel ── */
[data-theme="panel"] {
  --moulding-bg: #eef2ff;
  --moulding-border: #4338ca;
  --moulding-text: #3730a3;
  --commodity-bg: #fffbeb;
  --commodity-border: #b45309;
  --commodity-text: #78350f;
  --risk-bg: #fef2f2;
  --risk-border: #dc2626;
  --risk-text: #991b1b;
}
[data-theme="panel"] .npi-label {
  background: #dbeafe;
  border-color: #3b82f6;
  color: #1e3a5f;
}

/* ── Vibrants ── */
[data-theme="vibrants"] {
  --moulding-bg: #eef2ff;
  --moulding-border: #4f46e5;
  --moulding-text: #312e81;
  --commodity-bg: #fffbeb;
  --commodity-border: #b45309;
  --commodity-text: #78350f;
  --risk-bg: #fef2f2;
  --risk-border: #dc2626;
  --risk-text: #991b1b;
}