/* ============================================================
   共享設計 Tokens（單一來源）
   來源: doc/design-system.md（§2 字體 / §3 色彩 / §4 布局）

   規則：
   - 所有 prototype/*.html 必須引用本檔，不得在頁面內重複定義
     基礎 tokens（--bg-main、--surface-*、--text-* 等）。
   - 深色模式頁面（如 today-dark.html）僅可在頁面內覆寫
     Color 區塊的變數。
   - 新增顏色/字重/間距前，先加入本檔與 doc/design-system.md。
   ============================================================ */
:root {
  /* Color（design-system.md §3） */
  --bg-main: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-dark: #000000;
  --text-primary: #000000;
  --text-secondary: #666666;
  --text-muted: #8E8E9F;
  --border-light: #EEEEEE;
  --accent-red: #FF3B30;
  /* 詳情頁輔助藍色（書本詳情頁草稿） */
  --accent-blue: #0A6CD6;
  --date-blue: #6FA8DC;
  --accent-blue-soft: rgba(10, 108, 214, 0.12); /* 藍色標籤底色（Mood Badge / Q 標籤） */

  /* AI 助手卡片底色（ai-assistant.html 2×2 網格，純灰階統一底色） */
  --card-tint-1: #F4F4F4;         /* 卡片底色 */
  --card-tint-1-strong: #E7E7E7;  /* 圖標底（較卡片深一階） */

  /* Typography（design-system.md §2） */
  --font-serif: "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --weight-black: 900;
  --weight-bold: 700;
  --weight-semi: 600;
  --weight-medium: 500;
  --weight-regular: 400;

  /* Spacing（8px 網格，design-system.md §4） */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px; /* 16px 與 24px 之間的微調級距（fine-tune） */
  --space-6: 24px;
  --space-8: 32px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 12px; /* 卡片圓角 12px */
  --radius-full: 9999px;

  /* Icon */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;

  /* Shadow / Highlight（design-system.md §4.1） */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);          /* 靜止卡片陰影 */
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 28px rgba(0, 0, 0, 0.10); /* 卡片懸浮/聚焦層級 */
  --shadow-icon-tile: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.04), 0 4px 10px rgba(0, 0, 0, 0.06); /* 圖標底立體層次 */
  --shadow-btn: 0 4px 10px rgba(0, 0, 0, 0.16);          /* 黑色圓形按鈕靜止 */
  --shadow-btn-hover: 0 6px 14px rgba(0, 0, 0, 0.22);    /* 黑色圓形按鈕懸浮 */
  --border-card: rgba(0, 0, 0, 0.05);                     /* 灰階卡片細邊線 */
  --highlight-card: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));   /* 卡片頂部柔和高光 */
  --highlight-icon: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 48%); /* 圖標底亮面高光 */
}

/* ============================================================
   Import Mode（Figma 匯入用）
   開啟 ?import 時隱藏狀態列與底部導覽，只保留中間內容。
   對應 prototype/assets/import-mode.js。
   ============================================================ */
.import-mode .chrome-ui {
  display: none !important;
}

/* chrome=keep：匯入框保留 chrome-ui（如 iOS 狀態列）；
   個別視圖仍可用自身邏輯隱藏（如二級視圖收起底部導覽） */
.import-mode.chrome-keep .chrome-ui {
  display: flex !important;
}