/* ============================================================
   wedding-kit 共用底座｜base.css
   設計 token（CSS 變數）＋ reset ＋ 響應式 helper
   之後做店家一頁式網站也共用這一層，只在模板層換 token 值
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100dvh; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; }
ul, ol { list-style: none; }
/* hidden 屬性永遠贏過任何 display 設定（避免被元件的 display:grid 蓋掉） */
[hidden] { display: none !important; }

/* ---------- 設計 token（骨白 × 深森林綠，editorial luxury）---------- */
:root {
  /* 色彩 */
  --paper:        #f6f5f1;              /* 骨白底 */
  --paper-raise:  #fdfcfa;              /* 浮起表面 */
  --ink:          #22271f;              /* 深綠近黑（正文/標題） */
  --ink-soft:     #5c6156;              /* 次要文字 */
  --accent:       #3f4d3a;              /* 深森林綠（唯一強調色） */
  --accent-ink:   #f2f1ec;              /* 深綠底上的文字色 */
  --hairline:     rgba(34, 39, 31, .14);/* 髮絲線 */
  --scrim:        linear-gradient(180deg, rgba(20,24,18,0) 30%, rgba(20,24,18,.55) 100%);
  --ok:           #3f4d3a;
  --warn:         #8a4b32;              /* 錯誤/警示（磚紅，僅表單狀態用） */

  /* 字型 */
  --font-serif-tc: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --font-serif-latin: "Cormorant Garamond", "Georgia", serif;

  /* 字級（fluid） */
  --text-hero:   clamp(2.6rem, 9vw, 5.2rem);
  --text-h2:     clamp(1.6rem, 4.5vw, 2.4rem);
  --text-h3:     clamp(1.15rem, 3vw, 1.4rem);
  --text-body:   clamp(1rem, 2.6vw, 1.0625rem);
  --text-small:  .875rem;
  --text-tiny:   .75rem;

  /* 間距 */
  --section-y:   clamp(5rem, 14vw, 9rem);
  --gutter:      clamp(1.25rem, 5vw, 2.5rem);
  --content-max: 40rem;   /* 內文欄寬（手機優先，喜帖以單欄為主） */
  --wide-max:    68rem;   /* 寬版區塊（gallery、地圖） */

  /* 圓角與陰影（全站統一：大圓角 + 柔和環境陰影） */
  --radius:      1.25rem;
  --radius-pill: 999px;
  --shadow-soft: 0 24px 60px -24px rgba(34, 39, 31, .18);

  /* 動態 */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --dur:         .9s;
}

/* ---------- 版面 helper ---------- */
.container       { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide  { width: 100%; max-width: var(--wide-max);    margin-inline: auto; padding-inline: var(--gutter); }
.section         { padding-block: var(--section-y); }

/* ---------- 滾動淡入（IntersectionObserver 由 utils.js 驅動）---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
/* 同組錯落 */
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

/* ---------- 倒數數字跳動（utils.js 值變化時重播）---------- */
@keyframes cd-tick {
  from { opacity: .25; transform: translateY(.3em); }
  to   { opacity: 1;   transform: none; }
}
.cd-tick { animation: cd-tick .5s var(--ease-out); }

/* ---------- Lightbox 開啟過場（display 切換後重播）---------- */
@keyframes wk-lb-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes wk-lb-img-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}
.wk-lightbox.is-open       { animation: wk-lb-in .3s var(--ease-out); }
.wk-lightbox.is-open img   { animation: wk-lb-img-in .45s var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- 通用元件 ---------- */
/* 主按鈕（pill、實色、按壓回饋） */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .875rem 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--text-body); letter-spacing: .06em;
  transition: transform .35s var(--ease-out), opacity .35s var(--ease-out);
  text-decoration: none;
}
.btn:hover  { opacity: .92; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* 次按鈕（描邊） */
.btn-ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--ink); opacity: 1; }

/* 深色區塊內的按鈕反轉 */
.on-dark .btn        { background: var(--accent-ink); color: var(--accent); }
.on-dark .btn-ghost  { background: transparent; color: var(--accent-ink); box-shadow: inset 0 0 0 1px rgba(242,241,236,.4); }
.on-dark .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--accent-ink); }

/* 表單 */
.field { display: grid; gap: .5rem; }
.field label { font-size: var(--text-small); letter-spacing: .08em; }
.field input[type="text"], .field input[type="email"], .field input[type="number"],
.field textarea, .field select {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) * .6);
  background: var(--paper-raise);
  color: var(--ink);
  transition: border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(63, 77, 58, .18);
}
.field ::placeholder { color: var(--ink-soft); opacity: .7; }
.field .error-text { color: var(--warn); font-size: var(--text-small); display: none; }
.field.has-error input, .field.has-error textarea { border-color: var(--warn); }
.field.has-error .error-text { display: block; }

/* 螢幕閱讀器專用 */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* honeypot：視覺上完全移出（不用 display:none，避免部分機器人偵測） */
.hp-field {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}