/* ============================================================
   THIỆP CƯỚI ONLINE — Hệ màu Trắng kem & Xanh ô liu (sage)
   Tối giản · sang trọng · nhiều khoảng trắng
   ============================================================ */

:root {
  /* ---- Palette ---- */
  --cream:       #F8F5EE;   /* nền chính, ngà ấm */
  --cream-2:     #F1ECE1;   /* nền phụ */
  --cream-3:     #E9E2D3;   /* nền nhấn nhẹ / placeholder */
  --paper:       #FCFAF5;   /* trắng giấy cho card */

  --sage:        #8C9A7C;   /* xanh ô liu chủ đạo */
  --sage-deep:   #5C6A4E;   /* sage đậm, dùng cho chữ nhấn */
  --sage-soft:   #BCC4AE;   /* sage nhạt */
  --sage-mist:   #DCE0D2;   /* sage rất nhạt, nền */

  --ink:         #3A3D34;   /* chữ chính, nâu xám ấm */
  --ink-soft:    #6E7065;   /* chữ phụ */
  --ink-faint:   #9A9B90;   /* chú thích mờ */

  --line:        rgba(92,106,78,.28);
  --line-soft:   rgba(92,106,78,.16);
  --gold:        #B79B6E;   /* nhấn taupe vàng rất tiết chế */

  /* ---- Type ---- */
  --serif:  "EB Garamond", Georgia, serif;
  --serif-2:"Playfair Display", Georgia, serif;
  --sans:   "Be Vietnam Pro", system-ui, sans-serif;

  /* ---- Shape ---- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;

  --shadow-card: 0 1px 2px rgba(58,61,52,.05), 0 10px 30px rgba(58,61,52,.07);
  --shadow-soft: 0 6px 24px rgba(58,61,52,.08);
}

* { box-sizing: border-box; }

/* Utility tracked label used across variants */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

/* Hairline divider */
.hairline {
  width: 56px;
  height: 1px;
  background: var(--line);
  border: 0;
}

/* ---- Photo placeholder (thay bằng ảnh thật sau) ---- */
.photo {
  position: relative;
  background:
    radial-gradient(120% 120% at 30% 20%, var(--sage-mist), var(--cream-3) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--sage-deep);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo .photo-mark {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: .6;
}
.photo .photo-mark svg { width: 26px; height: 26px; }
.photo .photo-mark span {
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase;
}

/* hide scrollbars inside phone screens */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Reveal: opacity + transform do JS tween điều khiển (xem invite-shared.jsx).
   Mặc định opacity:1 để nội dung không bao giờ bị kẹt ẩn nếu JS chưa chạy. */
.reveal { opacity: 1; }