/* ui-v3 · 頻譜 SPECTRUM — 設計 token
   概念:訊號 / 混音台。墨黑底 + 細格線,單一訊號色(--sig)只給互動與「現在」用;
   元素色只拿來表示資料(角色、招式、效應),不拿來裝飾。 */
:root {
  color-scheme: dark;

  /* 表面:由深到淺 */
  --bg: #06070a;
  --s1: #0a0c10;
  --s2: #0e1116;
  --s3: #141820;
  --s4: #1b202a;
  --s5: #232937;

  /* 線 */
  --line: rgba(255, 255, 255, .07);
  --line2: rgba(255, 255, 255, .12);
  --line3: rgba(255, 255, 255, .22);

  /* 字 */
  --fg: #eceff5;
  --fg2: #b7bdcb;
  --dim: #858d9d;   /* 對 --s1 約 5.4:1,可當正文 */
  --faint: #5b6271; /* 只給裝飾(格線刻度、分隔符) */

  /* 訊號色與語意色 */
  --sig: #7cf3e4;
  --sig-2: #b8fff6;
  --sig-ink: #02130f;
  --sig-a: rgba(124, 243, 228, .14);
  --up: #7cf3e4;
  --down: #ff7d8c;
  --warn: #ffc46b;
  --warn-a: rgba(255, 196, 107, .12);
  --danger: #ff6b7d;
  --danger-a: rgba(255, 107, 125, .12);

  /* 屬性 */
  --glacio: #7cc4ff;
  --fusion: #ff8a5c;
  --electro: #b996ff;
  --aero: #66f0a8;
  --spectro: #f3d46b;
  --havoc: #ff6fa8;
  --physical: #c2c8d4;

  /* 字體 */
  --f-ui: 'Noto Sans TC', 'Noto Sans SC', 'Microsoft JhengHei', sans-serif;
  --f-num: 'Big Shoulders Display', 'Noto Sans TC', sans-serif;
  --f-mono: 'JetBrains Mono', 'Noto Sans TC', 'Noto Sans SC', monospace;

  /* 間距(4 的倍數) */
  --g1: 4px; --g2: 8px; --g3: 12px; --g4: 16px; --g5: 20px; --g6: 24px; --g8: 32px; --g10: 40px;

  /* 圓角:近乎直角,技術感;只有膠囊與頭像是圓的 */
  --r1: 2px; --r2: 4px; --r3: 6px; --rp: 999px;

  /* 動態:同一套節奏 */
  --ease: cubic-bezier(.16, 1, .3, 1);          /* 抵達:expo-out */
  --ease-io: cubic-bezier(.65, 0, .35, 1);      /* 位移:兩端緩 */
  --ease-in: cubic-bezier(.55, 0, 1, .45);      /* 離開 */
  --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1 27.8%, 1.077 30.3%, 1.002 38.5%, .983 42.5%, .978 46.6%, .993 61.6%, 1.001 76.2%, 1);
  --t1: 120ms;  /* hover / 按壓 */
  --t2: 220ms;  /* 狀態切換 */
  --t3: 420ms;  /* 面板展開 */
  --t4: 720ms;  /* 立繪 / 大位移 */

  --z-sticky: 20; --z-top: 40; --z-modal: 100; --z-pop: 110; --z-toast: 120; --z-tip: 140; /* 浮層選單一定在彈窗之上(彈窗裡的下拉也要看得到) */

  --shadow-pop: 0 24px 60px -12px rgba(0, 0, 0, .75), 0 0 0 1px var(--line2);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t1: 1ms; --t2: 1ms; --t3: 1ms; --t4: 1ms; }
}