/* dark-mode.css — 共用 dark mode（系統偵測） */

@media (prefers-color-scheme: dark) {
  /* Body 基底 — 深色 */
  body {
    background: #0d1117 !important;
    color: #e6e6e6 !important;
  }
  body.container,
  .container { color: inherit; }

  /* 大區塊背景 */
  body, html { background-color: #0d1117 !important; }

  /* 卡片 / panel / form / details 等白底元素 → 深灰 */
  form, .panel, .lead, .card, details, .industries-chart,
  .controls, .field input, .field select, .field textarea,
  .search-box, .search-box input,
  .quote-result, .download-bar, table {
    background: #1e242c !important;
    color: #e6e6e6 !important;
    border-color: #3a4250 !important;
  }

  /* Welcome / Intro / Legal / Tldr 等彩色帶 — 降低亮度但保留色彩 */
  .intro, .welcome, .legal, .cta, .tldr {
    background: #2a2519 !important;
    color: #ddc99a !important;
  }
  .intro strong, .welcome h2 { color: #ffb84d !important; }

  /* Search box 容器 */
  .search-box { background: #0d1117 !important; }

  /* Tier (報價) */
  .tier { background: #1e242c !important; }

  /* h1/h2/h3 顏色微調 */
  h1, header h1 { color: #4da6ff !important; }
  h2 { color: #80bfff !important; }
  h3 { color: #cccccc !important; }
  header p { color: #aaa !important; }

  /* Tags / chips */
  .feature-tag { background: #1a3858 !important; color: #99c5ff !important; }
  .tag { background: #2a3340 !important; color: #ccc !important; border-color: #4a5564 !important; }
  .tag.active { background: #2563eb !important; color: white !important; border-color: #2563eb !important; }

  /* Tag badges in lead-pack */
  .tag-industry { background: #1a3530 !important; color: #6ee7b7 !important; }
  .tag-category { background: #3d2f0e !important; color: #fde68a !important; }
  .tag-source { background: #1a2d3b !important; color: #93c5fd !important; }
  .tag-wtp-high { background: #1a3530 !important; color: #6ee7b7 !important; }
  .tag-wtp-medium { background: #1a2d3b !important; color: #93c5fd !important; }
  .lead-tag { border: 1px solid transparent !important; }

  /* Level badges in FAQ */
  .level-1 { background: #1a3530 !important; color: #86efac !important; }
  .level-2 { background: #3d2f0e !important; color: #fde68a !important; }
  .level-3 { background: #3d1f1f !important; color: #fca5a5 !important; }

  /* Result panels in token calc / quote */
  .result { background: #1e242c !important; border-color: #3a4250 !important; }
  .result.win { background: #1a2e1f !important; border-color: #06c755 !important; }
  .result.lose { background: #2e1a1a !important; border-color: #e53e3e !important; }
  .verdict { background: #1e242c !important; }
  .verdict-tips { background: #0d1117 !important; }
  .verdict.win h2 { color: #4ade80 !important; }
  .verdict.lose h2 { color: #f87171 !important; }
  .verdict.neutral h2 { color: #4da6ff !important; }
  .redline { background: #2e1a1a !important; }
  .warning { background: #2a2519 !important; }

  /* Code / pre — 反差 */
  code {
    background: #2d2d2d !important;
    color: #ffa07a !important;
  }
  pre {
    background: #0d1117 !important;
    color: #e6e6e6 !important;
  }

  /* Source attribution box */
  .source { background: #0d1117 !important; border-color: #4a5564 !important; color: #aaa !important; }

  /* Links */
  a { color: #4da6ff !important; }

  /* Progress / bars */
  .progress-bar { background: #2a3340 !important; }
  .progress-label { color: #aaa !important; }
  .progress-wrap { background: rgba(13, 17, 23, 0.95) !important; }
  .ind-row .bar-container { background: #2a3340 !important; }

  /* Borders & dividers */
  hr { border-color: #3a4250 !important; }
  th { background: #2a3340 !important; color: #ccc !important; }
  th, td { border-color: #3a4250 !important; }

  /* Tagline / hints */
  .tagline { background: #2a2519 !important; color: #ddc99a !important;
             border-color: #5a4a30 !important; }
  .hint, .field label .hint, .charcount { color: #888 !important; }

  /* Toast */
  .toast { background: #2d3a4a !important; }

  /* Footer */
  footer { color: #777 !important; }
  footer a { color: #6ba8d4 !important; }

  /* Buttons keep their own colors but make secondary ones a bit darker */
  .btn-secondary { background: #444 !important; }
  .btn-secondary:hover { background: #555 !important; }

  /* Header gradient (lead-pack) — slightly tone down */
  header.gradient {
    /* preserve */
  }

  /* Stats badges on home */
  #liveStats > div { background: #1e242c !important; }

  /* Preview body (coop-form) — already dark, keep */

  /* Specific: details > content code's bright pink — soften */
  details .content code { color: #ff9a8a !important; }

  /* Skip link visibility */
  .skip-link { background: #4da6ff !important; }
}

/* Manual toggle support — body.dark / .light classes override */
body.dark {
  background: #0d1117 !important;
  color: #e6e6e6 !important;
}