/* ========================================================
   1. DESIGN TOKENS & CSS VARIABLES — SCRAPBOOK POLAROID
   ======================================================== */
:root {
  /* Bảng màu gốc (giấy kraft chấm bi, polaroid trắng, note dán) */
  --paper: #F4EFE6;
  --paper-dot: #D9CFC0;
  --page-outer: #E7DFD2;
  --ink-dark: #2F2A26;
  --ink-soft: #4A433D;
  --ink-muted: #6B625A;
  --polaroid: #FFFFFF;
  --photo-1: #E6DED2;
  --photo-2: #DDD3C5;
  --photo-3: #E9E2D6;
  --rule-line: #E9E2D6;
  --accent-red: #C0463B;
  --note-yellow: #FBE7A1;
  --note-pink: #F8E3E4;
  --note-blue: #EAF1F6;
  --note-green: #E5EFD9;
  --tape-pink: rgba(232, 180, 184, 0.75);
  --tape-blue: rgba(169, 196, 217, 0.8);

  --shadow-lg: 0 6px 18px rgba(47, 42, 38, 0.14);
  --shadow-note: 0 6px 16px rgba(47, 42, 38, 0.14);
  --shadow-md: 0 4px 12px rgba(47, 42, 38, 0.12);
  --shadow-paper: 0 4px 12px rgba(47, 42, 38, 0.1);
  --shadow-sm: 0 3px 8px rgba(47, 42, 38, 0.12);
  --shadow-xs: 0 3px 8px rgba(47, 42, 38, 0.1);
  --hard-shadow: 3px 3px 0 var(--ink-dark);

  /* Nền chấm bi 18px */
  --dot-bg: radial-gradient(var(--paper-dot) 1px, transparent 1px);
  --dot-size: 18px 18px;
  /* Giấy kẻ dòng 28px */
  --ruled-bg: repeating-linear-gradient(transparent 0 27px, var(--rule-line) 27px 28px);

  /* Khung thiệp 900px; cột nội dung bên trong 560px */
  --app-width: 900px;
  --cover-width: 900px;
  --content-width: 560px;
  --gutter: 28px;
  --section-gap: 64px;

  /* 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(--ink-dark);
  --red-dark: var(--ink-dark);
  --red-light: var(--accent-red);
  --red-card: var(--note-yellow);
  --red-card-inner: var(--note-yellow);
  --gold: var(--note-yellow);
  --gold-light: var(--note-yellow);
  --gold-dark: var(--ink-dark);
  --paper-bg: var(--paper);
  --paper-card: var(--polaroid);
  --cream-text: var(--ink-dark);
  --cream-sub: var(--ink-muted);
  --ink: var(--ink-dark);
  --muted: var(--ink-muted);
  --border-red: rgba(47, 42, 38, 0.18);
  --border-gold: var(--paper-dot);
  --shadow-card: var(--shadow-md);

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

  --font-hand: "Caveat", cursive;
  --font-display: var(--font-hand);
  --font-serif: var(--font-hand);
  --font-title: var(--font-hand);
  --font-script: var(--font-hand);
  --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); }
}