/* =============================================================================
   設計代幣　tokens.css
   依據：DESIGN_SYSTEM.md 第 1 節

   這是全系統唯一的顏色、字級與間距來源。

   顏色不設白名單（業主裁示 2026-07-29，原「不得引入色票外顏色」已取消）。
   唯一的規則是：**同一個顏色只能有一個出處**——要新色就在這裡加一個代幣，
   畫面一律引用變數、不寫死色碼。否則同一種青會慢慢長出三種色碼，
   改一次得找遍全部檔案。

   為什麼字級與間距寫成 rem：
     使用者可自選字型大小 5pt–48pt（DESIGN_SYSTEM §1「字型大小」）。
     若寫死 px，放大時只有文字變大、容器不動，大字級必定爆版。
     以 rem 表述並讓根字級隨 --ui-pt 變動，整套版面等比放大，比例關係不變。
     代幣的「基準值」完全沒變——預設 12pt 恰為 16px（96dpi），
     1rem = 16px、0.875rem 就是原本的 14px，畫面與原設計完全一致。
   ============================================================================= */

/* -----------------------------------------------------------------------------
   配色的出處（業主指示 2026-07-30）
   -----------------------------------------------------------------------------
   主色為 深藍、淺藍、深綠、淺綠、黑、灰；其他色系可用以吸引注意，但不得太鮮豔。

   深藍與深綠不是我挑的，是從遠山海的標誌量出來的。標誌三個元素各取端點：
     海（藍浪）　最深 #1637BA　平均 #2887D0　最淺 #60C0F0
     山（綠峰）　最深 #0D6C40　平均 #489850
     遠（淺綠葉）最深 #5DA55C　平均 #7BBC7E
   標誌本身相當飽和（那是印刷用的識別色），直接搬進畫面會刺眼——整片畫面
   長時間看的東西，飽和度要比一個小標誌低。所以取其色相、降其彩度：
     藍　色相 210° 前後（浪的平均是 207°）
     綠　色相 155°（峰底的青綠）與 125°（葉的草綠）兩支
   黑與灰帶一點藍味（不是中性灰），整體才與標誌同一家族。

   改配色一律跑 scripts/check-palette.mjs，全綠才算改完——配色靠目測會出事，
   而且是看不出來的出事（詳見該檔開頭）。
   ----------------------------------------------------------------------------- */

:root {
  /* ---- 基礎色：版面骨架與文字 ---- */
  --ink:      #14222C;   /* 黑：主文字。帶藍味，與標誌同家族 */
  --brand:    #125C99;   /* 深藍：H 標題、頂欄漸層起點 */
  --brand-2:  #52B0E6;   /* 淺藍：頂欄漸層終點、hover */
  --wash:     #E4F2FD;   /* 淺藍淡底：選中態、資訊晶片底 */
  --paper:    #F5F9FD;   /* 頁面底色：近白，帶一點藍 */
  --line:     #CFE1EF;   /* 灰：一切邊框與分隔線 */
  --mut:      #566D7E;   /* 灰：次要文字 */
  --val:      #1652C2;   /* 藍：使用者填入的資料值（欄位標題黑、資料藍——業主指示 2026-08-06） */

  /* ---- 語義色：狀態的意義固定，不可挪作裝飾 ----
     紅＝今天必須處理　橙＝留意　綠＝正常（安靜，不吸睛）　藍＝中性資訊
     三色皆可作實色底配白字（對白字 4.5:1 以上），晶片因此是彩色藥丸而非淡標籤。

     全部降過彩度（業主指示「不要太鮮豔」）：紅由鮮紅改磚紅、橙由亮橙改赭黃、
     綠由螢光綠改森綠。降彩度之後仍要能一眼分辨「必須處理」與「留意」，
     所以三色彼此的 ΔE 由檢查腳本把關（需 ≥ 25）。 */
  --amber:    #916302;   --amber-v: #F2C55F;   --amber-bg: #FDF6E2;
  --red:      #C23829;   --red-v:   #F68475;   --red-bg:   #FEEEEB;
  --green:    #0E7F53;   --green-v: #52CB98;   --green-bg: #E3F9EE;

  /* ---- 分類色：每個選單分組一色 ----
     二十幾個項目靠文字掃描太慢，顏色是最快的分辨方式。
     每色三階，用途分明——混用會出事：
       --cN     深字階：白底上的文字、主按鈕底（另混深色以確保白字對比）
       --cN-v   鮮明階：色塊來源（取七成配深色字）、圖示、色條、hover
       --cN-bg  淡底階：表頭底、隔列、hover 底
     色塊一律由鮮明階調出，不由深字階調——深字階夠深才能當文字，
     拿它調色塊會調出暗紅、土褐這類沉悶的顏色。

     排序刻意讓「主色」先出場：前四個是深藍、淺藍、深綠、淺綠（標誌色系），
     第五、六個才是點綴用的赭黃與磚紅。目前的六個選單大項就吃前六色，
     所以使用者最常看到的正是品牌色。第七色之後為日後新增分組備用，
     一律低彩度的鄰近色與少數點綴色。 */
  --c1:  #125C99;  --c1-v:  #5FB4EA;  --c1-bg:  #E6F2FC;   /* 深藍（標誌·海） */
  --c2:  #03718F;  --c2-v:  #5DDCF2;  --c2-bg:  #E7FAFE;   /* 淺藍 */
  --c3:  #067A5B;  --c3-v:  #43C9A0;  --c3-bg:  #E2F9F0;   /* 深綠（標誌·山） */
  --c4:  #2A8031;  --c4-v:  #77D67B;  --c4-bg:  #E9FAE9;   /* 淺綠（標誌·遠） */
  --c5:  #916302;  --c5-v:  #F2C55F;  --c5-bg:  #FDF6E2;   /* 亮金 */
  --c6:  #B54533;  --c6-v:  #F68475;  --c6-bg:  #FEEEEB;   /* 珊瑚 */
  --c7:  #5850A3;  --c7-v:  #A79EEB;  --c7-bg:  #EFEDFC;   /* 藍紫 */
  --c8:  #096982;  --c8-v:  #55C3DC;  --c8-bg:  #E5F6FB;   /* 藍綠 */
  --c9:  #71781F;  --c9-v:  #C8D06A;  --c9-bg:  #F6F9E2;   /* 橄欖 */
  --c10: #2670AE;  --c10-v: #7CB8E6;  --c10-bg: #EBF3FB;   /* 鋼藍 */
  --c11: #547C29;  --c11-v: #A6D07A;  --c11-bg: #F1F9E5;   /* 苔綠 */
  --c12: #A15522;  --c12-v: #E5A06A;  --c12-bg: #FDF0E4;   /* 赭褐 */
  --c13: #80438A;  --c13-v: #CB8DD4;  --c13-bg: #F9EDFB;   /* 紫 */
  --c14: #47637A;  --c14-v: #93B0C6;  --c14-bg: #EDF3F7;   /* 石板灰 */

  /* 元件表明定之兩個特例 */
  --row-sel:  #E7F3FD;   /* Table：選中列 */
  --doc-bg:   #24333F;   /* doc：文件閱覽區底 */

  /* ---- 字型大小（5–48pt，預設 12pt＝16px）---- */
  --ui-pt: 12;

  /* ---- 間距階（只用這些值；括號內為 100% 時的實際像素）---- */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 0.875rem;  /* 14px */
  --sp-5: 1rem;      /* 16px */
  --sp-6: 1.25rem;   /* 20px */
  --sp-7: 1.375rem;  /* 22px */

  /* ---- 圓角 ---- */
  --r-card: 0.625rem;   /* 10px　卡片 */
  --r-ctrl: 0.4375rem;  /*  7px　按鈕與輸入框 */
  --r-chip: 99px;       /* 晶片全圓——全圓不需隨縮放變化 */

  /* ---- 字族（全站唯一）---- */
  --font: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
}

/* 字型大小的唯一施力點。其餘一切以 rem 表述，跟著這裡走。 */
html { font-size: calc(var(--ui-pt) * 1pt); }