/* css/tokens.css — 設計變數：色彩 / 字級 / 間距 / 圓角 / 陰影 */

:root {
  /* ---- 色彩：籃球橘 accent + 暖灰底 + 深炭文字 ---- */
  --color-accent: #E8590C;
  --color-accent-dark: #B8430A;
  --color-accent-tint: #FDEAE0;
  --color-accent-contrast: #FFFFFF; /* @deprecated：改用 --color-on-fill（見下方說明） */

  /* ---- 飽和色塊上的文字（SPEC_M18）----
   * 起因：--color-accent 配白字只有 3.58:1、深色模式的 success／danger 配白字更低到
   * 2.0〜2.9，全都低於 AA 小字的 4.5。這不是某顆按鈕的問題，是「文字壓在飽和色塊上」
   * 這個模式的問題，所以修在 token 層。
   *
   * 兩個主題的正解本來就不同，不要硬求一致：
   * - 淺色模式：色塊維持深色、文字用白（--color-fill-accent 比 accent 壓深一階，
   *   白字才站得住；success／danger 本身就夠深，直接配白字）。
   * - 深色模式：暗底需要亮色塊（亮橘才看得出是 accent），所以色塊維持亮、文字改近黑。
   *
   * 用法：凡是「飽和色當底＋上面有字」的控制項，底色用 --color-fill-accent（accent 系）
   * 或原本的 success／danger，文字一律用 --color-on-fill。純色塊（進度條、熱力格、
   * pip）沒有文字，不受此規範。
   */
  --color-fill-accent: #B8430A;
  --color-on-fill: #FFFFFF;
  /* accent 當「文字色」用時的值。淺色底要壓深（#E8590C 在白底只有 3.4:1），
     深色底則要提亮（#B8430A 壓在 sunken 上只有 4.28:1）——同一顆 accent 在兩個
     主題當文字的正解剛好相反，所以獨立成一顆 token，不要就地寫 accent-dark。 */
  --color-accent-text: #B8430A;

  --color-bg: #FAF9F7;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #F2EFE9;
  --color-border: #E7E1D8;
  --color-border-strong: #D8CFC1;

  --color-text: #201A15;
  --color-text-muted: #6B6053;
  /* --color-text-faint 只准用在「純裝飾」：圖示、分隔符、虛線框，以及 ≥24px 的大字
   * （SPEC_M18 §5，2026-07-30 定案）。
   * 原因：它在淺色底只有 3.26〜3.43:1，AA 小字要 4.5——凡是承載資訊的標籤（區塊標題、
   * 關卡名、徽章進度、座標軸標籤…）用它都不及格。當時全站有 58 處使用，48 處是資訊
   * 而不是裝飾，已一次改用 muted。
   * ⚠️ 新寫樣式時：「這行字拿掉會不會少一個資訊？」會 → 用 muted，不會 → 才可以 faint。 */
  --color-text-faint: #94897A;
  --color-text-on-accent: #FFFFFF; /* @deprecated：改用 --color-on-fill */

  --color-success: #17794F;
  --color-success-tint: #E1F4EB;
  --color-danger: #B23B2E;
  --color-danger-tint: #FBE7E3;
  /* danger 當「文字色」時的專用值：深色模式的 --color-danger 是給色塊用的亮紅，
     拿來當字壓在 surface／danger-tint 上只有 3.23:1。填色維持不變，只有文字走這顆。 */
  --color-danger-text: #B23B2E;

  --color-court-line: #C9BFAF;
  --color-spot-idle: #C7BFB2;

  --color-heat-none: #D8D2C6;
  --color-heat-cold: #3E7CB1;
  --color-heat-warm: #E3A72E;
  --color-heat-hot: #E8590C;

  /* ---- 夜幕深藍：hero 卡生涯數據面板專用（呼應 favicon / OG 圖夜空色系） ---- */
  --color-night: #1F3A5F;
  --color-night-line: #35517A;
  --color-on-night: #FAF9F7;
  --color-on-night-muted: rgba(250, 249, 247, 0.62);
  /* 夜幕面板上的 accent 文字：面板在兩個主題下都是深藍，所以這顆不隨主題變。
     品牌橘直接壓在 #1F3A5F 上只有 3.21:1（accent-text 更慘 2.1，那顆是為淺色底調的），
     提亮到 #FF8A4C 才有 4.92:1——仍然明顯是同一支橘，只是為深藍底調亮。 */
  --color-accent-on-night: #FF8A4C;

  /* ---- 字級 ---- */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
    "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 19px;
  --text-xl: 26px;
  --text-2xl: 38px;
  --text-3xl: 48px;

  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* ---- 間距 ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 28px;
  --space-7: 40px;
  --space-8: 56px;

  /* ---- 圓角 ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ---- 陰影 ---- */
  --shadow-sm: 0 1px 2px rgba(32, 26, 21, 0.06);
  --shadow-md: 0 6px 20px rgba(32, 26, 21, 0.09);
  --shadow-lg: 0 12px 36px rgba(32, 26, 21, 0.14);

  /* ---- 觸控 / 動效 ---- */
  --touch-min: 48px;
  --transition-fast: 150ms ease;
  --transition-med: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --tabbar-height: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 1ms;
    --transition-med: 1ms;
  }
}

/* ---------------------------------------------------------------------- */
/* 深色模式：由 js/app.js 的 applyTheme() 寫入 document.documentElement       */
/* 的 data-theme 屬性套用。--color-night 系列（夜幕面板）兩種主題下都成立，     */
/* 故不在此覆寫；--color-text-on-accent / --color-accent-contrast 已停用，      */
/* 改用 --color-on-fill（它在深色模式必須覆寫，見上方說明）。                   */
/* ---------------------------------------------------------------------- */

:root[data-theme="dark"] {
  --color-accent: #F2691D;
  --color-accent-dark: #E8590C;
  --color-accent-tint: #3A2417;

  /* 暗底要亮色塊才看得出是 accent，所以色塊維持亮橘、文字改近黑（見上方說明）。 */
  --color-fill-accent: #F2691D;
  --color-on-fill: #16130F;
  --color-accent-text: #F2691D;

  --color-bg: #16130F;
  --color-surface: #201B16;
  --color-surface-sunken: #2A241E;
  --color-border: #3A322A;
  --color-border-strong: #4A4036;

  --color-text: #F2EDE5;
  --color-text-muted: #B3A793;
  --color-text-faint: #857A6A;

  --color-success: #4CC38A;
  --color-success-tint: #143327;
  --color-danger: #E5695B;
  --color-danger-tint: #3A1F1B;
  --color-danger-text: #F09A8F;

  --color-court-line: #4A4036;
  --color-spot-idle: #5A5142;

  --color-heat-none: #3A342C;
  --color-heat-cold: #4C8FC9;
  --color-heat-warm: #E3A72E;
  --color-heat-hot: #F2691D;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.55);
}