/* ══════════════════════════════════════════════════
   iTracker — Surface / border / shadow / glass tokens
   ★ 本檔即 token 值正本，直接改這裡。站台載入 Pages/Shared/_DesignTokens.cshtml（一律在 site.css 之前）。

   「近白 canvas＋純白卡片，靠邊框與陰影排層次」（Linear 派），
   夜間為深紫黑 grey 暗階。

   紀律：
   · Elevation：實心樓層＋邊框界定；只有「浮層」（modal / dropdown
     / toast / sidebar 玻璃態）才用半透明玻璃＋blur＋大陰影。
   · Alpha layering：hover / divider / muted 為同一族墨色的 rgba，
     任何樓層上都成立。
   · 平面元素一律靠邊框，不用陰影；hover 不做 translateY 位移。
   ══════════════════════════════════════════════════ */
:root {
  /* ── 表面層次（bg-page → bg-subtle → bg-card；hover 獨立 token）── */
  --paper:        #FFFFFF;          /* 卡片底（純白，靠陰影/邊框拉層次）*/
  --bg-page:      var(--grey-50);   /* #FAFAFC 畫布（最底）*/
  --bg-card:      var(--paper);     /* 主工作表面 */
  --bg-elevated:  #FFFFFF;          /* 浮層最高階（modal / dropdown）*/
  --bg-subtle:    var(--grey-100);  /* #F4F4F8 比 card 暗：sidebar／看板欄底 */
  --bg-section:   var(--grey-200);  /* #ECEDF4 分組標題列／表頭／sticky */
  --bg-hover:     #EFEFF6;          /* 列／導覽／卡片 hover */
  --bg-sunk:      var(--grey-200);  /* #ECEDF4 input rest，再凹一階 */
  --bg-muted:     #E7E7EF;          /* 控制項／popover hover 填色（與 sunk 解耦）*/
  --bg-overlay:   rgba(22,22,31,.55);
  --bg-tooltip:   #26283B;          /* tooltip chip：日夜固定深紫底白字 */
  --bg-load-chip: rgba(250,250,252,.9);   /* Time Board % chip 底 */

  /* ── 互動表面（卡上互動元件要與 card 差一階）
     input＝凹型可編輯、control＝抬型卡上按鈕、frozen＝readonly/disabled ── */
  --bg-input:     var(--bg-card);
  --bg-control:   var(--bg-card);
  --bg-frozen:    var(--bg-subtle);

  /* ── Glass：sidebar／modal／toast／standalone-card 共用 ── */
  --glass-bg:     rgba(255,255,255,.62);
  --glass-border: rgba(255,255,255,.65);
  --glass-blur:   20px;
  --glass-shadow: 0 6px 24px rgba(35,36,51,.10);
  /* ── Glass：浮動選單／指令面板（比 sidebar 再實一點、blur 再多）── */
  --glass-float-bg:     rgba(255,255,255,.78);
  --glass-float-border: rgba(35,36,51,.12);
  --glass-float-blur:   24px;

  /* ── Modal 質感：頂緣亮 hairline＋多層柔光；scrim 淺＋模糊 ── */
  --modal-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(20,20,35,.09), 0 16px 36px rgba(20,20,35,.17);
  --modal-scrim:  rgba(22,22,31,.36);

  /* ── 微漸層（兩停點差半階內）── */
  --grad-card:   linear-gradient(180deg, #FFFFFF 0%, #F7F7FB 100%); /* @kind other */
  --grad-accent: linear-gradient(135deg, rgba(92,78,166,.10) 0%, rgba(92,78,166,0) 50%); /* @kind other */

  /* ── 邊框 / 分隔線（紫調冷灰，精確 hex）── */
  --border-faint:  #E9E9F1;
  --border-input:  var(--grey-300);  /* #D4D5E3 */
  --border-card:   var(--grey-250);  /* #E3E3EE 近白 canvas 上卡片靠框定義 */
  --border-hover:  #C7C9D6;
  --divider:       #E9E9F1;

  /* ── Sidebar（active 用左側指示條，不用漸層底）── */
  --bg-sidebar:         var(--bg-subtle);
  --bg-sidebar-hover:   var(--bg-hover);
  --bg-sidebar-control: rgba(35,36,51,.04);
  --sb-active-gradient: transparent;
  --border-sidebar:     var(--divider);
  --text-sidebar:       var(--text-primary);
  --text-sidebar-muted: var(--text-secondary);
  --text-sidebar-hint:  var(--text-tertiary);

  /* ── 陰影（只給浮層；sm＝dropdown/popover/tooltip，lg＝modal/toast/拖曳中）── */
  --shadow-btn: 0 1px 1px rgba(17,24,39,.06);
  --shadow-sm:  0 2px 8px rgba(17,24,39,.08), 0 0 0 1px rgba(0,0,0,.05);
  --shadow-lg:  0 8px 28px rgba(17,24,39,.12), 0 0 0 1px rgba(0,0,0,.06);

  /* ── Interaction ── */
  --lift: none;   /* @kind other */ /* NO translateY hovers — 只換底色 */

  /* ── Scrollbar ── */
  --scroll-thumb:       var(--grey-400);
  --scroll-thumb-hover: var(--grey-500);

  /* ── Legacy aliases ── */
  --sidebar-bg:     var(--bg-sidebar);
  --sidebar-border: var(--border-sidebar);
  --body-bg:        var(--bg-page);
  --card-bg:        var(--bg-card);
}

[data-theme="dark"] {
  /* ── 表面層次（深紫黑 grey 暗階）── */
  --paper:        var(--grey-850);  /* #1D1E2B */
  --bg-page:      var(--grey-900);  /* #16161F */
  --bg-card:      var(--paper);
  --bg-elevated:  var(--grey-800);  /* #26283B */
  --bg-subtle:    var(--grey-950);  /* #13131B sidebar／看板欄底 */
  --bg-section:   #26293E;
  --bg-hover:     #23243A;
  --bg-sunk:      #101018;
  --bg-muted:     #2E3050;
  --bg-overlay:   rgba(0,0,0,.80);
  --bg-tooltip:   #26283B;          /* 與 light 一致，刻意不切換 */
  --bg-load-chip: rgba(22,22,31,.85);

  --bg-input:     var(--bg-sunk);   /* 夜間 editable 凹到 sunk */
  --bg-control:   var(--bg-elevated);
  --bg-frozen:    var(--bg-card);   /* 凍結態攤回 card 高度 */

  /* ── Glass dark（深底＋微亮邊）── */
  --glass-bg:     rgba(29,30,43,.62);
  --glass-border: rgba(255,255,255,.10);
  --glass-blur:   20px;
  --glass-shadow: 0 8px 30px rgba(0,0,0,.40);
  --glass-float-bg:     rgba(38,40,59,.72);
  --glass-float-border: rgba(255,255,255,.14);
  --glass-float-blur:   26px;

  --modal-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 2px 8px rgba(0,0,0,.40), 0 18px 42px rgba(0,0,0,.52);
  --modal-scrim:  rgba(6,6,12,.60);

  --grad-card:   linear-gradient(180deg, #26283B 0%, #1D1E2B 100%); /* @kind other */
  --grad-accent: linear-gradient(135deg, rgba(138,43,255,.16) 0%, rgba(138,43,255,0) 50%); /* @kind other */

  /* ── 邊框 / 分隔線 ── */
  --border-faint: #292B41;
  --border-input: var(--grey-700);  /* #393A4B */
  --border-card:  var(--grey-750);  /* #2C2D42 */
  --border-hover: #4D4F69;
  --divider:      #292B41;

  --bg-sidebar:         var(--bg-subtle);
  --bg-sidebar-hover:   var(--bg-hover);
  --bg-sidebar-control: rgba(255,255,255,.05);
  --border-sidebar:     var(--divider);

  /* ── 陰影 dark：黑陰影在深底不可見 → 靠亮邊 ring 界定輪廓 ── */
  --shadow-btn: 0 1px 1px rgba(0,0,0,.30);
  --shadow-sm:  0 4px 14px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.14);
  --shadow-lg:  0 16px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.18);

  --scroll-thumb:       rgba(255,255,255,.20);
  --scroll-thumb-hover: rgba(255,255,255,.35);
}