/* ================================================================
   Phinn-Phang — Design Tokens（D6 建立，Week 2 全站規則的單一來源）

   讀法：
   - 第一層「原始值」只在這裡出現一次；元件一律引用第二層「語意 token」。
   - 顏色沿用 index.html 既有的 --gold / --text-* / --bg，不改名，不重複定義。
     這裡只補「index.html 沒有、但 components.jsx 已在用」的變數（--danger、--bg-input）。
   - 深色是預設（:root），淺色在 [data-theme="light"]，與 index.html 同一套切法。
   - 規則說明見 UI-RULES.txt（什麼時候該用、什麼時候不該用）。
   ================================================================ */

:root {
  /* ── 字體家族 ─────────────────────────────────────────────── */
  --font-zh: 'Noto Serif TC', 'Songti TC', 'PingFang TC', serif;   /* 中文與 UI */
  --font-en: 'Cormorant Garamond', Georgia, serif;                  /* 英文展示、小標、數字 */
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;    /* 只給版權列與程式碼 */
  --font-sign: 'Mrs Saint Delafield', 'Snell Roundhand', cursive;   /* 手寫簽名（D15 關於頁），只給 --fs-sign 用 */

  /* ── 字級階層（7 級，全站只用這 7 個） ────────────────────── */
  --fs-display: clamp(34px, 4.2vw, 52px);  /* 一頁一次：首頁第一屏主標 */
  --fs-h2:      clamp(24px, 2.8vw, 34px);  /* 區塊標題（SectionTitle） */
  --fs-h3:      clamp(18px, 2vw, 22px);    /* 卡片標題、步驟名 */
  --fs-lead:    clamp(17px, 2.2vw, 21px);  /* 引言、區塊開場一句話 */
  --fs-body:    15px;                      /* 內文（原 13–14 → 15，可讀性） */
  --fs-small:   13px;                      /* 說明、卡片副文、按鈕 */
  --fs-caption: 12px;                      /* 註記、版權、表單標籤 */
  --fs-eyebrow: 11px;                      /* 英文小標，唯一例外的 11px */
  --fs-input:   16px;                      /* 表單輸入框專用。⚠️ 不可低於 16px：
                                              iOS Safari 會在 focus 小於 16px 的
                                              輸入框時自動放大整個頁面。 */
  /* D15 關於頁新增兩級（Rachel 2026-10-13 定案，參考 Aesthetics 版面）：
     --fs-hero 封面級英文大標，一頁最多一次，目前只有關於頁的「About」；
     --fs-sign 手寫簽名。兩者都只配英文字體，不給中文用。 */
  --fs-hero:    clamp(64px, 10.5vw, 136px);
  --fs-sign:    clamp(44px, 5.4vw, 72px);

  /* ── 字重（只有 300 / 400 / 500） ─────────────────────────── */
  --fw-light: 300;    /* 內文預設 */
  --fw-regular: 400;  /* 標題、需要站出來的字 */
  --fw-medium: 500;   /* 只給英文 Cormorant 的價格與數字 */

  /* ── 行距 ───────────────────────────────────────────────── */
  --lh-display: 1.25;
  --lh-heading: 1.35;
  --lh-body: 1.85;
  --lh-tight: 1.5;    /* 按鈕、標籤、單行 UI */

  /* ── 字距（5 級，取代原本 15 種寫法） ─────────────────────── */
  --ls-display: 0.06em;
  --ls-heading: 0.12em;
  --ls-body: 0.04em;
  --ls-label: 0.10em;    /* 按鈕、標籤、導覽 */
  --ls-eyebrow: 0.30em;  /* 英文小標，固定一個值 */
  --ls-hero: -0.01em;    /* --fs-hero 專用：大字要略收才不會散 */

  /* ── 間距刻度（4 的倍數） ──────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --section-y: clamp(56px, 7vw, 96px);     /* 區塊上下留白 */
  --section-x: clamp(20px, 5vw, 80px);     /* 區塊左右留白（沿用現況） */
  --content-max: 680px;                    /* 置中文字欄最大寬 */

  /* ── 圓角（品牌是銳角編輯風：預設 0） ───────────────────── */
  --radius-0: 0;
  --radius-round: 50%;   /* 只給圓形照片、圓點、步驟數字 */

  /* ── 線條 ───────────────────────────────────────────────── */
  --rule-w: 32px;                                  /* 標題下的金色短線，固定寬度 */
  --line-gold:        rgba(var(--gold-rgb), 0.28); /* 金色細線：分隔、外框 */
  --line-gold-strong: rgba(var(--gold-rgb), 0.55); /* 金色短線本體、hover 外框 */
  --line-neutral:     rgba(var(--text-rgb), 0.10); /* 不想被注意到的分隔線 */

  /* ── 陰影（3 級，取代原本 10 種） ─────────────────────────── */
  --shadow-rest:  0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.22);
  --shadow-modal: 0 40px 120px rgba(0, 0, 0, 0.60);

  /* ── 動態 ───────────────────────────────────────────────── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.35s;

  /* ── 狀態色（index.html 原本沒有；components.jsx 已在引用） ── */
  --danger: #C86050;
  --danger-rgb: 200, 96, 80;
  --success: #8FA87E;
  --success-rgb: 143, 168, 126;
  --bg-input: rgba(var(--gold-rgb), 0.06);

  /* ── 按鈕語意色 ─────────────────────────────────────────── */
  --btn-primary-bg: var(--gold);
  --btn-primary-fg: #1A1612;                       /* 深色版：金底黑字 */
  --btn-primary-bg-hover: #D6A66A;
  --btn-secondary-fg: var(--text-main);
  --btn-secondary-border: var(--line-gold-strong);
  --btn-focus-ring: rgba(var(--gold-rgb), 0.55);
}

[data-theme="light"] {
  --danger: #9A3828;
  --danger-rgb: 154, 56, 40;
  --success: #5E7A4E;
  --success-rgb: 94, 122, 78;
  --bg-input: #F5EFE6;
  --shadow-rest:  0 4px 20px rgba(26, 15, 8, 0.06);
  --shadow-hover: 0 12px 40px rgba(26, 15, 8, 0.12);
  --shadow-modal: 0 20px 60px rgba(26, 15, 8, 0.10);

  --btn-primary-bg: var(--gold);
  --btn-primary-fg: #FFFFFF;                       /* 淺色版：深金底白字 */
  --btn-primary-bg-hover: #6B4C1E;
}

/* ================================================================
   按鈕（三種 × 六種狀態）。JSX 端用 <Btn variant="primary|secondary|text">。
   ================================================================ */
.pp-btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;                      /* 手指可點：≥ 44px */
  padding: 0 var(--sp-6);
  font-family: var(--font-zh);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-label);
  text-indent: var(--ls-label);          /* 補回字距造成的右側空隙，讓字真正置中 */
  line-height: var(--lh-tight);
  border-radius: var(--radius-0);
  border: 1px solid transparent;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              opacity var(--dur-base) var(--ease);
}

/* 主要：一屏只能有一顆 */
.pp-btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bg);
}
.pp-btn--primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); }

/* 次要：描邊，站在主要旁邊時讓位 */
.pp-btn--secondary {
  background: transparent;
  color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-border);
}
.pp-btn--secondary:hover { color: var(--gold); border-color: var(--gold); }

/* 文字：底線連結型，給「返回」「看更多」這種不該搶眼的動作 */
.pp-btn--text {
  min-height: 0;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line-gold);
  color: var(--text-sub);
  font-size: var(--fs-caption);
}
.pp-btn--text:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* focus：只在鍵盤操作時出現，滑鼠點不會閃一圈 */
.pp-btn:focus { outline: none; }
.pp-btn:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 3px;
}

/* loading：文字保留佔位但透明，右側轉一個細環；同時請加 aria-busy="true" */
.pp-btn.is-loading { color: transparent !important; pointer-events: none; }
.pp-btn.is-loading::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  border-color: rgba(var(--gold-rgb), 0.25);
  border-top-color: var(--gold);
  animation: pp-spin 0.8s linear infinite;
}
.pp-btn--primary.is-loading::after { border-color: rgba(255,255,255,0.35); border-top-color: var(--btn-primary-fg); }
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* disabled：降不透明度，不換色，讓它看起來「還是那顆按鈕，只是現在不能按」 */
.pp-btn:disabled, .pp-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* error / success：只改外框與字色，留給「送出後」的瞬間回饋，不做常駐配色 */
.pp-btn.is-error   { background: transparent; color: var(--danger);  border-color: var(--danger); }
.pp-btn.is-success { background: transparent; color: var(--success); border-color: var(--success); }

/* 並排按鈕群 */
.pp-btn-row { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }

/* ================================================================
   文字樣式（可直接套 className，與 token 一一對應）
   ================================================================ */
.pp-eyebrow {
  font-family: var(--font-en);
  font-style: italic;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  line-height: var(--lh-tight);
}
.pp-display {
  font-family: var(--font-zh);
  font-size: var(--fs-display);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  color: var(--text-main);
  text-wrap: balance;
}
.pp-lead {
  font-family: var(--font-zh);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--text-main);
}
.pp-body {
  font-family: var(--font-zh);
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-body);
  line-height: var(--lh-body);
  color: var(--text-sub);
}
.pp-caption {
  font-family: var(--font-zh);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  color: var(--text-mute);
}

/* ================================================================
   圖片 placeholder（D8 / PP-QA-010）
   圖片載入失敗時不再 display:none（版面會塌一塊），改成留住原本的框：
   淡底色 ＋ 金色細框 ＋ 一行小字。明暗主題各自吃現成的 --bg2 / --gold。
   用法：JSX 的 <SmartImg> 失敗時自動換成 <div class="pp-imgph">。
   ================================================================ */
.pp-imgph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-4);
  background: var(--bg2, rgba(var(--gold-rgb), 0.05));   /* reserve / upload-payment 沒有 --bg2，給退路 */
  border: 1px solid var(--line-gold);
  box-sizing: border-box;
}
.pp-imgph::before {                 /* 極簡記號：一條金色短線，不放 logo 也不放圖示 */
  content: '';
  width: var(--rule-w);
  height: 1px;
  background: var(--gold);
  opacity: 0.45;
}
.pp-imgph-label {
  font-family: var(--font-zh);
  font-size: var(--fs-caption);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
  color: var(--text-mute);
}

/* 金色短線：標題下方那一條。固定寬度，一個區塊只出現一次 */
.pp-rule {
  width: var(--rule-w);
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}
.pp-rule--center { margin-left: auto; margin-right: auto; }

/* 區塊分隔線：想分隔但不想再多一條金線時用 */
.pp-divider { border: 0; height: 1px; background: var(--line-neutral); margin: 0; }
.pp-divider--gold { background: var(--line-gold); }

/* ================================================================
   裝飾密度：2026-09-16 定調為 mid，值直接寫死。
   整寬線改中性、Hero 底線拿掉、標題短線保留、FooterCTA 底光 50%。
   ================================================================ */
:root {
  --deco-section-line: var(--line-neutral);
  --deco-hero-line: transparent;
  --deco-glow-opacity: 0.5;
  --deco-rule-opacity: 0.5;
}

/* ================================================================
   .pp-tap —— 可點範圍補正（D9）
   視覺尺寸完全不動，只用一個透明的 ::after 把「手指點得到的範圍」
   撐到 44x44（iOS HIG 的最小值；WCAG 2.5.8 AA 是 24x24）。
   為什麼不是直接加 padding：padding 會把旁邊的元素推開，版面會跟著變；
   ::after 是絕對定位，對版面零影響。
   用在「視覺上刻意要小」的控制項：導覽列的主題切換鈕、漢堡鈕、
   關於頁的 IG 連結。頁面內容裡的行動點請用 .pp-btn，本來就 48px。
   注意：父層若有 overflow:hidden 會被裁掉，用之前先確認。
   ================================================================ */
.pp-tap { position: relative; }
.pp-tap::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: max(100%, 44px);
}

/* ================================================================
   香氛商品（D10）：列表頁與商品頁共用的三樣東西
   ================================================================ */

/* 庫存狀態：顏色＋文字雙重編碼（色弱也分得出來）。狀態由數量推出，見 app-data.js skuStatus */
:root { --status-dot: 6px; }
.pp-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-zh);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-tight);
}
.pp-status::before {
  content: '';
  width: var(--status-dot);
  height: var(--status-dot);
  border-radius: var(--radius-round);
  background: currentColor;
}
.pp-status--instock  { color: var(--success); }
.pp-status--preorder { color: var(--gold); }
.pp-status--soldout  { color: var(--text-mute); }

/* 價格：英文字體、等寬數字（換容量時價格不會左右跳） */
.pp-price {
  font-family: var(--font-en);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-body);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* 資料還沒填的欄位：「待定」。後台補上資料後自然消失，不需要改程式 */
.pp-pending {
  font-family: var(--font-zh);
  font-size: var(--fs-caption);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-label);
  color: var(--text-mute);
}

@media (prefers-reduced-motion: reduce) {
  .pp-btn { transition: none; }
  .pp-btn.is-loading::after { animation-duration: 1.6s; }
}