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

  --rose-primary: #943d49;
  --rose-dark: #6e2730;
  --rose-light: #b54f5c;
  --rose-accent: #c46270;
  --rose-soft: #fbf0f0;
  --rose-pill: #b54f5c;
  --rose-pill-hover: #a13d4b;
  --rose-border-pill: #d69ca5;

  --text-heading: #a14856;
  --text-title: #943d49;
  --text-body: #a14856;
  --text-muted: #b55361;
  --text-light: #c46270;
  
  --white-card: #ffffff;
  --line-divider: #dfb2b8;

  /* 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); }
}