/* ══════════════════════════════════════════════════════════════════════
   設計 token — 全站唯一的顏色／字級／間距來源
   規則：
     · 元件與頁面只准用這裡的變數，不准寫死 hex 或 px 魔術數。
     · 深色模式只改 token，不在元件裡另寫 dark 覆寫。
     · 色相元件（狀態徽章、看板欄、長條）用 --h 帶色相，
       亮度與飽和度由 --hue-* token 決定，所以淺色深色各只需要一組數字。
   ══════════════════════════════════════════════════════════════════════ */
:root{
  /* 面與線 */
  --ground:#E7EBEE; --panel:#fff; --panel-2:#F3F6F8; --panel-3:#EAEFF2;
  --ink:#0F161C; --ink-2:#48565F; --ink-3:#79878F;
  --line:#C4CED4; --line-2:#DDE4E8;

  /* 主色（互動）與次強調 */
  --accent:#1A5A94; --accent-soft:#DCE9F6; --on-accent:#fff;
  --accent-2:#A85B23; --accent-2-soft:#F3E5D6;

  /* 語意色：紅＝需要人處理、橙＝注意、綠＝健康、青＝資訊、灰＝未填 */
  --crit:#A62D22; --crit-soft:#F6DEDA;
  --warn:#9B6A0C; --warn-soft:#F6E9CD;
  --ok:#2C6650;   --ok-soft:#DCEAE3;
  --info:#17656B; --info-soft:#D9EBEC;
  --muted:#79878F; --muted-soft:#EEF1F3;

  --shadow:0 1px 2px rgba(15,22,28,.06),0 4px 16px rgba(15,22,28,.06);
  --shadow-lg:0 12px 48px rgba(0,0,0,.3);

  /* 流程色相：徽章／欄頂／長條共用一組亮度飽和度 */
  --hue-fg-s:46%; --hue-fg-l:30%;
  --hue-bg-s:62%; --hue-bg-l:94%;
  --hue-bd-s:40%; --hue-bd-l:72%;
  --hue-bar-s:45%; --hue-bar-l:46%;
  --hue-tint:.07;

  /* 字級 */
  --fs-xs:12px; --fs-sm:13px; --fs-md:14.5px; --fs-lg:16px;
  --fs-xl:20px; --fs-2xl:28px;
  --font:"Noto Sans TC","PingFang TC",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  /* 間距與圓角（方角是這套系統的識別，集中在一處） */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --radius:0;

  /* 版面 */
  --max-w:1760px;
  /* ⚠ 用 vh／vw 的地方一律寫成「 / var(--z,1)」：html 有 zoom 時 Chrome 會把 vh 也一起放大，
     2K 螢幕放大 135% 時 100vh 實測 1755px（螢幕才 1300），清單與看板的框會比螢幕還高。
     --z 由 boot.js 的 UIZoom 寫在 <html> 上。 */ /* 2026-10-02 從 1500 放寬：寬螢幕上兩側留白太多、清單欄位擠在中間 */ --top-h:62px; --drawer-w:900px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0D1216; --panel:#151C22; --panel-2:#1B242B; --panel-3:#202B33;
    --ink:#E3EAEE; --ink-2:#94A3AC; --ink-3:#6E7C85;
    --line:#2B353D; --line-2:#222B32;
    --accent:#6FA8DC; --accent-soft:#16283C; --on-accent:#0D1216;
    --accent-2:#D18B4D; --accent-2-soft:#332415;
    --crit:#E4776A; --crit-soft:#361B18;
    --warn:#D6A63F; --warn-soft:#332715;
    --ok:#63B292; --ok-soft:#16281F;
    --info:#5FB3BA; --info-soft:#122628;
    --muted:#6E7C85; --muted-soft:#1B242B;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.35);
    --hue-fg-s:62%; --hue-fg-l:74%;
    --hue-bg-s:32%; --hue-bg-l:16%;
    --hue-bd-s:34%; --hue-bd-l:38%;
    --hue-bar-s:50%; --hue-bar-l:58%;
    --hue-tint:.16;
  }
}
:root[data-theme="dark"]{
  --ground:#0D1216; --panel:#151C22; --panel-2:#1B242B; --panel-3:#202B33;
  --ink:#E3EAEE; --ink-2:#94A3AC; --ink-3:#6E7C85;
  --line:#2B353D; --line-2:#222B32;
  --accent:#6FA8DC; --accent-soft:#16283C; --on-accent:#0D1216;
  --accent-2:#D18B4D; --accent-2-soft:#332415;
  --crit:#E4776A; --crit-soft:#361B18;
  --warn:#D6A63F; --warn-soft:#332715;
  --ok:#63B292; --ok-soft:#16281F;
  --info:#5FB3BA; --info-soft:#122628;
  --muted:#6E7C85; --muted-soft:#1B242B;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.35);
  --hue-fg-s:62%; --hue-fg-l:74%;
  --hue-bg-s:32%; --hue-bg-l:16%;
  --hue-bd-s:34%; --hue-bd-l:38%;
  --hue-bar-s:50%; --hue-bar-l:58%;
  --hue-tint:.16;
}