/* ========================================================
   1. DESIGN TOKENS & CSS VARIABLES — SAGE · ĐÀO
   ======================================================== */
:root {
  /* Bảng màu gốc (Sage · Đào) */
  --sage: #6b9080;
  --sage-deep: #3f6657;
  --peach: #ffd6a5;
  --cream: #ffefd9;
  --cream-soft: #fff6e8;
  --teal-ink: #264653;
  --line-peach: #e6c29a;
  --text-soft: #3f5560;
  --page-outer: #dbe7e0;

  /* Khung thiệp 900px; bìa ~640px; cột nội dung bên trong 560px */
  --app-width: 900px;
  --cover-width: 640px;
  --content-width: 560px;
  --gutter: 28px;
  --label-size: 10px;
  --lead-size: 12px; /* nhãn dẫn: "Tiệc cưới sẽ diễn ra vào lúc", "Trân trọng báo tin…" */
  --label-track: 4px;
  --headline-size: 22px; /* tiêu đề lớn của từng section */
  --venue-name-size: 27px; /* tên địa điểm: tiệc nhà trai, nhà gái, nơi cử hành lễ */
  --venue-address-size: 14px;

  /* Tên biến cũ giữ nguyên để các file CSS khác không phải đổi — trỏ sang bảng màu mới */
  --red-primary: var(--teal-ink);
  --red-dark: #1b333d;
  --red-light: var(--sage-deep);
  --red-card: var(--sage-deep);
  --red-card-inner: #345447;
  --gold: var(--peach);
  --gold-light: var(--peach);
  --gold-dark: var(--sage-deep);
  --paper-bg: var(--cream);
  --paper-card: var(--cream-soft);
  --cream-text: var(--cream);
  --cream-sub: rgba(255, 239, 217, 0.85);
  --ink: var(--teal-ink);
  --muted: var(--text-soft);
  --border-red: rgba(38, 70, 83, 0.18);
  --border-gold: var(--line-peach);
  --shadow-card: none;

  /* Biến dùng chung cho khối tiệc nhà gái (reception-bride.css) */
  --theme-primary: var(--teal-ink);
  --theme-text-muted: var(--text-soft);
  --theme-paper-warm: var(--peach);
  --theme-border: var(--line-peach);

  --font-display: "Oswald", "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --font-serif: var(--font-display);
  --font-title: var(--font-display);
  --font-script: var(--font-display);
  --font-body: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --font-sans: var(--font-body);
  --font-quote: var(--font-body);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes spin-vinyl {
  100% { transform: rotate(360deg); }
}