/* ========================================================
   1. DESIGN TOKENS & CSS VARIABLES — BLUE WATERCOLOR & CANSON
   ======================================================== */
:root {
  /* Bảng màu Xanh Nước Biển & Giấy Canson */
  --page-bg: #f5f7f9;
  --card-bg: #ffffff;
  --card-border: rgba(129, 156, 190, 0.45);
  --card-shadow: 0 14px 38px rgba(21, 51, 83, 0.08);

  --blue-navy: #153353;
  --blue-deep: #0f2742;
  --blue-medium: #234975;
  --blue-slate: #4a6888;
  --blue-accent: #6887ad;
  --blue-pill: #6887ad;
  --blue-pill-hover: #506e92;
  --blue-border-pill: #819cbe;
  --blue-soft: #f0f5fa;
  --blue-tint: #e6f0f8;
  --blue-card-border: #a5bad1;

  --rose-primary: var(--blue-navy);
  --rose-dark: var(--blue-deep);
  --rose-light: var(--blue-accent);
  --rose-accent: var(--blue-accent);
  --rose-soft: var(--blue-soft);
  --rose-pill: var(--blue-pill);
  --rose-pill-hover: var(--blue-pill-hover);
  --rose-border-pill: var(--blue-border-pill);

  --text-heading: #153353;
  --text-title: #153353;
  --text-body: #2c4663;
  --text-muted: #527092;
  --text-light: #6887ad;
  
  --white-card: #ffffff;
  --line-divider: #819cbe;

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

  /* Asset Textures */
  --canson-texture: url('../assets/19297e3c-5878-4682-a4b2-2a0b6ac07a7e.png');
  --loang-texture: url('../assets/c4873a25-f8cd-4f99-a184-c818f12a84cf.png');
  --rings-texture: url('../assets/2e4de64e-885b-4fea-bcd9-0541c5403e9c.png');
}

@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); }
}