/* ==========================================================================
   1. DESIGN TOKENS & CSS VARIABLES (CHỮ HỶ NỀN ĐỎ)
   ========================================================================== */
:root {
  /* Bảng màu: nền đỏ thẫm, chữ vàng kim & kem, thẻ kem chữ đỏ nâu.
     --vn-red là màu chủ đạo, --vn-gold là màu nhấn (tên token giữ theo theme-core.css) */
  --vn-red: #A3161C;
  --vn-red-deep: #8A1016;
  --vn-red-ink: #7A0E13;
  --vn-red-tint: rgba(163, 22, 28, .08);
  --vn-lotus: #F2CD74;
  --vn-gold: #F2CD74;
  --vn-gold-light: #F2CD74;
  --vn-gold-line: #E8C36A;
  --vn-gold-text: #8A5A1E;
  --vn-gold-tint: rgba(242, 205, 116, .35);
  --vn-cream: #FFF4DC;
  --vn-paper: #FBEBCB;
  --vn-paper-light: #FFF4DC;
  --vn-paper-mat: #F1DFC0;
  --vn-ink: #5A1013;
  --vn-ink-muted: #7A3A2E;
  --vn-line: #E2C99A;
  --vn-line-dashed: #E2C99A;
  --vn-input-border: #E2C99A;
  --vn-outside: #6E0C10;
  --vn-overlay: rgba(48, 6, 8, .78);
  --vn-overlay-strong: rgba(36, 4, 6, .95);
  --vn-shadow: rgba(48, 6, 8, .3);

  /* Theme mappings for existing components */
  --red-primary: #A3161C;
  --red-dark: #8A1016;
  --red-light: #C0262C;
  --red-card: #A3161C;
  --red-card-inner: #8A1016;
  --gold: #F2CD74;
  --gold-light: #F2CD74;
  --gold-dark: #8A5A1E;
  --paper-bg: #A3161C;
  --paper-card: #FFF4DC;
  --cream-text: #FFF4DC;
  --cream-sub: rgba(255, 244, 220, 0.85);
  --ink: #5A1013;
  --muted: #7A3A2E;
  --border-red: rgba(163, 22, 28, 0.25);
  --border-gold: #E8C36A;
  --shadow-card: none;

  /* Typography */
  --font-display: "Playfair Display", Georgia, "PingFang SC", "Microsoft YaHei", serif;
  --font-serif: "Playfair Display", Georgia, serif;
  --font-title: "Playfair Display", Georgia, serif;
  --font-quote: "Playfair Display", Georgia, serif;
  --font-han: "Ma Shan Zheng", "STKaiti", "KaiTi", serif;
  --font-body: "Be Vietnam Pro", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-sans: "Be Vietnam Pro", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

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