/* ──────────────────────────────────────────────────────────────
 * IB 終端的設計 token（2026-10-26）
 *
 * 🔴 **這是地基，先改這裡再改 ib-panel.css。**
 *    原本 ib-panel.css 有 30 種不同的半透明白、11 種字級，
 *    每加一個元件就再長一種，調不動也對不齊。
 *
 * 規則：
 *   顏色一律走這裡的 token，不要再寫 `rgba(255,255,255,.xx)`。
 *   文字用 --ib-ink-*、背景填色用 --ib-fill-*、框線用 --ib-line-*。
 *   三者分開是刻意的 —— 同一個 .08 當文字和當框線的語意完全不同，
 *   日後要調「所有框線淡一點」才改得動。
 *
 *   字級只有 7 階。要新的字級之前先問自己「真的不能用現有的嗎」。
 * ────────────────────────────────────────────────────────────── */
:root {
  /* 底色：0 = 畫布（圖表）、1 = 面板、2 = 浮起（輸入框/膠囊）、3 = hover */
  --ib-bg-0: #0C0F14;
  --ib-bg-1: #0F1116;
  --ib-bg-2: #161A21;
  --ib-bg-3: #1D222B;

  /* 文字 4 階：主要 / 次要 / 說明 / 最淡 */
  --ib-ink-0: rgba(255, 255, 255, .92);
  --ib-ink-1: rgba(255, 255, 255, .82);
  --ib-ink-2: rgba(255, 255, 255, .50);
  /* 🔴 最淡那階是 **#7B8696（4.6:1）**，不是 rgba(255,255,255,.35)。
   *    後者在 #0C0F14 上只有 3.4:1，用在 10px 的欄位標籤上不及格（WCAG AA 要 4.5:1）。
   *    真的要更淡只能是「停用」，而停用不承載資訊。 */
  --ib-ink-3: #7B8696;
  --ib-ink-off: #49515C;

  /* 框線 2 階 */
  --ib-line-1: rgba(255, 255, 255, .08);
  --ib-line-2: rgba(255, 255, 255, .14);

  /* 背景填色 3 階 */
  --ib-fill-1: rgba(255, 255, 255, .04);
  --ib-fill-2: rgba(255, 255, 255, .08);
  --ib-fill-3: rgba(255, 255, 255, .14);

  /* 語意色（漲綠跌紅跟 ib-chart.js 的 THEME 同一組） */
  --ib-up: #2BC48F;
  --ib-up-soft: #5FDBA7;
  --ib-down: #F04B5F;
  --ib-down-soft: #FF8E9A;
  --ib-accent: #5A8CFF;
  --ib-accent-ink: #9AB8FF;
  --ib-accent-dim: rgba(90, 140, 255, .14);
  --ib-warn: #FF8A1F;
  --ib-warn-ink: rgba(255, 170, 40, .75);
  --ib-warn-dim: rgba(255, 170, 40, .28);
  /* 🔴 info 跟 accent 分家：accent 只給「我能動它」（選取、焦點、勾起來的勾選框），
   *    info 只給「這是說明」（READ-ONLY、快取、延遲）。
   *    原本兩者共用 #5A8CFF —— 看到藍色不知道是能點還是只是資訊。 */
  --ib-info: #6E7A8F;
  --ib-info-ink: #A6B2C6;
  --ib-info-dim: rgba(110, 122, 143, .16);

  /* 字級：本文 6 階，每一階**綁死行高** —— 行高自由就等於沒有級距。
   * 🔴 拿掉了 9.5px（跟 10px 肉眼分不出來，卻讓兩個地方永遠對不齊）。
   *    `--ib-fs-micro` 是**自選清單迷你徽章專用**，不是本文字級，
   *    硬拉到 10px 會撐破欄寬。 */
  --ib-fs-micro: 8.5px;  --ib-lh-micro: 11px;
  --ib-fs-xs: 10px;      --ib-lh-xs: 14px;
  --ib-fs-s: 11px;       --ib-lh-s: 15px;
  --ib-fs-m: 12px;       --ib-lh-m: 17px;
  --ib-fs-l: 13px;       --ib-lh-l: 18px;
  --ib-fs-xl: 14px;      --ib-lh-xl: 19px;
  --ib-fs-2xl: 16px;     --ib-lh-2xl: 20px;

  /* 間距級距 —— 原本 padding/gap 用了 18 種零碎值（1/3/5/7/9/13/14/18/20/22…）。
   * 🔴 刻意**不是教科書的 4px 網格**：嚴格 4 的倍數會讓 110 條宣告各位移 ±2px，
   *    密集的那幾列（報價列、自選列）正是今天才修好「被切掉／變高」的地方。
   *    這裡收斂成 8 階，把真正零碎的那 10 種值消掉。 */
  --ib-sp-hair: 2px;
  --ib-sp-1: 4px;
  --ib-sp-2: 6px;
  --ib-sp-3: 8px;
  --ib-sp-4: 10px;
  --ib-sp-5: 12px;
  --ib-sp-6: 16px;
  --ib-sp-7: 24px;

  /* 字族：數字一律等寬，不然價格跳動時會左右抖 */
  --ib-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* 圓角只有兩種。原本 2/3/4/6/999 五種混用，排在一起就看得出來不是同一套。 */
  --ib-r-1: 4px;
  --ib-r-pill: 999px;

  /* 動效：1 = 狀態切換、2 = 版面收合 */
  --ib-dur-1: .12s;
  --ib-dur-2: .2s;

  /* 控件高度 —— 按鈕、下拉、勾選框共用同一個值才像同一套 */
  --ib-ctl-h: 24px;
  /* 密度：列高。緊湊 20 / 標準 28。目前只做 token，沒有做切換鈕
   * （工具列已經很滿，而且使用者沒要求）—— 要加按鈕隨時可以。 */
  --ib-row-h: 20px;
}

/* 使用者在系統設定了「減少動態效果」就全部關掉 */
@media (prefers-reduced-motion: reduce) {
  :root { --ib-dur-1: 0s; --ib-dur-2: 0s; }
}