/*
 * lifetool 前端設計 SSOT — Design Tokens
 * ============================================
 * 這是 lifetool 全站樣式的「單一真相來源」(Repo Rule SSOT, per plan D5)。
 *
 * 紅線：
 *   - 所有 app / template 一律用 var(--token)，禁止寫死 hex / 尺寸。
 *   - 寫死顏色或尺寸 = drift signal，code review 要抓出來改回 token。
 *   - 規則說明見 docs/design_system.md。
 *
 * 風格：暖色極簡 + 卡片式 + mobile-first（warm minimalism）。
 */

:root {
  /* ---- 色彩 Palette ---- */
  --color-bg: #f6f5f1;          /* 頁面底（暖米） */
  --color-panel: #ffffff;       /* 卡片 / 面板 */
  --color-ink: #2b2622;         /* 主要文字 */
  --color-muted: #8c8378;       /* 次要文字 */
  --color-line: #e7e3db;        /* 邊框 / 分隔線 */
  --color-accent: #e8632a;      /* 品牌強調色（橘） */
  --color-accent-soft: #fdeee6; /* 強調色淺底 */
  --color-on-accent: #ffffff;   /* 強調色上的文字 */
  --color-danger: #d6455d;

  /* 抽選轉盤分段色（多色輪播） */
  --wheel-1: #e8632a;
  --wheel-2: #f0a830;
  --wheel-3: #0e8a16;
  --wheel-4: #1d76db;
  --wheel-5: #8e63ce;
  --wheel-6: #d6455d;
  --wheel-7: #2aa9a0;
  --wheel-8: #c97b1e;

  /* ---- 圓角 Radius ---- */
  --radius-sm: 9px;
  --radius-md: 13px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ---- 陰影 Shadow ---- */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .05);
  --shadow-pop: 0 2px 8px rgba(0, 0, 0, .15);

  /* ---- 間距 Spacing（4pt scale） ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 30px;

  /* ---- 字級 Type ---- */
  --font-sans: -apple-system, "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 24px;

  /* ---- 版面 Layout ---- */
  --app-max-width: 480px;       /* mobile-first 容器上限 */
  --tap-min: 44px;              /* 觸控最小命中尺寸 */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}