/* 專業（compact；◇4.4 段 2b 照參考圖 01、04～08 重做，裁決 495(3)(4)）：淺灰底上的白色圓角卡片與細框、白色可收合的側欄、
   表頭有底色的表格、資料時點那一條是一排 KPI 卡（淡色底的圖示）。不是只有藍白兩色：主色靛紫，輔色天藍、紫、琥珀、粉、深藍
   （四個成分依序：上漲空間 chart-1、品質 chart-2、動能 chart-3、風險 chart-4）；紅綠只代表漲跌，不當類別色。起點是 495(4) 的表。
   西文、數字與標題都用 M10 Sans（Source Sans 3 的子集改名）；中文用系統黑體。
   風格檔只宣告 CSS 變數（裁決 485(3)）；漲跌四色是使用者定的（478(1)(iv)），不改。
   ★ 確認點 2（使用者 2026-10-16）：「多活用一點灰色，使區別更分明」、風格選單的灰「對比可以再強一點」——分隔線、表頭底、
   市場篩選的底槽、滑過的底加深；色票的灰改成看得出來的中灰。頁面的底色不能再深：綠字（不改）在底色上只剩 4.56:1。 */
:root[data-theme="pro"] {
  --color-bg: #F4F5F7;
  --color-surface: #FFFFFF;
  --color-ink: #18181B;
  --color-ink-muted: #52525B;
  --color-line: #DCDEE3;
  --color-border-strong: #8A8A94;
  --color-accent: #5750F1;
  --color-on-accent: #FFFFFF;
  --color-focus: #5750F1;
  --color-flag-info: #4338CA;
  --color-flag-warn: #B45309;
  --color-flag-block: #B91C1C;
  --tone-red: #C2352B;
  --tone-green: #17804A;
  --chart-1: #5750F1;
  --chart-2: #0369A1;
  --chart-3: #9333EA;
  --chart-4: #A16207;
  --chart-5: #DB2777;
  --chart-6: #1E3A8A;
  --range-track: #E4E4E7;
  --range-fill: #DCDAFD;
  --range-marker: #18181B;
  --range-below-zero: #B45309;
  --range-neutral: #5750F1;
  --font-heading: "M10 Sans", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", system-ui, sans-serif;
  --font-body: "M10 Sans", "Microsoft JhengHei UI", "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", system-ui, sans-serif;
  --font-numeric: "M10 Sans", "Segoe UI", "SF Pro Text", "Helvetica Neue", Roboto, "Microsoft JhengHei UI", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.75rem;
  --weight-regular: 400;
  --weight-strong: 600;
  --weight-display: 600;
  --tracking-heading: 0;
  --leading-tight: 1.25;
  --leading-body: 1.5;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 2rem;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --border-width: 1px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05);
  --motion-duration: 140ms;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --content-width: 90rem;
  --shell-bg: #FFFFFF;
  --shell-ink: #18181B;
  --shell-muted: #52525B;
  --shell-line: #E4E4E7;
  --nav-bg: #FFFFFF;
  --nav-active-bg: #EEF2FF;
  --band-bg: #F4F5F7;
  --thead-bg: #EDEEF1;
  --chip-info-bg: #EEF2FF;
  --chip-warn-bg: #FFFBEB;
  --hover-bg: #F5F6F8;
  --select-bg: #DCDAFD;
  --tint-1: #EEF2FF;
  --tint-2: #F0F9FF;
  --tint-3: #FAF5FF;
  --tint-4: #FFFBEB;
  --tint-5: #FDF2F8;
  --tone-red-bg: #FEF1EF;
  --tone-green-bg: #F0F9F4;
  --stamp-rotate: 0deg;
  --swatch-1: #C4C8D0;
  --swatch-2: #FFFFFF;
  --swatch-3: #5750F1;
  --data-thead-bg: #F0F4FF;
}