/* ============================================================
   主題變數 —— 風格：Soft Store（乾淨、溫和的角色商店）
   Codex 美術可整組替換這裡的值來換膚，不用碰結構。
   ============================================================ */
:root {
  color-scheme: light;

  /* 底色層次 */
  --bg:        #f5f7fb;
  --bg-soft:   #eef3f7;
  --surface:   #ffffff;
  --surface-2: #eef4f7;
  --surface-3: #dde8ee;
  --overlay:   rgba(255, 255, 255, .88);

  /* 文字 */
  --text:      #17212b;
  --text-soft: #536273;
  --text-dim:  #8592a1;

  /* 品牌 / 動作色 */
  --accent:      #18a999;   /* 主要：確認 / 購買 / 現用中 */
  --accent-ink:  #ffffff;   /* 疊在主要色上的文字 */
  --accent-2:    #ff7a66;   /* 次要：促銷 / 強調 */
  --accent-3:    #5b6ee1;   /* 連結 / 資訊 */

  /* 徽章色 */
  --badge-free:     #18a999;
  --badge-official: #5b6ee1;
  --badge-hot:      #e84d6a;
  --badge-new:      #d99b20;
  --badge-sale:     #ff7a66;

  /* 模式色（寵物 / 工作夥伴 / 娛樂）*/
  --mode-pet:  #d99b20;
  --mode-work: #5b6ee1;
  --mode-play: #e84d6a;

  /* 邊框 / 分隔 */
  --line:      #d8e1ea;
  --line-soft: #e7edf3;

  /* 柔和焦點 */
  --glow-cyan:   0 0 0 4px rgba(24, 169, 153, .12);
  --glow-purple: 0 0 0 4px rgba(91, 110, 225, .12);
  --ring-cyan:   0 0 0 3px rgba(24, 169, 153, .14);

  /* 圓角 */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-pill: 999px;

  /* 陰影 */
  --shadow:    0 18px 44px rgba(24, 34, 45, .12);
  --shadow-sm: 0 8px 20px rgba(24, 34, 45, .08);
  --shadow-card: 0 10px 24px rgba(24, 34, 45, .08);

  /* 間距節奏 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* 版面 */
  --maxw:        1180px;
  --topbar-h:    60px;
  --bottomnav-h: 62px;

  /* 字型（Codex 可換）*/
  --font: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang TC", "Microsoft JhengHei", sans-serif;
}