/**
 * tokens.css — 全站設計 token ＋ reset（新外殼 v2，仿 CircleKit）
 *
 * 深色為預設（不需要任何 data-theme 屬性就能看到深色版）。
 * 有登入過的使用者會由 ui/theme.js 在 <html> 上寫 data-theme="dark" / "light"，
 * 那組屬性選擇器的優先權最高，永遠贏過 prefers-color-scheme。
 * 還沒選過主題（沒有 data-theme）時，才輪到 @media (prefers-color-scheme) 接手，
 * 讓頁面在第一次造訪時就跟著作業系統的深淺色走，不會閃一下錯的顏色。
 *
 * ⚠️ 這份檔案只放 token 與最基礎的全站 reset，不放任何 class 樣式
 *    （.shell / .rail / .stage… 一律在 shell.css）。
 */

:root {
  /* 底色 */
  --bg:          #191919;
  --bg-elev:     #232323;   /* 卡片 */
  --bg-inset:    #2c2c2c;   /* 輸入框、內凹區 */
  --bg-hover:    #2f2f2f;
  --stage:       #1f1f1f;   /* 3D 畫布外框 */

  /* 線 */
  --line:        rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.16);

  /* 字 */
  --fg:          #f3f2f0;
  --fg-dim:      #a5a4a1;
  --fg-mute:     #6e6d6a;

  /* 主色（CircleKit 的主按鈕是淺色藥丸，深色底上很搶眼） */
  --accent:      #f3f2f0;
  --accent-fg:   #191919;
  --accent-soft: rgba(255,255,255,.10);

  /* 語意色 */
  --ok:    #35c08a;
  --warn:  #e0a02e;
  --danger:#e05555;
  --teal:  #00c9a7;   /* 邊緣高亮，沿用 3D 場景的青綠 */

  /* 圓角 */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* 陰影 */
  --sh-1: 0 1px 2px rgba(0,0,0,.32);
  --sh-2: 0 6px 20px rgba(0,0,0,.36);
  --sh-3: 0 18px 48px rgba(0,0,0,.44);

  /* 間距刻度 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* 版面尺寸 */
  --rail-w:        70px;
  --rail-w-open:   246px;
  --inspector-w:   332px;
  --dock-h:        48px;

  /* 字級 */
  --f-xs: 11px; --f-sm: 12px; --f-md: 13px; --f-lg: 15px; --f-xl: 19px;
  --f-h1: 44px; --f-h2: 26px;

  --font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* 明確選了淺色（不論系統設定為何，data-theme 永遠優先） */
[data-theme="light"] {
  --bg:#f6f5f3; --bg-elev:#ffffff; --bg-inset:#efeeeb; --bg-hover:#e9e8e4; --stage:#ffffff;
  --line:rgba(0,0,0,.09); --line-strong:rgba(0,0,0,.18);
  --fg:#1c1b1a; --fg-dim:#5f5e5b; --fg-mute:#8d8c88;
  --accent:#1c1b1a; --accent-fg:#faf9f7; --accent-soft:rgba(0,0,0,.07);
  --sh-1:0 1px 2px rgba(0,0,0,.07); --sh-2:0 6px 20px rgba(0,0,0,.09); --sh-3:0 18px 48px rgba(0,0,0,.12);
}

/* 還沒選過主題（沒有 data-theme）時，跟隨系統的淺色設定。
   :not([data-theme="dark"]) 是保險：理論上沒有 data-theme 就不會有 ="dark"，
   但這樣寫可以確保「明確選深色」永遠贏過這個 media query，順序上不會互咬。 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#f6f5f3; --bg-elev:#ffffff; --bg-inset:#efeeeb; --bg-hover:#e9e8e4; --stage:#ffffff;
    --line:rgba(0,0,0,.09); --line-strong:rgba(0,0,0,.18);
    --fg:#1c1b1a; --fg-dim:#5f5e5b; --fg-mute:#8d8c88;
    --accent:#1c1b1a; --accent-fg:#faf9f7; --accent-soft:rgba(0,0,0,.07);
    --sh-1:0 1px 2px rgba(0,0,0,.07); --sh-2:0 6px 20px rgba(0,0,0,.09); --sh-3:0 18px 48px rgba(0,0,0,.12);
  }
}

/* ── 全站 reset ───────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--f-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 主題切換時底色／字色跟著淡入淡出，不要用生硬的一刀切換 */
  transition: background-color .18s var(--ease), color .18s var(--ease);
}

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; }

img, svg, canvas { max-width: 100%; display: block; }

::selection { background: var(--accent-soft); color: var(--fg); }

/* 鍵盤操作時才顯示外框（滑鼠點擊不顯示），避免每次點按鈕都出現一圈框 */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* 細捲軸（跟隨主題，深淺色都要看得清楚） */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-sm);
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--fg-mute); background-clip: content-box; }