/* 全站設計基底 —— **唯一**同時被 React show-room 與純 HTML 行銷頁讀到的檔案。
 *
 * ── 兩種吃法（改這裡＝兩邊同時變）──────────────────────────────────
 *  · 行銷頁：各頁 <link rel="stylesheet" href="/assets/tokens.css"> 排在 site.css **之前**。
 *  · show-room：src/index.css 第 1 行 @import（必須在 @tailwind base 之前，
 *    否則 postcss-import 會警告並略過）。Vite build 時 inline 進 bundle
 *    ＝ show-room 零額外 request、不增加 render-blocking 資源。
 *
 * ── 🚫 這裡**不放顏色** ────────────────────────────────────────────
 *  實測 Tailwind 3.4：`bg-[var(--x)]/70`、`text-[var(--y)]/60` **產出零行 CSS**，
 *  而且 tsc 與 CI bundle build 都不會擋 ⇒ 元素靜默失去背景色。
 *  show-room 幾乎所有顏色都帶 opacity modifier（bg-black/70、text-white/60、
 *  ring-white/[0.08]），所以顏色留在 Tailwind class 與 TS 常數（panelChrome.ts）。
 *  這裡只放「CSS 直接讀得到、且不需要 alpha」的值。
 */

:root {
  /* ── 曲線：與 src/constants/motion.ts 的 BEZ 同值。
        行銷頁沒有 build step、import 不了 TS ⇒ **這 4 個數字是全站唯一需要人工同步的**。
        改一邊必改另一邊。 */
  --ease-in: cubic-bezier(0.22, 1, 0.36, 1);          /* 入場／到定位 ＝ BEZ.in（≈ power3.out） */
  --ease-out: cubic-bezier(0.55, 0, 1, 0.45);         /* 離場 ＝ BEZ.out */
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);        /* 兩端都動的長距離 ＝ BEZ.move */
  --ease-panel: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* 面板/彈層滑入 ＝ BEZ.panel（既有手感，勿調） */

  /* ── 時長：只給 CSS transition 用。framer-motion 那側讀 motion.ts 的 DUR。 */
  --dur-tap: 0.14s;    /* 按壓、hover */
  --dur-micro: 0.18s;  /* 小元件出現/消失、下拉 */
  --dur-panel: 0.32s;  /* 面板、抽屜滑入 */
  --dur-reveal: 1s;    /* 行銷頁捲動進場（刻意慢，與 UI 進場不同語域，勿併） */

  /* ── 圓角。定在 :root ＝ 讓 tailwind.config.ts 既有的 rounded-lg/md/sm 對 show-room 生效。
        ⚠ admin.css 的 .admin-root 有自己的 --radius，就近覆蓋＝後台不受影響。 */
  --radius: 12px;

  /* ── hairline 分隔線（行銷頁各 :root 原本有 .09 / .10 兩種值，此為準據）。 */
  --line: rgba(255, 255, 255, 0.1);
}

/* 🚨 CJK（中/日/韓）不加字距 —— user 反覆指定的硬規則。
   letter-spacing 會讓方塊字看起來鬆散、不專業。
   原本 src/index.css 與 public/assets/site.css **各寫一份**（改一邊會漏另一邊）；
   收在這裡＝兩邊自動一致。拉丁語系維持各自設計的字距。
   !important 是為了蓋過 Tailwind 的 tracking-* 與元件的 inline style。 */
html[lang^='zh'] *,
html[lang='ja'] *,
html[lang='ko'] * {
  letter-spacing: normal !important;
}

/* 🚨 焦點態 —— 全站唯一一條。2026-08-09 稽核前，前台與行銷頁的 `:focus-visible`
   命中數都是 **0**：只用鍵盤的人完全看不到焦點在哪裡。
   `:where()` 讓特異性為 0 ⇒ 任何元件想覆蓋都不必打 !important 戰爭。

   ⚠ 用標準 outline，**不要**改成 inset box-shadow —— inset 陰影畫在子元素之下，
     Swatch 的 `absolute inset-0` 圖片會把整個環蓋掉（色票正是最密集的那組控制項）。
   ⚠ **不要**加 `border-radius: inherit` —— outline 已自動貼合元素自身圓角，
     inherit 反而會把 rounded-full 的圓形色票壓成直角。
   ⚠ offset 2px 塞得進橫向 strip 的 px-[8px] 內距，不會被 overflow-x-auto 裁掉。 */
:where(a, button, [role='button'], [tabindex]:not([tabindex='-1'])):focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 2px;
}