/*
 * L1 橋接層：把公司規範的 token 指派給 Radzen 的主題變數
 * ---------------------------------------------------------------------------
 * Rating 的按鈕、表格、彈窗、表單幾乎 100% 是 Radzen 元件，無法直接套用規範的
 * Bootstrap class。Radzen material 主題提供完整的 CSS 變數 API，本檔以此為唯一
 * 介面——改一個變數就能讓整片元件符合規範，不必逐條複寫 .rz-* class。
 *
 * 兩條鐵律（Spec §4.4）
 *   1. 右值只能是 var(...)，不得出現任何字面色碼、px 或 rem。
 *      這是「不建立第二套 Design System」的機械化保證，可用 lint 檢查。
 *   2. 不得指派 --rz-card-* 與 --rz-base-* 系列。
 *      ReportPage 把 RatingIt 整個 dashboard（含 RadzenCard）嵌進 A4 列印頁
 *      （ReportPage.razor:606-620），動這兩組會從側面改到報告輸出，
 *      而 A4 報告的驗收條件是與基準像素級一致。
 *
 * 選擇器用 :root：Radzen 的變數也宣告在 :root（已實查），同 specificity 下
 * 後載入者勝，因此本檔必須排在 Radzen 主題之後。載入順序見 App.razor。
 *
 * ---------------------------------------------------------------------------
 * 本階段（#4）刻意不改變任何顏色
 *
 * 目的是把「管線壞了」和「顏色不對」拆成兩個可分開診斷、分開回退的事件。
 * 本檔上線後若畫面有任何變化，那就是載入順序或 specificity 出了問題，
 * 與色彩決策無關。
 *
 * 下面每條指派都與 Radzen material 主題的原始定義完全相同（逐條實查對照），
 * 因此計算結果不變，但變數的來源檔會變成本檔——這正是要驗證的東西。
 *
 * 為什麼只橋接這幾條，而不包含 --rz-primary 等語意色：
 * Radzen 把語意色直接定義成字面 hex（--rz-primary: #4340D2），沒有底層調色盤
 * 變數可以引用。要在本階段讓 bridge 成為 --rz-primary 的來源、又不寫字面值，
 * 兩者無法同時成立。因此語意色留到 #5 一次指向 var(--yc-*)，屆時右值天然是
 * var()，鐵律 1 自動滿足。
 * ---------------------------------------------------------------------------
 */

:root {
  /* --- 以下四條與 Radzen material 的定義逐字相同，本階段為 no-op ---

     原本還列了 --rz-base-background-color: var(--rz-white)，但那屬於鐵律 2
     禁止的 --rz-base-* 系列，已移除。本階段指派它是 no-op 不會出事，但會替
     #5 立下壞的先例——A4 報告正是靠這條規則保護的。 */

  /* Radzen 原定義：var(--rz-base-800)。#5 之後可能改指向規範的主文字色，
     但規範目前沒有主文字色 token（Spec §10.2 B10），故暫時維持。 */
  --rz-text-color: var(--rz-base-800);

  /* Radzen 原定義：var(--rz-text-color) */
  --rz-input-value-color: var(--rz-text-color);

  /* Radzen 原定義：var(--rz-text-color) */
  --rz-grid-cell-color: var(--rz-text-color);

  /* Radzen 原定義：var(--rz-base-50)。#5 之後改指向 --yc-color-table-stripe。 */
  --rz-grid-stripe-background-color: var(--rz-base-50);
}

/*
 * ===========================================================================
 * 語意色（#5）—— 全站視覺變動最大的一段，但只是一組變數的值
 * ===========================================================================
 * Radzen 每個語意有五階：base / light / lighter / dark / darker，而規範只給
 * 兩階（500 與 600）。若只換 base，其餘三階會留在 Radzen 的原色家族——藍色
 * 按鈕配紫色 alert。實查這些變體在 Radzen CSS 內的引用次數：
 *   primary  base 99  light 31  lighter 56  dark 28  darker 27
 * 用得很兇，不能不管。
 *
 * 對應方式：
 *   base    → 規範的 500
 *   dark    → 規範的 600（規範明訂的 hover 色，手挑的、不是等比）
 *   light   → base 混白 80%     ┐ 規範沒有這兩階，
 *   darker  → dark 混黑 85%     ┘ 以 Radzen 自己的比例衍生，維持原本的視覺關係
 *   lighter → base 12% 透明度（Radzen 的 -lighter 一律是低透明度底色）
 *
 * Radzen 各階的比例是實測得出的：light = base 80% + 白、dark = base 80% + 黑、
 * darker = base 69% + 黑、lighter = rgba(base, .12)。此處 dark 改用規範的 600，
 * darker 因而改為從 600 再往下 85%，以確保 base > dark > darker 的明度單調。
 * 五組色階的明度遞減已逐一驗算。
 *
 * 混色用的白與黑取自規範的 --yc-color-white / --yc-color-black（皆 T1），
 * 不寫 CSS 關鍵字，鐵律 1 因此仍然成立。
 *
 * color-mix() 需要 Chrome 111+。專案支援的瀏覽器是 Chrome 與 Edge
 * （browserResize.js 註解明載），實測環境為 Chrome 150 / Edge 151。
 * ===========================================================================
 */

:root {
  /* --- primary：#4340D2 → #0170c2 --------------------------------------- */
  --rz-primary: var(--yc-color-primary);
  --rz-primary-light: color-mix(in srgb, var(--yc-color-primary) 80%, var(--yc-color-white));
  --rz-primary-lighter: color-mix(in srgb, var(--yc-color-primary) 12%, transparent);
  --rz-primary-dark: var(--yc-color-primary-hover);
  --rz-primary-darker: color-mix(in srgb, var(--yc-color-primary-hover) 85%, var(--yc-color-black));

  /* --- success：#4caf50 → #37ad52 --------------------------------------- */
  --rz-success: var(--yc-color-success);
  --rz-success-light: color-mix(in srgb, var(--yc-color-success) 80%, var(--yc-color-white));
  --rz-success-lighter: color-mix(in srgb, var(--yc-color-success) 12%, transparent);
  --rz-success-dark: var(--yc-color-success-hover);
  --rz-success-darker: color-mix(in srgb, var(--yc-color-success-hover) 85%, var(--yc-color-black));

  /* --- danger：#f44336 → #ec0000 ---------------------------------------- */
  --rz-danger: var(--yc-color-danger);
  --rz-danger-light: color-mix(in srgb, var(--yc-color-danger) 80%, var(--yc-color-white));
  --rz-danger-lighter: color-mix(in srgb, var(--yc-color-danger) 12%, transparent);
  --rz-danger-dark: var(--yc-color-danger-hover);
  --rz-danger-darker: color-mix(in srgb, var(--yc-color-danger-hover) 85%, var(--yc-color-black));

  /* --- warning：#ff9800 → #fe9900 --------------------------------------- */
  --rz-warning: var(--yc-color-warning);
  --rz-warning-light: color-mix(in srgb, var(--yc-color-warning) 80%, var(--yc-color-white));
  --rz-warning-lighter: color-mix(in srgb, var(--yc-color-warning) 12%, transparent);
  --rz-warning-dark: var(--yc-color-warning-hover);
  --rz-warning-darker: color-mix(in srgb, var(--yc-color-warning-hover) 85%, var(--yc-color-black));

  /* --- info：#2196f3 → #1d8ddf ------------------------------------------
     規範沒有 info 色。它的五種按鈕語意不含 info，而「YC 資訊訊息彈窗」在 Figma
     裡是點陣圖（image 47），抽不出色值。

     Rating 有 37 處在用，且主要不是按鈕：BadgeStyle.Info 22、
     NotificationSeverity.Info 9、AlertStyle.Info 4、ButtonStyle.Info 2。
     它實際上是狀態／資訊色。

     指向 --yc-blue-400（T1）而非維持 Radzen 的 #2196f3：兩者 RGB 距離僅 22，
     視覺幾乎無變化，但 blue-400 與 primary 同屬規範的藍色階，看起來是刻意的；
     若維持 #2196f3，畫面上會同時有兩種來源不同的藍，正是本案要消滅的問題。
     與 primary 的距離 70，不會混淆。

     dark 用 --yc-blue-500（即 primary 的 base）——同一條色階的下一階，
     hover 時自然變深。已登記為偏離：規範未涵蓋，此對應是本專案決定的。 */
  --rz-info: var(--yc-blue-400);
  --rz-info-light: color-mix(in srgb, var(--yc-blue-400) 80%, var(--yc-color-white));
  --rz-info-lighter: color-mix(in srgb, var(--yc-blue-400) 12%, transparent);
  --rz-info-dark: var(--yc-blue-500);
  --rz-info-darker: var(--yc-blue-600);

  /* --- secondary：#e31c65 → #6c757d --------------------------------------
     規範的 btn-secondary 是「詳細資訊、進入頁面、其他按鈕」，色為灰
     （--yc-gray-500，見 Spec 附錄 C.1）。Radzen material 的預設是桃紅 #e31c65，
     在畫面上比 primary 還搶眼，與「其他按鈕」的語意完全相反。

     換色的前提是先修 ButtonStyle：否則主要操作會變成看起來可忽略的灰按鈕。
     本 commit 已同步修正 4 處誤用（ADD LOAN、SAVE DRAFT LOANS、REMIT 送出改
     primary，CompanyIt 取消改 danger），剩下 7 處經逐一比對確認語意正確。

     Spec 附錄 C.1 原記「11 處中有 6 處用錯」，該表已過時：其中 CompanyIt 儲存
     與 UserIt 儲存在 commit 4281a8c 之後已改為 Success，不再是 Secondary。
     實際待修為 4 處。C.1 已更正。

     dark 用 base 80% + 黑：規範沒有 secondary hover 色（其餘四個語意都有 -600
     階，只有灰色階沒有）。實測規範四組 500→600 的比例落在 76–85%，取 80%
     （即 green 的比例，也是區間中位），得 #565e64，白字對比 6.6:1。
     已登記為偏離：規範未涵蓋，此推導是本專案決定的。 */
  --rz-secondary: var(--yc-color-secondary);
  --rz-secondary-light: color-mix(in srgb, var(--yc-color-secondary) 80%, var(--yc-color-white));
  --rz-secondary-lighter: color-mix(in srgb, var(--yc-color-secondary) 12%, transparent);
  --rz-secondary-dark: color-mix(in srgb, var(--yc-color-secondary) 80%, var(--yc-color-black));
  --rz-secondary-darker: color-mix(in srgb, var(--yc-color-secondary) 68%, var(--yc-color-black));
}

/*
 * ---------------------------------------------------------------------------
 * #7 會加入 --rz-grid-* 的表格外觀，取代 HomePage.razor 現有的 22 條手工
 * .rz-* 覆寫。
 * ---------------------------------------------------------------------------
 */
