/* ============================================================
   全站設計代號（design tokens）
   所有頁面的顏色、字型、圓角、間距只能用這裡的變數，不自行加新色。
   來源：feed_bench「盤口跡象」介面的配色。
   只能新增變數，不能改名或刪除（舊頁面會壞）。
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;700&display=swap');

:root {
  /* 背景層次：頁面 → 頂列 → 面板 → 次面板 → 晶片 */
  --bg: #0E1012;
  --bar: #0A0C0D;
  --panel: #0F1214;
  --panel-2: #15181B;
  --panel-3: #1F2327;

  /* 線條：分隔線 → 邊框 → 強調邊框 */
  --line: #23272C;
  --line-2: #2A2F35;
  --line-3: #353B42;

  /* 文字：主 → 次 → 弱 → 停用 */
  --fg: #E6E8EA;
  --mute: #A3AAB2;
  --dim: #8B939C;
  --faint: #6F767E;

  /* 強調色（紫）：即時指示、跡象、選取 */
  --accent: #A898F2;
  --accent-fg: #C3B8F7;
  --accent-bg: rgba(168, 152, 242, .12);

  /* 漲跌／買賣：台灣慣例，紅漲綠跌、紅買綠賣 */
  --up: #F0605D;
  --down: #3FC98A;
  --up-rgb: 240, 96, 93;
  --down-rgb: 63, 201, 138;

  /* 狀態 */
  --warn: #E8C877;
  --warn-line: #C9A24A;
  --bad: #F09A9A;
  --bad-line: #D46A6A;

  /* 字型：數字一律等寬 */
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --sans: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;

  /* 圓角：面板 / 按鈕 / 晶片 */
  --r-lg: 10px;
  --r-md: 6px;
  --r-sm: 4px;

  /* 間距：4px 基準 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* 版面 */
  --nav-h: 40px;
  --page-max: 1440px;
}

/* 淺色主題：在 <html> 加 data-theme="light"（頂列的切換鈕會設，並記在瀏覽器）。只換層次與文字色，漲跌色略加深保持對比。 */
:root { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F4F6;
  --bar: #FFFFFF;
  --panel: #FFFFFF;
  --panel-2: #EEF0F3;
  --panel-3: #E2E5E9;
  --line: #E3E6EA;
  --line-2: #D4D8DD;
  --line-3: #BFC5CC;
  --fg: #16191C;
  --mute: #4D555E;
  --dim: #6A727B;
  --faint: #8B939C;
  --accent: #6A5AE0;
  --accent-fg: #5345C9;
  --accent-bg: rgba(106, 90, 224, .12);
  --up: #D5463F;
  --down: #1E9A5F;
  --up-rgb: 213, 70, 63;
  --down-rgb: 30, 154, 95;
  --warn: #8F6E12;
  --warn-line: #C9A24A;
  --bad: #B93A32;
  --bad-line: #D46A6A;
}
:root[data-theme="light"][data-palette="intl"] { --up: #1E9A5F; --down: #D5463F; --up-rgb: 30, 154, 95; --down-rgb: 213, 70, 63; }
:root[data-theme="light"][data-palette="cvd"]  { --up: #C77A14; --down: #3A6FD8; --up-rgb: 199, 122, 20; --down-rgb: 58, 111, 216; }

/* 國際慣例（綠漲紅跌）與色弱友善配色：在 <html> 加 data-palette 即可整頁切換 */
:root[data-palette="intl"] { --up: #3FC98A; --down: #F0605D; --up-rgb: 63, 201, 138; --down-rgb: 240, 96, 93; }
:root[data-palette="cvd"]  { --up: #F2A33A; --down: #5B8DEF; --up-rgb: 242, 163, 58; --down-rgb: 91, 141, 239; }