/* ============================================================
   tokens.css — 全站設計變數的單一來源（尺寸階層＋配色主題）
   ============================================================

   ⚠️ 這個檔案「只定義變數，不套用任何樣式」。
      所有頁面（主站、/risk、登入頁）第一個載入它；其他 CSS 只用 var() 取值。

   重新設計時改哪裡
     配色、陰影、字型、背景 → 本檔下半部的「主題」：
                              :root 是深色（切換用；主站預設淺色），html[data-theme="light"] 只寫亮色不同的值
     字級、圓角、間距、斷點 → 本檔上半部的「尺寸階層」
     元件形狀與狀態         → components.css（只用這裡的變數）
     殼層（背景、側欄、頂欄）→ glass-theme.css（只用這裡的變數）

   不要在其他檔案再寫 :root 或 [data-theme="light"] 的變數區塊——
   2026-10-09 之前配色分散在 terminal.css、glass-theme.css、components.css
   與 tweaks.js（inline 設 --r），terminal.css 那套金棕配色其實整組被蓋掉，
   改了也看不到效果。

   為什麼需要它
     現況全站只有 10 個 media query，散落 6 個互不協調的斷點
     （620/780/820/900/980/1180），每頁各自發明。z-index 有 16 個
     臨時值（1,2,3,4,5,6,7,9,20,30,50,60,90,100,1200,9000）。
     沒有單一來源，每加一頁就多一組衝突。

   數值從何而來
     不是憑空設計，是盤點 static/*.css 的實際使用頻率後訂出來的，
     這樣後續套用時才不會改變既有外觀。
   ============================================================ */

:root {
  /* ── 斷點 ────────────────────────────────────────────────
     依「內容何時破版」訂定，不是依裝置型號。
     每個值都有實測依據（docs/perf-baseline/2026-08-01-post-2A.json）。

     ⚠️ CSS 的 @media 不支援 var()，所以 media query 裡仍須寫死數值。
        這裡的變數供 JavaScript 讀取（matchMedia）與人工對照用。
        改斷點時「兩邊都要改」——這是目前的限制，
        要根除需要 PostCSS（階段 9 導入 Vite 後再處理）。 */
  --bp-sm: 480px;   /* 單欄臨界。實測 360-480px 之間 .ma-val（60px 容器裝 76px）、
                       .cr-chg（24px 容器裝 67px）等讀數被截斷 */
  --bp-md: 720px;   /* 主力表格臨界。sticky 欄實測合計 400px，
                       加上最小可用資料區 320px = 720px。
                       低於此值必須改卡片化，否則資料欄完全看不到 */
  --bp-lg: 1024px;  /* 雙欄 → 三欄 */
  --bp-xl: 1280px;  /* .grid3 三欄的舒適寬度 */

  /* ── 間距階 ──────────────────────────────────────────────
     本專案是 2px 網格（不是常見的 4px/8px 網格）。
     盤點實際使用次數：8px×42、10px×38、6px×31、4px×23、12px×22、
     2px×21、14px×20。這是高密度金融終端的合理選擇，不要改成 4px 網格。 */
  --sp-0: 0;
  --fs-calendar-month: 44px;
  --radius-mark-circle: 50%;
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 12px;
  --sp-7: 14px;
  --sp-8: 18px;   /* = 既有的 --pad */
  --sp-9: 22px;
  --sp-10: 26px;

  /* ── 字級階 ──────────────────────────────────────────────
     2026-10-09 起全站字級都從這裡取值（主站、/risk、登入頁共約 500 處）。
     數值完全照搬現況，所以 token 化本身不改畫面；階數多是因為現況就這麼多種，
     重新設計時可以把相鄰幾階設成同一個值來合併。括號是 2026-10-09 的使用次數（含 calc 偏移）。
     半像素寫成「整數階 + 0.5px」（例如 calc(var(--fs-xs) + 0.5px) = 11.5px），
     跟著所屬整數階一起變。
     終端風格刻意偏小；放大字級會改變資訊密度，屬於設計決策而非 RWD 修正。 */
  --fs-5xs: 7px;   /* (1) */
  --fs-4xs: 8px;   /* (11) */
  --fs-3xs: 9px;   /* (50) */
  --fs-2xs: 10px;  /* (102) */
  --fs-xs: 11px;   /* (113) */
  --fs-sm: 12px;   /* (96) */
  --fs-md: 13px;   /* (55) */
  --fs-base: 14px; /* (22) = body */
  --fs-lg: 15px;   /* (10) */
  --fs-xl: 16px;   /* (14) */
  --fs-2xl: 17px;  /* (9) */
  --fs-3xl: 18px;  /* (6) */
  /* 標題與大數字 */
  --fs-display-1: 19px;  /* (3) */
  --fs-display-2: 20px;  /* (5) */
  --fs-display-3: 21px;  /* (4) */
  --fs-display-4: 22px;  /* (4) */
  --fs-display-5: 24px;  /* (3) */
  --fs-display-6: 25px;  /* (1) */
  --fs-display-7: 26px;  /* (5) */
  --fs-display-8: 27px;  /* (1) */
  --fs-display-9: 28px;  /* (2) */
  --fs-display-10: 30px; /* (1) 登入頁手機標題 */
  --fs-display-11: 31px; /* (1) */
  --fs-display-12: 34px; /* (1) 登入頁標題下限 */
  --fs-display-13: 40px; /* (2) */
  --fs-display-14: 42px; /* (1) */
  --fs-display-15: 50px; /* (1) 登入頁標題上限 */

  /* ── 圓角 ────────────────────────────────────────────────
     同字級：照搬現況的每一種值。5／7／9px 各只有幾處，寫成「前一階 + 1px」。
     99px 與 999px 都是膠囊（元素高度不到 198px 時兩者畫出來一樣），合併成 --radius-pill。 */
  --radius-hair: 2px; /* (7) */
  --radius-2xs: 2px;  /* (9) */
  --radius-xs: 2px;   /* (12) */
  --radius-sm: 2px;   /* (14) */
  --radius-md: 2px;   /* (13) */
  --radius-lg: 2px;   /* (25) */
  --radius-xl: 2px;  /* (12) */
  --radius-2xl: 2px; /* (5) */
  --radius-3xl: 2px; /* (2) */
  --radius-4xl: 2px; /* (1) */
  --radius-pill: 2px; /* (36) */
  --radius-round: 50%;  /* (28) 圓形 */
  /* 語意圓角：卡片與多數控制項用 --r。原本由 tweaks.js 以 inline 設成 3px，
     蓋過 glass-theme.css 的 12px；/risk 沒載入 tweaks.js 才是 12px。 */
  --r: var(--radius-xs);

  /* ── z-index 階 ──────────────────────────────────────────
     現況有 16 個臨時值。這個階梯是「目標狀態」，
     要在階段 4-7 逐頁遷入，不是現在批次取代。
     留大間隔（100）讓同層內可以微調而不必動階梯本身。 */
  --z-base: 0;
  --z-raised: 10;      /* 卡片 hover 抬升 */
  --z-sticky: 100;     /* sticky 表頭 / sticky 欄 */
  --z-dropdown: 200;   /* omdd 下拉 */
  --z-popover: 300;    /* topbar 月曆 / 同步狀態 / omtip */
  --z-drawer: 400;     /* 手機導覽抽屜（階段 4 新增） */
  --z-backdrop: 390;   /* 抽屜/modal 的遮罩，必須低於它遮蔽的東西 */
  --z-modal: 500;
  --z-toast: 600;

  /* ── 觸控目標 ────────────────────────────────────────────
     實測（360×800）：Daily Record 有 246 個互動元素低於 24×24，
     主力頁 101 個。最小的 SELECT 只有 47×16、record-refresh 18×32。 */
  --touch-min: 44px;       /* Apple HIG / Material 建議值 */
  --touch-min-wcag: 24px;  /* WCAG 2.2 AA (2.5.8) 硬性下限 */

  /* ── 安全區（瀏海 / 底部橫條）────────────────────────────
     全站目前 0 處使用 env()。iPhone 上 .sb-foot 的登出鈕可能被遮住。 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);

  /* ── 版面尺寸 ──────────────────────────────────────────── */
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 64px;
  --pad: 18px;               /* 卡片／欄位內距（原 tweaks 的 density=regular） */
  --topbar-h: 56px;          /* 現況值 */
  --topbar-h-compact: 48px;  /* 手機橫向目標值（階段 4） */

  /* ── 動態視窗高度 ────────────────────────────────────────
     現況 6 處使用 100vh。iOS Safari 網址列展開時 100vh > 實際可視高度，
     底部內容會被裁掉。dvh 才是正確的單位。
     舊瀏覽器不支援 dvh 時會忽略整條宣告，因此保留 vh 作為 fallback：
         height: 100vh;
         height: 100dvh;   ← 支援時覆蓋前者
     這裡提供變數供新程式碼使用。 */
  --vh-full: 100vh;
}

@supports (height: 100dvh) {
  :root {
    --vh-full: 100dvh;
  }
}

/* ============================================================
   主題：深色（切換用；主站預設淺色）
   ============================================================ */
:root {
  /* ── 表面與線條 ── */
  /* Shared Swiss surfaces follow the active theme across navbar, lists and calendars. */
  --list-surface: var(--bg0);
  --list-ink: var(--text);
  --list-muted: var(--text3);
  --list-rule: var(--line);
  --list-hover: var(--bg2);
  --list-selected-ink: var(--bg0);
  --list-selected-muted: #137c73;
  --list-scroll-thumb: var(--line-2);
  --list-accent: var(--accent);
  --list-secondary: var(--text2);
  --list-faint: #65736f;
  --list-selected: #253f3b;
  --list-closed: #ff8c80;
  --consensus-code: var(--accent);
  --consensus-buy: #f2a49b;
  --consensus-sell: #9fd6b8;
  --consensus-selected-buy: #b8463c;
  --consensus-selected-sell: #3f8f6a;
  --bg0: #171b1b;
  --bg1: #1c2121;
  --bg2: #252c2c;
  --bg3: #303939;
  --line: #354040;
  --line-2: #435151;
  --frame: var(--line);
  --frame-inner: transparent;
  --shadow: none;

  /* ── 文字 ── */
  --text: #f5f6f4;
  --text2: #c1ccca;
  --text3: #a1afad;

  /* ── 強調色（系統操作用，和漲跌紅綠分開） ── */
  --accent: #83d4cb;
  --accent-soft: rgba(131, 212, 203, 0.12);
  --accent-line: #558f89;
  --teal: var(--accent);
  --teal-soft: var(--accent-soft);
  --teal-line: var(--accent-line);
  --pearl-blue: var(--accent);
  --pearl-mint: var(--accent);
  --pearl-pink: var(--text2);
  --pearl-lilac: var(--text3);

  /* ── 漲跌：紅漲綠跌（台股慣例） ── */
  --up: #ff625c;
  --up-soft: rgba(255, 98, 92, 0.1);
  --down: #36d98a;
  --down-soft: rgba(54, 217, 138, 0.1);
  --flat: var(--text3);

  /* ── 狀態：警示與錯誤（/risk 燈號、量能監控的延遲／失敗）；成功用 --teal ── */
  --warn: #f5c451;
  --warn-soft: rgba(245, 196, 81, 0.11);
  --warn-line: rgba(245, 196, 81, 0.32);
  --danger: var(--up);
  --danger-soft: var(--up-soft);
  --danger-line: var(--up);
  --track-bg: var(--line); /* 進度條與環圖的底軌、中性狀態標籤 */

  /* ── 類別圖表系列色（量能監控產業環圖） ── */
  --series-1: var(--accent);
  --series-2: #b6c3c1;
  --series-3: #899c98;
  --series-4: #e0e5e3;
  --series-5: #667b76;
  --series-6: #a0b1ad;
  --series-7: #556762;

  /* ── 技術指標線（charts.js 讀取） ── */
  /* MA indicator hues stay distinct from candle direction and the Tiffany UI accent. */
  --ma5: #5ab5ff;
  --ma10: #ff80d5;
  --ma20: #ffd166;
  --ma60: #d5a6ff;
  --ma-label-ink: #ffffff;
  --macd-dif: #83d4cb;
  --macd-dea: #b6c3c1;
  --rsi: #83d4cb;
  --kdk: #83d4cb;
  --kdd: #b6c3c1;

  /* ── 圖表表面（charts.js 讀取） ── */
  --chart-text: var(--text2);
  --chart-grid: #303939;
  --chart-line: var(--line);
  --chart-cross: var(--text3);
  --chart-label: var(--bg2);
  --chart-faint: #c1ccca;
  --chart-font: "IBM Plex Mono", monospace;
  --chart-font-size: var(--fs-2xs);
  --chart-volume-opacity: 0.65;
  --chart-sub-volume-opacity: 0.75;

  /* ── 字型：兩套家族，中文／標題 Noto Sans TC，數據 IBM Plex Mono。
     --serif 留作既有選擇器的相容別名，實際指向同一套 sans。 */
  --cjk: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, var(--cjk);
  --sans: var(--cjk);
  --serif: var(--sans);

  /* ── 殼層：頁面背景、側欄、頂欄、導覽（glass-theme.css 使用） ── */
  --page-canvas: var(--bg0); /* html 底色，只在過度捲動時看得到；亮色也沿用 */
  --page-bg: var(--bg0);
  --page-grid: none;
  --shell-surface: var(--bg0);
  --shell-shadow: none;
  --brand-bg: transparent;
  --brand-mark-shadow: none;
  --nav-hover-bg: var(--bg2);
  --nav-icon: #ffffff;
  --nav-current-bg: var(--accent-soft);
  --nav-current-shadow: none;
  --nav-current-marker: var(--accent);
  --inset-surface: var(--bg0); /* 狀態列、圖表工具列、過濾器區塊、表格外框 */
  --inset-highlight: none;
  --table-head-bg: transparent;
  --row-hover-bg: var(--bg2);
  --selection-bg: var(--accent-soft);
  --selection-ink: var(--text);

  /* ── 按鈕 ── */
  --button-gradient: var(--text);
  --button-gradient-soft: var(--bg0);
  --button-border: var(--line-2);
  --button-hover-border: var(--text);
  --button-ink: var(--bg0);
  --button-shadow: none;
  --button-soft-shadow: none;
  --theme-toggle-shadow: none;

  /* ── 元件（components.css 使用） ── */
  --ui-control-height: 34px;
  --ui-control-radius: var(--radius-lg);
  --ui-focus: none;
  --ui-favorite: var(--accent);
  --control-hover-border: var(--accent-line);
  --chip-bg: transparent;
  --chip-on-bg: var(--accent-soft);
  --card-bg: var(--bg0);
  --card-highlight: none;
  --card-sheen: transparent; /* 卡片頂端的反光細線 */
  --adm-card-hover-bg: var(--bg2);
  --overlay-bg: var(--bg1); /* 下拉選單、Popover、Dialog、月曆 */
  --overlay-drop: none;
  --overlay-highlight: none;
  --calendar-shadow: none; /* 月曆：深色沒有內側高光，亮色有（沿用原本的層疊結果） */
  --backdrop: rgba(1, 12, 31, 0.5);
  --drawer-shadow: none;

  /* ── 提示紙卡（Tooltip 刻意在深淺色都用淺色紙面） ── */
  --paper-bg: var(--bg1);
  --paper-border: var(--line-2);
  --paper-arrow: var(--bg1);
  --paper-shadow: none;
  --paper-rule: var(--line);
  --paper-ink: var(--text);
  --paper-ink-2: var(--text2);
  --paper-ink-3: var(--text3);
  --tag-map-bg: var(--accent-soft); /* 「AI 股票地圖」來源標籤 */
  --tag-map-line: var(--accent-line);

  /* ── 頁面專用色 ── */
  --etf-blue: var(--accent);
  --etf-blue-soft: var(--accent-soft);
  --etf-violet: var(--text2);

  /* ── 細線表單（管理頁；2026-10-12 使用者指定的深色色碼）──
     底線式下拉／輸入、實心方形勾選框、文字分頁、Tiffany 實心按鈕共用。 */
  --form-surface: #161a1a;
  --form-rule: #2c3333;      /* 列分隔線、分頁列下框 */
  --form-underline: #4a5252; /* 下拉底線、未勾選框 */
  --form-ink: #e8ecea;
  --form-ink-2: #a6b0ae;     /* 說明文字 */
  --form-label: #8a9494;     /* 標籤、未選分頁 */
  --form-faint: #6d7777;     /* 停用、編號 */
  --form-accent: #5fc4b8;    /* Tiffany */
  --form-accent-hover: #7fd4ca;
  --form-accent-ink: #0e1111; /* 實心 Tiffany 上的字與勾 */
}

/* ============================================================
   主題：亮色（只寫和深色不同的值）
   ============================================================ */
html[data-theme="light"] {
  /* Swiss light surfaces preserve the reference palette. */
  --list-surface: #fbfbfa;
  --list-ink: #1c1f1f;
  --list-muted: #8a9090;
  --list-rule: #e4e6e6;
  --list-hover: #f1f3f2;
  --list-selected-ink: #ffffff;
  --list-selected-muted: #9fd6cf;
  --list-scroll-thumb: #d8dcdb;
  --list-accent: #3f9c94;
  --list-secondary: #5a6060;
  --list-faint: #c4c8c8;
  --list-selected: #e3efed;
  --list-closed: #b8463c;
  --consensus-code: #2f8079;
  --consensus-buy: #b8463c;
  --consensus-sell: #3f8f6a;
  --consensus-selected-buy: #f2a49b;
  --consensus-selected-sell: #9fd6b8;

  --bg0: #fbfbfa;
  --bg1: #fbfbfa;
  --bg2: #f1f3f2;
  --bg3: #e9eeec;
  --line: #e4e6e6;
  --line-2: #e4e6e6;
  --frame: var(--line);
  --frame-inner: transparent;
  --shadow: none;

  --text: #1c1f1f;
  --text2: #505b5b;
  --text3: #646f6f;

  --accent: #137c73;
  --accent-soft: rgba(19, 124, 115, 0.08);
  --accent-line: #83d4cb;
  --teal: var(--accent);
  --teal-soft: var(--accent-soft);
  --teal-line: var(--accent-line);

  /* 淺底上的鮮紅／鮮綠，保留台股紅漲綠跌辨識 */
  --up: #d92b27;
  --up-soft: rgba(217, 43, 39, 0.08);
  --down: #00a65a;
  --down-soft: rgba(0, 166, 90, 0.08);
  --flat: var(--text3);

  --warn: #b07d10;
  --warn-soft: rgba(176, 125, 16, 0.1);
  --warn-line: rgba(176, 125, 16, 0.32);
  --danger: var(--up);
  --danger-soft: var(--up-soft);
  --danger-line: var(--up);
  --track-bg: var(--line);

  /* 淺底上反向處理：資料墨水加深不提亮 */
  --ma5: #268bff;
  --ma10: #df48b9;
  --ma20: #b87900;
  --ma60: #996cf3;
  --macd-dif: #137c73;
  --macd-dea: #505b5b;
  --rsi: #137c73;
  --kdk: #137c73;
  --kdd: #505b5b;

  --chart-text: var(--text2);
  --chart-grid: #e4e6e6;
  --chart-line: var(--line);
  --chart-cross: var(--text3);
  --chart-label: var(--text);
  --chart-faint: #505b5b;

  --page-bg: var(--bg0);
  --page-grid: none;
  --shell-surface: var(--bg0);
  --shell-shadow: none;
  --brand-bg: transparent;
  --brand-mark-shadow: none;
  --nav-hover-bg: var(--bg2);
  --nav-icon: #000000;
  --nav-current-bg: var(--accent-soft);
  --nav-current-shadow: none;
  --nav-current-marker: var(--accent);
  --inset-surface: var(--bg0);
  --table-head-bg: transparent; /* 2026-10-10 前沒有亮色值，亮色表頭是深藍半透明的灰帶 */
  --selection-bg: var(--accent-soft);

  --button-gradient: var(--text);
  --button-gradient-soft: var(--bg0);
  --button-border: var(--line-2);
  --button-ink: var(--bg0);
  --button-shadow: none;

  --ui-favorite: var(--accent);
  --card-bg: var(--bg0);
  --card-highlight: none;
  --adm-card-hover-bg: var(--bg2);
  --overlay-bg: var(--bg1);
  --overlay-drop: none;
  --overlay-highlight: none;
  --calendar-shadow: none;

  --form-surface: #fbfbfa;
  --form-rule: #e4e6e6;
  --form-underline: #b9bfbe;
  --form-ink: #1c1f1f;
  --form-ink-2: #5a6060;
  --form-label: #7a8282;
  --form-faint: #9aa1a0;
  --form-accent: #3f9c94;
  --form-accent-hover: #2f8179;
  --form-accent-ink: #ffffff;
}