/* TMS v2 視覺 tokens：只在 shell_v2.html 載入（v1 的值留在 shell_v1.html 的 :root，不動）。
 *
 * 來源：design/spec.md〈視覺系統〉的 Tokens 表、〈字體與字級〉、〈間距與密度〉與〈圖表〉。
 * 規則：
 * - 只有深色主題。
 * - --brand 只用在外框（主選單作用中方塊、主要按鈕、作用中頁籤底線、作用中排序箭頭、
 *   時間軸圓點、手機分頁列作用中圖示），不當資料文字色，資料區不出現實心橘塊。
 * - --risk 永遠帶「風險」字樣或 ⚠；方向（--up／--down）與判讀（--ok／--warn／--risk）不混用。
 * - --ac 在 v2 指向連結藍：舊內容用 var(--ac) 畫的標題與連結不會在資料區冒出橘色。
 * - 標 「*-ink」 的是該底色上的字色，對比數字寫在旁邊（WCAG，正常字級 ≥ 4.5:1）。
 */
:root {
  color-scheme: dark;

  /* ---- 表面 ---- */
  --bg: #121212;          /* 頁面、圖表底 */
  --panel: #1b1b1b;       /* 面板、子頁籤列 */
  --panel-2: #222222;     /* 表頭、凸起列、分段控制軌道 */
  --raised: #2a2a2a;      /* hover、選股左欄底 */
  --raised-on: #3d3d3d;   /* 開關晶片作用中、分段控制選中格 */
  --line: #2f2f2f;        /* 分隔線 */
  --line-2: #3a3a3a;      /* 強分隔、次要按鈕框、輸入框框 */

  /* ---- 外框 ---- */
  --menu: #262626;        /* 主選單列 */
  --subtabs: #1b1b1b;     /* 子頁籤列 */
  --stockbar: #18222e;    /* 鋼藍個股列 */
  --board: #0f0f0f;       /* 即時看板黑底 */
  --board-head: #0d2a45;  /* 看板深藍表頭 */
  --sel: #1f3248;         /* 選中列（左側另加 3px --brand 條） */
  --rail-on: #dcdcdc;     /* 選股左欄選中項（App 風淺灰底） */
  --rail-on-ink: #141414; /* 13.4:1 */

  /* ---- 文字 ---- */
  --fg: #e8e8e8;          /* 內文，在 --bg 上 15.3:1 */
  --mut: #9e9e9e;         /* 次要文字，在 --bg 上 7.0:1、--panel 上 6.4:1 */
  --dim: #6e6e6e;         /* 3.7:1：只用於停用狀態與裝飾，不可承載必要資訊 */
  --ink: #141414;         /* 淺色實心底上的深字（規格各處的 #141414；下面各 *-ink 是它的具名用途） */

  /* ---- 方向（漲跌、買賣、損益、多空；台股紅漲綠跌） ---- */
  /* 文字用漲色：#ef476f 在 --panel-2／--raised／--sel 上只有 3.6–4.4:1，提亮到 #ff6680 後全表面 ≥ 4.6:1（K 線圖形仍用 #ef476f）。 */
  --up: #ff6680;
  --down: #52d273;
  --flat: #c9d1d9;
  --up-strong: #d7263d;          /* 漲停實心框 */
  --up-strong-ink: #ffffff;      /* 白粗體 4.96:1 */
  --down-strong: #1f9d48;        /* 跌停實心框 */
  --down-strong-ink: #0b1a10;    /* 5.1:1 */
  --up-tint: rgba(239, 71, 111, .10);   /* 買方列底 */
  --down-tint: rgba(82, 210, 115, .10); /* 賣方列底 */
  --band-buy: #a8242f;           /* 「區間買超前15」表頭帶 */
  --band-sell: #1e6b37;          /* 「區間賣超前15」表頭帶 */
  --band-ink: #ffffff;           /* 7.1:1／6.5:1 */

  /* ---- 判讀（不用紅綠） ---- */
  --ok: #79c0ff;          /* 通過、有利 */
  --warn: #ffd166;        /* 注意 */
  --warn-ink: #141414;    /* 「提醒！」「隔日沖」pill 的字，12.8:1 */
  --risk: #ff9f43;        /* 風險：一定帶「風險」或 ⚠ */
  --good: var(--ok);      /* 舊名相容：.good／.bad 是好壞判讀不是漲跌 */
  --bad: var(--risk);

  /* ---- 作戰簡報 stance（照舊） ---- */
  --stance-stalk: #4cc9f0;  /* 埋伏 */
  --stance-wait: #f9c74f;   /* 等待 */
  --stance-avoid: #ff9f43;  /* 迴避 */
  --stance-na: #8b949e;     /* 資料不足 */

  /* ---- 品牌與動作（只在外框） ---- */
  --brand: #d9650a;
  --brand-hover: #ef7a1f;   /* 也是外框上的橘字色：--brand 在 --menu 上只有 4.2:1，橘字改用它（5.4:1） */
  --brand-ink: #141414;     /* 品牌底上的字，5.1:1 */
  --order: #e8495a;         /* 模擬下單 */
  --order-ink: #141414;     /* 實心時的字，4.85:1 */
  --link: #6cb6ff;          /* 文字連結，8.7:1 */
  --ac: var(--link);        /* v2 舊名相容 */
  --focus: #6cb6ff;         /* 2px 焦點環 */

  /* ---- 統計區間 ---- */
  --window: #e9dc8a;                       /* 統計天數作用中鈕底 */
  --window-ink: #141414;                   /* 13.2:1 */
  --window-band: rgba(233, 220, 138, .08); /* K 線上的統計區間 */

  /* ---- 證據等級 ---- */
  --tier-verified: #79c0ff;   /* 已驗證 */
  --tier-exploring: #c3b1ff;  /* 研究中 */
  --tier-control: #9aa4af;    /* 對照・已否證 */
  --tier-tool: #8b949e;       /* 工具 */

  /* ---- 標籤 ---- */
  --gold: #e6c36a;        /* 「台灣50」金底 */
  --gold-ink: #141414;    /* 10.9:1 */

  /* ---- 圖表（〈圖表〉一節；給 JS 用 getComputedStyle 讀，避免每支腳本各寫一份） ---- */
  --chart-grid: rgba(255, 255, 255, .06);
  --chart-ma5: #8b949e;
  --chart-ma20: #4cc9f0;
  --chart-ma60: #f9c74f;
  --chart-ma120: #c084fc;
  --chart-ma240: #ef4444;
  --chart-foreign: #6cb6ff;     /* 外資 */
  --chart-trust: #c084fc;       /* 投信 */
  --chart-dealer: #8d99ae;      /* 自營 */
  --chart-chip-cum: #e8e8e8;    /* 主力買賣超累計線 */
  --chart-inventory: #ffb020;   /* 估算庫存線 */
  --chart-holding: #8ab4f8;     /* 持股比率面積 */

  /* ---- 字體與字級 ---- */
  --font-sans: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-axis: 11px;      /* 軸標、狀態列、單位、代號（第二行） */
  --fs-compact: 12px;   /* 緊湊表格、標籤、chips */
  --fs-control: 13px;   /* 標準表格、控制項 */
  --fs-body: 14px;      /* 內文、主選單 */
  --fs-title: 16px;     /* 面板標題（600）、手機內文、輸入框 */
  --fs-input: 16px;     /* 輸入框一律 16px：iOS 小於 16px 會在聚焦時自動放大 */
  --fs-page: 18px;      /* 頁標題（600） */
  --fs-kpi: 24px;
  --fs-price: 28px;     /* 桌機個股價格（700） */
  --fs-price-xl: 32px;  /* 手機個股價格、首頁指數 */
  --fs-verdict: 40px;   /* 主力動向大字（800） */
  --fw-menu: 500;
  --fw-title: 600;
  --fw-price: 700;
  --fw-verdict: 800;
  --lh-table: 1.35;
  --lh-body: 1.6;

  /* ---- 間距（4px 格線）、圓角 ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --panel-pad: 8px 12px;
  --panel-gap: 8px;
  --r-panel: 4px;
  --r-chip: 3px;        /* PC 方塊風 */

  /* ---- 密度（偏好設定切換；標準為新帳號預設） ---- */
  --row-h: 32px;
  --row-fs: 13px;
  --seg-h: 28px;        /* 分段控制、方形小鈕 */
  --touch: 44px;        /* 手機觸控目標下限 */
  --list-row-h: 52px;   /* 手機兩行列（名稱在上、代號在下） */

  /* ---- 外框尺寸 ---- */
  --menu-h: 40px;
  /* 黏頂外框（主選單＋子頁籤；手機是頂列＋第二列）的實際高度：這是載入前的預設，
     site.js 量到後以 <html> 的行內樣式覆寫。提醒 toast、個股頁分節列與錨點位移都靠它。 */
  --hdr-h: calc(var(--menu-h) + var(--subtabs-h));
  --subtabs-h: 32px;
  --statusbar-h: 26px;
  --stockbar-h: 52px;
  --statechips-h: 28px;
  --topbar-h: 48px;     /* 手機頂列 */
  --secondbar-h: 40px;  /* 手機第二列 */
  --tabbar-h: 56px;     /* 手機底部分頁列（另加 safe-area） */
  --rail-w: 200px;      /* 選股左分類欄 */
  --search-w: 260px;    /* 主選單搜尋框 */
  --page-max: 1920px;   /* 工作台頁 */
  --read-max: 1200px;   /* 閱讀型頁面（報告、設定、資訊流） */
  --gutter: 12px;

  /* ---- 疊層（與 v1 現有數值相容：圖表全螢幕 1000～1003、toast 30000） ---- */
  --z-sticky: 40;
  --z-statusbar: 45;
  --z-tabbar: 50;
  --z-dropdown: 1000;
  --z-sheet: 1100;
  --z-toast: 30000;

  /* ---- 動態 ---- */
  --dur-flash: .6s;     /* 即時價變動閃爍 */
  --dur-fade: 120ms;    /* 頁籤片段淡入 */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

:root[data-density="compact"] {
  --row-h: 28px;
  --row-fs: 12px;
}

@media (max-width: 720px) {
  :root {
    --fs-body: 16px;      /* 手機內文 */
    --fs-price: 32px;     /* 手機個股價格 */
    --fs-verdict: 44px;   /* 手機主力動向大字 */
    --seg-h: 44px;        /* 分段控制在手機就是觸控目標 */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-flash: 0s;
    --dur-fade: 0s;
  }
}