/* 使用 Tailwind CSS v4 的 Theme variable namespaces 功能，可以讓 Tailwind 自動產生對應的 utility class */
/* @see: https://tailwindcss.com/docs/theme#theme-variable-namespaces */

/* 相容舊樣式用的扁平變數（給 styles/sites/DN031 底下的 form/table/modal/layout 共用元件吃） */
@theme {
  --color-primary-200: #4aa9a2;
  --color-primary-300: #0289a1;
  --color-primary-400: #0289a1;
  --color-primary-500: #0289a1;
  --color-primary-600: #026e82;
  --color-primary-700: #014c5a;
  --color-secondary-400: #2cb986;
  --color-secondary-500: #2ecc71;
  --color-danger-400: #ff9fde;
  --color-danger-500: #e74c3c;
  --color-danger-600: #754b71;
  --color-success: #27ae60;
  --color-warning: #f39c12;
  --color-gray: #bdc3c7;
  --color-background: #faf4e3;
  --color-border: #fff;
  --color-text: #6a594e;
  --color-white: #ffffff;
  --color-navigation: #0289a1;
  --color-input: #ffffff;
}

/*
 * DN031 全站實際套用的色票（body 一律掛 dark-theme class，這不是「深色模式」，
 * 是本專案唯一實際生效的命名空間——見 apps/CA/src/app/global.css 每個 site-* layout.tsx。
 * 三層 token：Primitive → Semantic → Component，全部限定在 DN031 自己的 theme.css，
 * 不動 DN039 既有定義。
 */
@layer theme {
  .dark-theme {
    /*
     * Primitive：實測自 https://m.rong99.net/#/（devtools computed style，非肉眼截圖判斷）。
     * 命名純粹描述顏色本身（色相＋色階），不帶站台代碼與用途語意——用途語意留給 Semantic／Component 層。
     * 大寫開頭是刻意跟下方「相容舊樣式扁平變數」（小寫）區分，CSS 變數名稱區分大小寫，兩者是不同變數。
     */
    --color-Teal500: #0289a1; /* 頂部列／底部導覽 漸層起訖色 */
    --color-Teal400: #4aa9a2; /* 頂部列／底部導覽 漸層中間色 */
    --color-Cream100: #faf4e3; /* 內容區背景（main）／登入註冊藥丸文字色 */
    --color-Brown600: #6a594e; /* 主要文字／品牌文字色（選中態分類 Tab 容器文字，非其連結文字） */
    --color-White: #ffffff;
    --color-Black: #000000;

    /*
     * 分類 Tab：⚠ 這個名字先前誤植成「選中態」，實測後修正——
     * #d6e6d3 其實是「未選中」的底色，選中態走漸層（見 gradient.css 的
     * --gradient-TabActive），不是這個純色。
     */
    --color-Mint100: #d6e6d3; /* 左側分類 Tab 未選中底色 */
    --color-Aqua300: #94c4cc; /* 未選中邊框 */
    --color-Green600: #448872; /* 未選中連結文字色（不是 Brown600） */
    --color-Teal300: #92ccc7; /* 選中態邊框（漸層底之上仍有這條細邊） */

    /* 未登入頂部列「登入｜註冊」藥丸容器（單一容器包兩個連結，不是兩顆各自獨立的按鈕） */
    --color-Teal600: #279aa1;
    --color-Cyan400: #02dad7;
    /* 藥丸容器的外發光陰影色：實測 box-shadow computed 值 rgb(59,227,255) 0 0 8px 0，跟邊框色不同號 */
    --color-Cyan300: #3be3ff;

    /*
     * 桌面寬螢幕時，手機寬版型置中，body 露出的兩側遮罩色——實測是 body 本身的
     * rgba(0,0,0,0.6)（半透明黑蓋在瀏覽器預設白色 canvas 上），不是純色，
     * 也不是版型殼內容區的米色 --color-Cream100。
     */
    --color-BlackAlpha60: rgba(0, 0, 0, 0.6);

    /* 登入彈窗分頁（登入／註冊）選中態底線：實測自舊站 `.login-btn.active::after` */
    --color-Coral400: #ff8562;

    /*
     * 警示彈窗 error 圖示（空心圓框＋「!」）：實測舊站 SweetAlert2 的
     * `--exclamation-mark` CSS 變數值 #FFAF10——站方自己覆蓋過 SweetAlert2
     * 預設的 #f8bb86，不是套件原生顏色，也跟本站語意上的 --color-warning
     * (#f39c12) 是兩個不同色號，不能共用。
     */
    --color-Amber500: #ffaf10;

    /* 選取錢包彈窗標題旁「取回至主錢包」提示文字＋sync 圖示：實測自舊站 */
    --color-Orange500: #ff6b00;

    /* 語言下拉選單面板（`.langs-box`）：跟登入藥丸的 teal 不是同一個色號 */
    --color-Teal700: #1b94a1;
    /* 語言下拉選單「選中」列底色：實測是灰色，不是半透明白疊色 */
    --color-Gray700: #4b4b4b;
    /* 跑馬燈藥丸底色：實測是淺藍灰色，不是白色／米色卡片底（跟 Aqua300 同色號，各自量測、各自命名） */
    --color-SteelBlue300: #94c4cc;

    /*
     * 表格列分隔線／表頭底線：實測自「帳戶餘額」彈窗的錢包明細表格
     * （devtools computed border-bottom）。列分隔線是中性淺灰，表頭底線
     * 實際是白色（跟 teal 表頭色幾乎融在一起，不易肉眼分辨，故用 devtools 取值）。
     */
    --color-Gray300: #d9d9d9;

    /* 帳戶重複登入提示 Modal 的遮罩：實測自 https://m.rong99.net/#/（與 --color-BlackAlpha60
       是不同語意/不同 alpha 的兩個遮罩，不可共用） */
    --color-BlackAlpha50: rgba(0, 0, 0, 0.5);

    /* 跑馬燈點擊「最新消息」提示 Modal 內文下緣分隔線：實測自 https://m.rong99.net/#/
       的 `.v-divider`（devtools computed border-top），跟本文同一個 Brown600 但疊 50% 透明度 */
    --color-BrownAlpha50: rgba(106, 89, 78, 0.5);
    /* 新增銀行帳戶表單「上傳身分證正／反面」虛線框：實測自 https://m.rong99.net/#/
       WithdrawAccountManagement 的 `.upload_zone`（devtools computed border-color），
       同一個 Brown600 但疊 60% 透明度，跟上面的 50% 是不同 alpha，另開 Primitive */
    --color-BrownAlpha60: rgba(106, 89, 78, 0.6);

    /*
     * 全螢幕載入畫面：直接讀取舊站 index.html 原始碼裡內建的 `#loading-overlay`
     * 靜態 CSS（framework mount 前就顯示的畫面，不是 devtools 量測，是伺服器
     * 回傳的原始 HTML/CSS 原文，比 computed style 更直接可信）。
     */
    --color-Gray600: #555555;
    --color-Amber600: #ffa100;

    /* Lobby 頁遊戲卡片陰影：實測自 https://m.rong99.net/#/Lobby?game=AtgSlot
       的 `.game-item`（devtools computed box-shadow） */
    --color-BlackAlpha25: rgba(0, 0, 0, 0.25);

    /* 通用中性灰／半透明色階：陰影、遮罩、載入動畫軌道等非品牌色語意的元素用 */
    --color-Gray100: #f3f3f3;
    --color-BlackAlpha15: rgba(0, 0, 0, 0.15);
    --color-BlackAlpha20: rgba(0, 0, 0, 0.2);
    --color-BlackAlpha40: rgba(0, 0, 0, 0.4);
    --color-WhiteAlpha50: rgba(255, 255, 255, 0.5);
    --color-WhiteAlpha95: rgba(255, 255, 255, 0.95);
    /* 個人資訊頁「送出」按鈕 disabled 態疊色：實測自 https://m.rong99.net/#/MemberInfor
       的 `.submit-btn::after`（devtools computed background-image 第一層） */
    --color-WhiteAlpha40: rgba(255, 255, 255, 0.4);

    /* WalletCenter 頁「資金回收」按鈕 radial-gradient 兩端色：實測自
       https://m.rong99.net/#/WalletCenter（devtools computed background-image） */
    --color-Navy700: #202d4d;
    --color-Navy900: #0c1429;
    /* WalletCenter 頁餘額卡片內分隔線：實測自同頁 <hr>（devtools computed border-color），
       跟站內其餘分隔線（--color-BrownAlpha50）色號不同，另開 Primitive */
    --color-SlateBlue600: #2d4f6d;
    /* WalletCenter 頁重新整理圖示：實測自同頁（devtools computed color）。
       未套站內品牌色的中性 Vuetify 預設圖示色，跟 --color-BlackAlpha40/50/60 皆不同號 */
    --color-BlackAlpha54: rgba(0, 0, 0, 0.54);
    --color-BlackAlpha38: rgba(0, 0, 0, 0.38); /* 同上，停用狀態（資金回收倒數期間） */
    /* 投注記錄分頁器（react-paginate）數字按鈕文字：實測自 https://m.rong99.net/#/BetRecord，
       是 Vuetify 預設的高強調文字色（.v-pagination__item 內建 color: rgba(0,0,0,.87)），
       跟上面兩個同屬「未套品牌色的 Vuetify 預設中性色」家族，另開 Primitive */
    --color-BlackAlpha87: rgba(0, 0, 0, 0.87);
    /* 同一顆分頁器按鈕的 Material elevation 陰影（Vuetify elevation-2／4 固定值），
       跟既有 BlackAlpha20 同號那層可沿用，另外兩層（.14／.12）站內沒有現成 Primitive */
    --color-BlackAlpha14: rgba(0, 0, 0, 0.14);
    --color-BlackAlpha12: rgba(0, 0, 0, 0.12);

    /* 站內信列表信件主旨／預覽文字（已讀／寄件）：實測自 https://m.rong99.net/#/SiteMail
       的 `.text-info`／`.text-truncate`（devtools computed color），跟站內其餘中性灰
       （--color-Gray100/300/600/700）皆不同號，另開 Primitive */
    --color-Gray400: #999999;
    /* 站內信列表信件主旨／預覽文字（未讀）：實測自同頁未讀那筆信件的 `.text-info`
       （devtools computed color），跟已讀的中性灰是不同色號，另開 Primitive */
    --color-SlateBlue400: #8185a7;
    /* 站內信列表未讀圓點：實測自同頁 `.mail-item.un-read::after`（devtools computed
       background-color），跟站內其餘警示紅（--color-danger-500 #e74c3c）不同色號 */
    --color-Red400: #ff5c5c;

    /* 投注記錄「開始／結束時間」日期時間選擇彈窗：實測自 https://m.rong99.net/#/BetRecord
       （devtools computed style，元件是第三方 vue2-datepicker，沒有套用 DN031 品牌色，
       是套件原生配色，跟 --color-primary-500 那個 teal 是兩回事，故各自另開 Primitive） */
    --color-Blue500: #1284e7; /* 選中日期／選中時間數字：實測 rgb(18, 132, 231) */
    --color-SlateGray400: #73879c; /* 未選中文字（標題列箭頭／年月／日期數字／時間清單未選中項）：實測 rgb(115, 135, 156) */
    --color-Gray350: #cccccc; /* 停用日期（未來／跨月）文字：實測 rgb(204, 204, 204) */
    --color-Gray150: #e8e8e8; /* 分隔線（時間三欄之間／今日按鈕上緣）：實測 rgb(232, 232, 232) */

    /* Primitive：沿用既有色階命名，數值改用品牌色，供共用元件（modal/table/form）吃 */
    --color-primary-200: var(--color-Teal400);
    --color-primary-300: var(--color-Teal500);
    --color-primary-400: var(--color-Teal500);
    --color-primary-500: var(--color-Teal500);
    --color-primary-600: #026e82;
    --color-primary-700: #014c5a;
    --color-secondary-400: #2cb986;
    --color-secondary-500: #2ecc71;
    --color-danger-400: #ff9fde;
    --color-danger-500: #e74c3c;
    --color-danger-600: #754b71;
    --color-warning: #f39c12;
    --color-success: #27ae60;
    --color-input: var(--color-White);
    --color-navigation: var(--color-Teal500);
    --color-white: var(--color-White);
    --color-text: var(--color-Brown600);
    --color-border: var(--color-White);
    --color-background: var(--color-Cream100);
    --color-gray: #bdc3c7;

    /* Semantic */
    --color-surface-page: var(--color-Cream100);
    --color-surface-card: var(--color-White);
    --color-text-primary: var(--color-Brown600);
    --color-accent-tab-inactive: var(--color-Mint100);
    --color-icon-on-brand: var(--color-White);
    --color-border-modal: var(--color-White);
    --color-accent-highlight: var(--color-Coral400);
    --color-border-input: var(--color-Aqua300);
    --color-accent-glow: var(--color-Cyan300);
    --color-accent-alert-warning: var(--color-Amber500);
    --color-accent-transfer-back: var(--color-Orange500);
    --color-accent-link: var(--color-Green600);
    --color-accent-table-row-border: var(--color-Gray300);
    /* 表頭底線實測是白色，直接沿用既有的 --color-White，不另開 Primitive */
    --color-accent-table-header-border: var(--color-White);
    /* 表格欄與欄之間的直線分隔（第一欄不用）：實測自 https://m.rong99.net/#/WalletCenter
       表身 td 的 border-left（devtools computed），跟列分隔線 --color-accent-table-row-border
       是不同色號（20% 透明黑，非中性灰），另開 Semantic；沿用既有的 --color-BlackAlpha20 不另開 Primitive */
    --color-accent-table-column-divider: var(--color-BlackAlpha20);
    /* 表頭底色：實測跟未登入頂部列「登入｜註冊」藥丸容器同一個色號，非漸層，故沿用 --color-Teal600 */
    --color-accent-table-header-bg: var(--color-Teal600);
    --color-overlay-modal: var(--color-BlackAlpha50);
    --color-border-notice-divider: var(--color-BrownAlpha50);
    /* 帳戶餘額彈窗「全部錢包餘額」金額：實測跟未選中分類 Tab 底線同一個 Coral400 */
    --color-accent-balance-amount: var(--color-Coral400);
    --color-overlay-loading: var(--color-Gray600);
    --color-accent-loading-dot: var(--color-Amber600);
    /* Lobby 頁面背景／分類下拉＋搜尋框邊框：實測都跟既有分類 Tab 未選中色號同號，沿用不新開 Primitive */
    --color-surface-lobby-page: var(--color-Mint100);
    --color-border-select: var(--color-Aqua300);
    --color-shadow-card: var(--color-BlackAlpha25);
    --color-accent-verify-button-bg: var(--color-Black);
    /* WalletCenter 頁餘額卡片內分隔線，跟站內其餘分隔線（--color-border-notice-divider）語意不同，另開 Semantic */
    --color-accent-wallet-divider: var(--color-SlateBlue600);
    /* WalletCenter 頁重新整理圖示：未套品牌色的中性圖示語意 */
    --color-icon-muted: var(--color-BlackAlpha54);
    --color-icon-muted-disabled: var(--color-BlackAlpha38);
    /* WithdrawAccountManagement 頁銀行卡片「審核成功」狀態：實測跟未登入頂部列登入藥丸邊框同一個 Cyan400，另開語意 */
    --color-accent-status-approved: var(--color-Cyan400);
    /* 站內信分類 Tab 選中態底線：實測跟上面「審核成功」同一個 Cyan400，語意不同另開 Semantic */
    --color-accent-tab-underline-mail: var(--color-Cyan400);
    /* 站內信列表信件主旨／預覽文字（已讀／寄件）中性灰語意 */
    --color-text-muted: var(--color-Gray400);
    /* 站內信列表信件主旨／預覽文字（未讀） */
    --color-text-mail-unread: var(--color-SlateBlue400);
    /* 站內信列表未讀信件的日期：實測未讀那筆是純黑（跟已讀日期的中性灰不同），語意上是「強調」而非另一種中性色 */
    --color-text-mail-date-unread: var(--color-Black);
    /* 站內信列表未讀圓點 */
    --color-accent-mail-unread-dot: var(--color-Red400);
    /* 投注記錄日期時間選擇彈窗：選中日期／時間 */
    --color-accent-datetime-selected: var(--color-Blue500);
    /* 投注記錄日期時間選擇彈窗：未選中文字（跟全站既有 --color-text-muted 色號不同，各自開 Semantic） */
    --color-text-datetime-muted: var(--color-SlateGray400);
    /* 投注記錄日期時間選擇彈窗：停用日期文字 */
    --color-text-datetime-disabled: var(--color-Gray350);
    /* 投注記錄日期時間選擇彈窗：分隔線 */
    --color-border-datetime-divider: var(--color-Gray150);
    /* 投注記錄分頁器（react-paginate）數字/箭頭按鈕文字 */
    --color-text-pagination-item: var(--color-BlackAlpha87);
    /* 投注記錄分頁器數字/箭頭按鈕底色：實測是白色，跟卡片/Modal 白同色號，沿用既有 Primitive */
    --color-surface-pagination-item: var(--color-White);
    /* 投注記錄分頁器目前頁碼按鈕底色：實測跟未登入頂部列登入藥丸／表頭底色同一個 Teal600 色號 */
    --color-accent-pagination-active: var(--color-Teal600);
    /* 投注記錄分頁器 Material elevation 陰影三層色（Vuetify elevation-2／4 共用同一組 alpha） */
    --color-shadow-pagination-umbra: var(--color-BlackAlpha20);
    --color-shadow-pagination-penumbra: var(--color-BlackAlpha14);
    --color-shadow-pagination-ambient: var(--color-BlackAlpha12);

    /* 補齊三層架構：以下 Component 原本直接引用 Primitive、跳過本層，統一補上對應 Semantic */
    --color-text-on-brand: var(--color-White);
    /* 米色文字疊在品牌色底上：登入藥丸文字／語言下拉選中文字同色號，共用同一個 Semantic */
    --color-text-cream-on-brand: var(--color-Cream100);
    --color-border-tab-active: var(--color-Teal300);
    --color-surface-login-pill: var(--color-Teal600);
    --color-border-login-pill: var(--color-Cyan400);
    --color-surface-lang-dropdown: var(--color-Teal700);
    --color-surface-marquee: var(--color-SteelBlue300);
    /* 表單欄位（input/upload/select）邊框：跟既有分類 Tab／輸入框未選中邊框是不同色號，另開 Semantic */
    --color-border-form-field: var(--color-Teal400);
    /* 語言下拉選單「選中」列底色：跟未選中底色不同語意，另開 Semantic（沿用既有 Gray700 Primitive） */
    --color-surface-lang-selected: var(--color-Gray700);
    /* 載入動畫 spinner 的底環軌道色（中性淺灰，非品牌色） */
    --color-border-spinner-track: var(--color-Gray100);
    /* 遊戲內滑動提示遮罩／指示箭頭：全螢幕遊戲手勢引導專用，跟其餘 Modal 遮罩語意不同 */
    --color-overlay-swipe: var(--color-BlackAlpha40);
    --color-accent-swipe-indicator: var(--color-WhiteAlpha95);
    /* Banner 輪播未選中圓點：半透明白疊在圖片上 */
    --color-accent-dot-inactive: var(--color-WhiteAlpha50);
    /* 語言下拉選單陰影／註冊表單國碼下拉選單陰影：視覺相近但非同一元件，各自開 Semantic */
    --color-shadow-lang-dropdown: var(--color-BlackAlpha20);
    --color-shadow-select-dropdown: var(--color-BlackAlpha15);
    /* 個人資訊頁唯讀欄位（暱稱／國碼／手機號碼／身分證）疊色：實測自舊站
       `.input-wrap`（devtools computed background-image），跟輸入框未選中邊框
       共用同一組白底＋邊框，只多疊這層灰讓唯讀欄位視覺上變暗 */
    --color-overlay-input-disabled: var(--color-BlackAlpha20);
    /* 個人資訊頁「送出」按鈕 disabled 疊色，跟表單欄位唯讀疊色語意不同（一個疊在白底、一個疊在品牌漸層上），各自開 Semantic */
    --color-overlay-button-disabled: var(--color-WhiteAlpha40);

    /* Component */
    --color-PageBg: var(--color-surface-page);
    --color-CardBg: var(--color-surface-card);
    --color-TextPrimary: var(--color-text-primary);
    --color-TabInactiveBg: var(--color-accent-tab-inactive);
    /* 未選中邊框跟輸入框未選中邊框同一個色號，沿用 --color-border-input 不另開 Primitive */
    --color-TabInactiveBorder: var(--color-border-input);
    --color-TabInactiveText: var(--color-accent-link);
    --color-TabActiveBorder: var(--color-border-tab-active);
    --color-TabActiveText: var(--color-text-on-brand);
    --color-NavIconColor: var(--color-icon-on-brand);
    --color-ModalBorder: var(--color-border-modal);
    --color-LoginPillBg: var(--color-surface-login-pill);
    --color-LoginPillBorder: var(--color-border-login-pill);
    --color-LoginPillText: var(--color-text-cream-on-brand);
    --color-LoginPillGlow: var(--color-accent-glow);
    --color-LangDropdownBg: var(--color-surface-lang-dropdown);
    --color-LangDropdownText: var(--color-text-cream-on-brand);
    --color-MarqueeBg: var(--color-surface-marquee);
    --color-TabUnderline: var(--color-accent-highlight);
    --color-InputBorder: var(--color-border-input);
    /* 彈窗內捲軸滑塊：跟輸入框未選中邊框同一個色號，DN031 卡片底是淺色，
       用同一組已經在用的柔和藍綠色，不用另外新增 Primitive */
    --color-ScrollbarThumb: var(--color-border-input);
    --color-AlertWarningIcon: var(--color-accent-alert-warning);
    --color-TransferBackTip: var(--color-accent-transfer-back);
    /* 註冊表單提示文字（帳號規則／密碼規則）：實測跟簡訊未收到提示是同一個 coral-400，語意不同故各自開 Component 名 */
    --color-HintText: var(--color-accent-highlight);
    /* 註冊表單必填欄位提示星號（例：*會員帳號）：實測自 https://m.rong99.net/#/ 註冊彈窗，跟簡訊未收到提示同一個 coral-400 */
    --color-RequiredMark: var(--color-accent-highlight);
    /* 註冊表單「用戶註冊協議」連結字：實測跟未選中分類 Tab 文字同色號 */
    --color-RegisterLinkText: var(--color-accent-link);
    /* 手機驗證碼「取得驗證碼」按鈕底色：實測跟輸入框未選中邊框同色號，沿用 --color-border-input */
    --color-OtpButtonBg: var(--color-border-input);
    /* 手機驗證碼欄位「取得驗證碼」按鈕底色：實測自 .get-mobile-verification-code，純黑 */
    --color-VerifyCodeButtonBg: var(--color-accent-verify-button-bg);
    /* 表格列分隔線／外框（table.ts 的 wrapperStyles 外框沿用表頭同色，見上方 Primitive 註解） */
    --color-TableRowBorder: var(--color-accent-table-row-border);
    --color-TableColumnDivider: var(--color-accent-table-column-divider);
    --color-TableHeaderBorder: var(--color-accent-table-header-border);
    --color-TableHeaderBg: var(--color-accent-table-header-bg);
    --color-ModalOverlay: var(--color-overlay-modal);
    --color-NoticeDivider: var(--color-border-notice-divider);
    --color-BalanceAmount: var(--color-accent-balance-amount);
    --color-LoadingOverlayBg: var(--color-overlay-loading);
    --color-LoadingDot: var(--color-accent-loading-dot);
    --color-LobbyPageBg: var(--color-surface-lobby-page);
    --color-SelectBorder: var(--color-border-select);
    --color-CardShadow: var(--color-shadow-card);
    /* 品牌色底上的白色文字：表單送出按鈕／彈窗按鈕／表格表頭文字共用 */
    --color-TextOnBrand: var(--color-text-on-brand);
    --color-FormFieldBorder: var(--color-border-form-field);
    --color-LangDropdownSelectedBg: var(--color-surface-lang-selected);
    --color-SpinnerTrack: var(--color-border-spinner-track);
    --color-SwipeOverlayBg: var(--color-overlay-swipe);
    --color-SwipeIndicator: var(--color-accent-swipe-indicator);
    --color-InputDisabledOverlay: var(--color-overlay-input-disabled);
    --color-ButtonDisabledOverlay: var(--color-overlay-button-disabled);
    --color-CarouselDotInactive: var(--color-accent-dot-inactive);
    --color-LangDropdownShadow: var(--color-shadow-lang-dropdown);
    --color-SelectDropdownShadow: var(--color-shadow-select-dropdown);
    --color-MailTabUnderline: var(--color-accent-tab-underline-mail);
    --color-MailSubjectRead: var(--color-text-muted);
    --color-MailPreviewText: var(--color-text-muted);
    --color-MailSubjectUnread: var(--color-text-mail-unread);
    --color-MailDateUnread: var(--color-text-mail-date-unread);
    --color-MailUnreadDot: var(--color-accent-mail-unread-dot);
    /* 會員中心卡片外框：實測跟表單欄位未選中邊框同色號，沿用 --color-border-input 不另開 Primitive */
    --color-CardBorder: var(--color-border-input);
    /* 變更密碼頁頂部提示條底色：實測自 https://m.rong99.net/#/ChangePassword，跟警示彈窗 exclamation 圖示同色號，沿用 --color-accent-alert-warning 不另開 Primitive */
    --color-NoteBannerBg: var(--color-accent-alert-warning);
    /* 變更密碼頁面背景：實測自 https://m.rong99.net/#/ChangePassword 的 <main>，跟 Lobby 頁同號 mint 綠，沿用既有 --color-surface-lobby-page（不是全站共用米色 --color-PageBg），不另開 Primitive */
    --color-ChangePasswordPageBg: var(--color-surface-lobby-page);
    /* 投注記錄頁面背景：實測自 https://m.rong99.net/#/BetRecord 的 <main>，跟 Lobby／變更密碼頁同號 mint 綠，沿用既有 --color-surface-lobby-page，不另開 Primitive */
    --color-BetRecordPageBg: var(--color-surface-lobby-page);
    /* 投注記錄頁卡片外框：實測跟變更密碼頁卡片同一個 Aqua300 色號，沿用 --color-border-input 不另開 Primitive */
    --color-BetRecordCardBorder: var(--color-border-input);
    /* 投注記錄頁查詢結果每列「展開明細」右箭頭：實測 https://m.rong99.net/#/BetRecord
       devtools 是 Material Icons 的 chevron_right，色號跟 WalletCenter 重新整理圖示同一個
       半透明黑（.54 alpha），沿用既有 --color-icon-muted 不另開 Primitive */
    --color-BetRecordRowArrow: var(--color-icon-muted);
    /* 投注記錄分頁器（react-paginate）數字/箭頭按鈕底色與文字 */
    --color-BetRecordPaginationItemBg: var(--color-surface-pagination-item);
    --color-BetRecordPaginationItemText: var(--color-text-pagination-item);
    /* 投注記錄分頁器目前頁碼按鈕底色 */
    --color-BetRecordPaginationActiveBg: var(--color-accent-pagination-active);
    /* 投注記錄分頁器 Material elevation 陰影三層色 */
    --color-BetRecordPaginationShadowUmbra: var(--color-shadow-pagination-umbra);
    --color-BetRecordPaginationShadowPenumbra: var(--color-shadow-pagination-penumbra);
    --color-BetRecordPaginationShadowAmbient: var(--color-shadow-pagination-ambient);
    /* WalletCenter 頁面背景：實測自 https://m.rong99.net/#/WalletCenter 的 <main>，跟 Lobby／
       變更密碼／投注記錄／OnlineServices 頁同號 mint 綠，沿用既有 --color-surface-lobby-page，不另開 Primitive */
    --color-WalletCenterPageBg: var(--color-surface-lobby-page);
    /* WalletCenter 頁餘額卡片分隔線 <hr> */
    --color-WalletDivider: var(--color-accent-wallet-divider);
    /* WalletCenter 頁重新整理圖示：未停用／停用（資金回收倒數期間）兩態 */
    --color-WalletRefreshIcon: var(--color-icon-muted);
    --color-WalletRefreshIconDisabled: var(--color-icon-muted-disabled);
    /* WalletCenter 頁「資金回收」按鈕邊框：實測是白色，跟 Modal 邊框同色號，沿用 --color-border-modal 不另開 Primitive */
    --color-WalletRecoveryButtonBorder: var(--color-border-modal);
    /* WithdrawAccountManagement 頁銀行卡片審核狀態徽章：審核成功／審核中兩態 */
    --color-BankStatusApproved: var(--color-accent-status-approved);
    /* 審核中：實測跟警示彈窗 exclamation 圖示同色號，沿用既有 --color-accent-alert-warning 不另開 Semantic */
    --color-BankStatusPending: var(--color-accent-alert-warning);
    /* 審核失敗：實測自 https://m.rong99.net/#/WithdrawAccountManagement 的 `.audit-failed`
       （devtools computed color／border-color 皆為 rgb(255, 92, 92)），跟站內信未讀圓點同一個
       --color-Red400，沿用不另開 Primitive */
    --color-BankStatusFailed: var(--color-Red400);
    /* OnlineServices 頁面背景：實測自 https://m.rong99.net/#/OnlineServices 的 <main>，跟 Lobby／
       變更密碼／投注記錄頁同號 mint 綠，沿用既有 --color-surface-lobby-page，不另開 Primitive */
    --color-OnlineServicePageBg: var(--color-surface-lobby-page);
    /* WithdrawAccountManagement 頁面背景：實測自 https://m.rong99.net/#/WithdrawAccountManagement 的 <main>，跟
       Lobby／變更密碼／投注記錄／WalletCenter／OnlineServices 頁同號 mint 綠，沿用既有 --color-surface-lobby-page，不另開 Primitive */
    --color-WithdrawAccountManagementPageBg: var(--color-surface-lobby-page);
    /* 新增銀行帳戶表單「上傳身分證正／反面」虛線框：沿用 --color-BrownAlpha60，不另開 Semantic */
    --color-UploadZoneBorder: var(--color-BrownAlpha60);
    /* 站內信頁面背景：實測自 https://m.rong99.net/#/SiteMail 的 <main>，跟 Lobby／變更密碼／
       投注記錄／WalletCenter／OnlineServices／WithdrawAccountManagement 頁同號 mint 綠，沿用既有
       --color-surface-lobby-page，不另開 Primitive */
    --color-SiteMailPageBg: var(--color-surface-lobby-page);
    /* 會員中心頁面背景：實測自 https://m.rong99.net/#/MemberInfor 的 <main>，跟 Lobby／變更密碼／
       投注記錄／WalletCenter／OnlineServices／WithdrawAccountManagement／SiteMail 頁同號 mint 綠，
       沿用既有 --color-surface-lobby-page，不另開 Primitive */
    --color-MemberInfoPageBg: var(--color-surface-lobby-page);
    /* 投注記錄日期時間選擇彈窗（TimeRangeSelector／DateTimeField／WheelTimePicker 共用，見
       packages/shared/pages/.../theme-07/bet-record/components/TimeRangeSelector/dateTimePickerColors.ts） */
    --color-DateTimePickerSelected: var(--color-accent-datetime-selected);
    --color-DateTimePickerMuted: var(--color-text-datetime-muted);
    --color-DateTimePickerDisabledText: var(--color-text-datetime-disabled);
    --color-DateTimePickerDivider: var(--color-border-datetime-divider);
  }
}