/* ========================================================
   1. DESIGN TOKENS & CSS VARIABLES — HOA LỤA - HỒNG
   ======================================================== */
:root {
  /* Bảng màu Hoa Lụa - Hồng */
  --page-bg: #f8f6f2;
  --card-bg: #faf7f0;
  --card-border: rgba(228, 214, 175, 0.45);
  --card-shadow: 0 14px 38px rgba(185, 169, 125, 0.12);

  --rose-primary: #947d3d;
  --rose-dark: #6e5b27;
  --rose-light: #b59a4f;
  --rose-accent: #c4aa62;
  --rose-soft: #fbf8f0;
  --rose-pill: #b59a4f;
  --rose-pill-hover: #a1863d;
  --rose-border-pill: #d6c79c;

  --text-heading: #a18948;
  --text-title: #947d3d;
  --text-body: #a18948;
  --text-muted: #b59b53;
  --text-light: #c4aa62;
  
  --white-card: #ffffff;
  --line-divider: #dfd3b2;

  /* Typography — khớp thiệp-3 (Cormorant / Alex Brush / Montserrat) */
  --font-title: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-script: "Alex Brush", "Great Vibes", cursive;
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: var(--font-sans);
}

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

@keyframes floatSlight {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

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