/*
  設計語言：溫馨柔和極簡健康 App 風格（暱稱：eatmoji-style）
  來源：用 style-tool 分析 Eatmoji 類飲食紀錄 App 截圖萃取，2026-07-25
  用法：任何新專案要套用這個視覺風格，直接 @import 或複製這個檔案，
        不用重新描述風格、不用重新問使用者。
  字型檔案在同資料夾 fonts/（GenSenRoundedTW-M/B/H.woff2），部署時要一起複製到
  該專案的 public/fonts/ 底下，這個檔案裡的 @font-face 路徑才會生效。
*/

@font-face {
  font-family: 'GenSenRounded TW';
  src: url('/fonts/GenSenRoundedTW-M.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'GenSenRounded TW';
  src: url('/fonts/GenSenRoundedTW-B.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'GenSenRounded TW';
  src: url('/fonts/GenSenRoundedTW-H.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

:root {
  /* 底色 / 卡片 */
  --color-bg: #FBF9F8;           /* 整體頁面底色 */
  --color-card: #FFFFFF;         /* 內容區塊卡片與輸入框底色 */
  --color-input-bg: #F4F2F0;     /* 輸入框底色（比卡片色略深一階） */

  /* 文字 */
  --color-text-primary: #2C2A29;   /* 主要文字 */
  --color-text-secondary: #A09C98; /* 次要說明文字、chevron 箭頭、搜尋欄底色 */

  /* 主色 / 強調色 */
  --color-primary: #E86A7B;        /* 中央懸浮按鈕(+)、Toggle 開關、重要 CTA、圖表重點 */
  --color-primary-light: #FCE8EA;  /* 主色的淺色底，用於 badge/選中狀態背景 */

  /* 資料視覺化用的三色（進度條、折線圖節點、健康數值標示） */
  --color-accent-yellow: #F8D479;
  --color-accent-pink: #F89D8B;
  --color-accent-green: #C3E8D8;

  /* 字型：優先用自帶的圓體，字型檔載入失敗才退回系統字 */
  --font-main: 'GenSenRounded TW', -apple-system, BlinkMacSystemFont, 'PingFang TC',
               'SF Pro Text', 'SF Pro Display', 'Noto Sans TC', sans-serif;

  /* 圓角 / 陰影 / 間距 */
  --radius-card: 24px;     /* 卡片圓角，可用範圍 20–28px */
  --radius-btn: 999px;     /* 按鈕全圓角（膠囊狀） */
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.03); /* 極淡漫射軟陰影 */
  --spacing-edge: 16px;    /* 左右邊距，可用範圍 16–20px */
}

/* ⚠️ 字型檔只有 3 個粗細：500(M)／700(B)／900(H)，CSS 裡只能用這三個數字，
   用其他數字（例如 600）瀏覽器會用假粗體硬湊，字會變形、跟真正的字重不一致。 */

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-main);
  font-weight: 500; /* 內文預設用 Medium */
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 0;
  padding: var(--spacing-edge);
}

/* 字級：大標題 24px｜卡片標題 16px｜內文 14px｜次要標籤與數字 12px（比例約 2:1.33:1.16:1） */
h1, h2 {
  font-size: 24px;
  font-weight: 700; /* 標題與關鍵數字用 Bold */
  margin-bottom: var(--spacing-edge);
}

.card-title { font-size: 16px; font-weight: 700; }
.body-text { font-size: 14px; font-weight: 500; }
.label-text { font-size: 12px; font-weight: 500; color: var(--color-text-secondary); }

/* 數字/英文單位（kg, ml, kcal）半形、適度加粗，寫法範例：
   <span class="value">60</span><span class="unit">kg</span> */
.value { font-weight: 700; }
.unit { font-weight: 500; font-size: 0.75em; }

.card {
  background-color: var(--color-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 20px;
  margin-bottom: var(--spacing-edge);
  border: none;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-radius: var(--radius-btn);
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.subtext {
  color: var(--color-text-secondary);
  font-size: 12px;
}