/* 設計 token：石板橘（docs/design/orange-variants.html 的 data-v="1"）。
   深淺兩套由 <html data-theme> 決定；index.html <head> 的同步 script 會在第一次
   繪製前寫好 data-theme，沒有 JS 時退回深色（:root 本身就是深色）。

   舊名稱全部保留，既有頁面不改 CSS 也能吃到新色：
     --panel-2 = 比較稿 --panel2、--text-2/3 = --text2/3、--gold = --accent
   --gold 用在文字與線條居多，所以跟 --accent 一樣：深色是比特幣橘 #F7931A，
   淺色是深橘 #B45309（比特幣橘在白底當文字對比不足）。要「橘底」請用 --fill，
   上面的字用 --ink。
   --line-2 / --tag-bg / --tag-fg 比較稿沒有，是依石板色系補的：
     --line-2 = 比 --line 深一階的邊框（hover、浮層）
     --tag-fg = 次要資訊色（圖表第二條線、繪圖調色盤的「淺藍」）
     --tag-bg = 淡藍底，配 --tag-fg 當小標籤 */

:root {
  --fill:   #F7931A;
  --ink:    #1A1206;
  --radius: 10px;
  --gap:    10px;
  --pad:    12px;
  --font: 'Fira Sans', -apple-system, 'PingFang TC', 'Noto Sans TC', system-ui, sans-serif;
  --mono: 'Fira Code', ui-monospace, 'SF Mono', Menlo, monospace;
}

:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:      #0F172A;
  --panel:   #161E31;
  --panel-2: #1D2638;
  --line:    #2A3449;
  --line-2:  #3B4A66;
  --grid:    #1B2336;
  --text:    #F8FAFC;
  --text-2:  #AEB8CB;
  --text-3:  #8590A8;
  --up:      #2BD06A;
  --down:    #F25555;
  --accent:  #F7931A;
  --gold:    #F7931A;
  --tag-bg:  #22304D;
  --tag-fg:  #9EC1F0;
  --shadow:  0 10px 28px rgba(0, 0, 0, .5);
  --scrollbar: #2A3449;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:      #F1F3F7;
  --panel:   #FFFFFF;
  --panel-2: #F4F5F8;
  --line:    #E3E6EC;
  --line-2:  #B9C3D4;
  --grid:    #F1F3F7;
  --text:    #0F172A;
  --text-2:  #4A5568;
  --text-3:  #687286;
  --up:      #13773A;
  --down:    #C62020;
  --accent:  #B45309;
  --gold:    #B45309;
  --tag-bg:  #E3EBF8;
  --tag-fg:  #2B5CA8;
  --shadow:  0 10px 28px rgba(15, 23, 42, .14);
  --scrollbar: #CDD3DD;
}

/* 由上面的色衍生的淡底（只在 CSS 裡用；canvas 讀不懂 color-mix）。 */
:root {
  --fill-soft:   color-mix(in srgb, var(--fill) 16%, transparent);
  --fill-border: color-mix(in srgb, var(--fill) 45%, var(--line));
  --up-soft:     color-mix(in srgb, var(--up) 14%, transparent);
  --down-soft:   color-mix(in srgb, var(--down) 14%, transparent);
}
/* 淺色模式的 --fill-soft 降到 12%：選中狀態是「--accent 字＋--fill-soft 底」，
   16% 時 #B45309 對白底上的淡橘只有 4.41:1，12% 是 4.55:1（≥ 4.5）。 */
:root[data-theme="light"] {
  --fill-soft:   color-mix(in srgb, var(--fill) 12%, transparent);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up  { color: var(--up); }
.down{ color: var(--down); }

.tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fill) 12%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
}

/* 線條 SVG 圖示（取代 emoji）：stroke、1.75 線寬、圓角端點。 */
svg.i {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
svg.i.sm { width: 12px; height: 12px; }
svg.i.md { width: 14px; height: 14px; }

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }