@import url('./fonts/noto-sans-tc.css?v=20260811cjkquotes1');

@font-face{
  font-family:'Geist';
  src:url('./fonts/Geist-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
  /* Geist 內含 U+300C/U+300D，但沒有中文字。若不限制範圍，引號會由 Geist、
     中文由系統 fallback 分別渲染，兩套字面度量拼在一起就會看似黏住。
     Geist 只負責拉丁、數字與西文符號；CJK 標點連同中文字交給下方 Noto Sans TC。 */
  unicode-range:U+0000-02FF,U+0300-036F,U+1E00-1EFF,U+2000-2FFF;
}

/* CSS Text 4 漸進增強：支援的瀏覽器保留全形 CJK 標點字面空間；不支援時忽略本段，
   仍由自託管 Noto Sans TC 的標點度量提供一致 fallback。 */
@supports (text-spacing-trim:space-all){
  html:lang(zh-Hant){text-spacing-trim:space-all}
}

/* 需要比字型標準度量再鬆一點的短引述（例如確認彈窗裡的卡片／發票名稱）。
   使用語意化 <q>，不在字串中插入空白；.08em 約為 15px 內文的 1.2px。 */
.cjk-quote{quotes:'「' '」' '『' '』';margin-inline:.08em}
.cjk-quote::before{content:open-quote}
.cjk-quote::after{content:close-quote}

:root{
  /* ===== 1. 原始色階（Raw scales）===== */
  /* Green — Primary Action：主要 CTA、主動作、正向狀態、品牌強調 */

  --green-50:#e2f6eb;
  --green-100:#d5f5e3;
  --green-200:#a8eacc;
  --green-300:#6dd8a8;
  --green-400:#3dc286;
  --green-500:#1aad6b;

  --green-600:#139256;
  --green-700:#117844;
  --green-800:#125e38;
  --green-900:#104d2e;
  --green-950:#072b18;

  /* Neutral — Cool Gray：背景、面板、邊界、文字與結構狀態的基礎階 */
  --neutral-50:#f2f5f6;
  --neutral-100:#e8ecee;
  --neutral-200:#d5dbdf;
  --neutral-300:#b8c1c7;
  --neutral-400:#8e99a1;
  --neutral-500:#6b7680;
  --neutral-600:#4d555d;
  --neutral-700:#353b41;
  --neutral-800:#252a2f;
  --neutral-900:#1c2024;
  --neutral-950:#16191c;

  --red-100:#fbe9e9;
  --red-400:#ff8a80;
  --red-700:#c62828;
  --amber-50:#fdf3e0;
  --amber-700:#8a5f00;

  --blue-100:#deeeff;
  --blue-700:#1f66ac;

  /* ===== 2. 語意 token（Semantic mapping）=====
     以下 10 個由 color system 明確定義，數值不得繞過色階自行指定。
     括號內為該系統記載的 dark 值，本站目前沒有深色模式，僅登錄備查、未啟用：
       action-primary Green/400、action-primary-hover Green/300、
       action-secondary Purple/400、action-secondary-hover Purple/300、（本站已無此 token，僅留原系統記載）
       bg-page Neutral/950、bg-surface Neutral/900、
       text-primary Neutral/100、text-secondary Neutral/400、
       chart-series-1 Green/400、chart-series-2 Purple/400。 */


  --action-primary:var(--green-700);
  --action-primary-hover:var(--green-800);
  --bg-page:var(--neutral-50);
  --bg-surface:#ffffff;
  --text-primary:var(--neutral-700);
  --text-secondary:var(--neutral-500);

  --chart-series-1:var(--green-500);

  --chart-series-2:var(--neutral-700);
  --chart-series-3:var(--neutral-400);
  --chart-series-4:var(--neutral-300);
  --chart-series-5:var(--neutral-200);
  /* 趨勢圖 hover／focus 時，被指到那一欄的長條各自往自己的色階**亮一階**
     （Green/500→400、Neutral/700→600）。用色階而不是 filter:brightness()，
     圖表顏色才會全部留在色盤裡、不會冒出盤外的色值。
     只有前兩色需要 —— 趨勢圖固定兩個系列；佔比長條（本月新增／使用）沒有 hover 態。 */
  --chart-series-1-hover:var(--green-400);
  --chart-series-2-hover:var(--neutral-600);

  /* 狀態標籤（.tag-* / .badge-neg）的顏色**不另設 --status-* token**。
     那一層的每個名字都只是指向語意色或色階，不帶來獨立的調整空間 ——
     改 --neg 本來就是要讓「付款失敗」chip 一起變，多一層別名只是多一個要維護的名字。
     實際配對見 overview.css 的 .tag-* 區塊，那裡是連續的一段、一目了然。 */


  --surface-hover-overlay:color-mix(in srgb,var(--green-200) 10%,transparent);

  --surface-hover-overlay-danger:color-mix(in srgb,var(--red-400) 10%,transparent);


  --on-primary:#ffffff;

  /* ===== 3. 既有元件 token 橋接 ===== */
  /* 底色 / 卡片 */
  --bg:var(--bg-page); --card:var(--bg-surface);
  /* 文字三階：color system 只定義 primary/secondary 兩階，中間階取 Neutral/600 補足，
     維持產品既有的標題／內文／輔助三層閱讀節奏。
     on 白卡對比：--ink 11.33、--ink-2 7.57、--muted 4.64。 */
  --ink:var(--text-primary); --ink-2:var(--neutral-600); --muted:var(--text-secondary);
  /* --line 只給**裝飾性分隔線**：表格列線、卡片分區線、工具列的直線分隔等。
     這類線不承載「這裡是可操作控制項」的訊息，維持 Neutral/100 的輕量。 */
  --line:var(--neutral-100);

  --control-line:var(--neutral-300);
  /* 輸入中／聚焦時的框線。三階遞進：Neutral/400 → 500 → 700。
     ⚠️ 輸入類控制項**不套全站的綠色焦點環** —— `:focus-visible` 對按鈕不會在滑鼠
     點擊時觸發，但對文字輸入框瀏覽器一律視為 focus-visible（因為接下來要打字），
     套上去就變成「滑鼠點一下搜尋框就冒出綠色外框」，不是正常的介面語言。
     輸入類只加深框線；焦點環留給按鈕類（chip／分段／選項卡）與真正的按鈕。
     N/400→N/700 的變化幅度 3.90:1，足以表達狀態改變。 */
  --control-line-focus:var(--neutral-700);

  --control-placeholder:var(--neutral-300);

  --brand-green:#00a550;

  --brand-accent:var(--green-500);

  --brand-accent-hover:var(--green-400);
  --brand-focus:var(--green-600);
  --brand-surface:var(--green-50);
  --brand-surface-strong:var(--green-100);
  --brand-text:var(--green-800);
  --brand-on-accent:var(--neutral-950);



  --action-ghost:var(--neutral-800);
  --action-ghost-hover:var(--neutral-900);
  --action-ghost-line:var(--neutral-300);
  /* 停用態的統一透明度。任何「同一元件失去作用」的降階都用這個值，
     不要各處寫死近似的 .46 / .48。
     備註：本來就很淡的元件（Ghost 的 Neutral/300 框線）疊此透明度後與原色差異極小，
     狀態差異主要由 cursor:not-allowed 與 pointer-events:none 承擔。 */
  --opacity-disabled:.45;
  /* 圖表骨架色 */
  --bar:var(--neutral-900); --bar-dim:var(--neutral-200);


  --pos:var(--green-700);    --pos-surface:var(--green-50);
  --neg:var(--red-700);      --neg-surface:var(--red-100);
  --warn:var(--amber-700);   --warn-surface:var(--amber-50);
  --danger:var(--neg);       --danger-surface:var(--neg-surface);

  --neg-on-dark:var(--red-400);
  --danger-on-dark:var(--neg-on-dark);
  /* info：進行中／尚在確認，非錯誤也非警告。補上這個語意之前，
     「狀態確認中」「處理中」只能用中性灰，讀起來像「已結束」。
     ⚠️ 不另建 --status-info-* —— 那會是純別名，直接用這兩個即可。 */
  --info:var(--blue-700);    --info-surface:var(--blue-100);
  /* 形狀 / 間距 */
  --r:20px; --r-sm:16px; --gap:14px; --pad:22px;

  --pad-overlay:26px;

  --r-ctl:8px; --r-icon:8px;
  /* 按鈕型控制項 hover：240ms 足以看出狀態過渡，仍維持工具型介面的操作速度。
     ease-out-quart 只在進入／離開 hover 時減速，不加入位移或裝飾性動態。 */
  --motion-control-duration:.24s;
  --motion-control-ease:cubic-bezier(.25,1,.5,1);
  /* 字型堆疊 */
  --font:'Geist','Yam Noto Sans TC','Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
}