/* ==========================================================================
   1. DESIGN TOKENS & CSS VARIABLES (SỔ TAY CÓ MỤC LỤC — ĐẤT NUNG)
   ========================================================================== */
:root {
  /* Bảng màu: nền giấy kraft, bìa đất nung, trang kem, tab vàng nghệ / xanh lá.
     --vn-red là màu chủ đạo, --vn-gold là màu nhấn (tên token giữ theo theme-core.css) */
  --st-terracotta: #B8603E;
  --st-terracotta-deep: #9E4F31;
  --st-mustard: #D9A23C;
  --st-sage: #8A9A72;
  --st-sage-deep: #5D6B48;
  --st-kraft: #E9DCC8;
  --st-page: #F8F1E5;
  --st-page-line: #EADCC6;
  --st-margin-line: #E2A08A;
  --st-photo-mat: #E3D3BB;
  --st-ink: #3A2A22;
  --st-ink-soft: #5A4A3E;
  --st-muted: #6B5A4E;
  --st-rule: #D9C7A8;
  --st-leader: #C9B596;
  --st-note-yellow: #FFF8D6;
  --st-note-green: #E9F0DD;
  --st-chip-yellow: #F1E2C4;
  --st-chip-yellow-ink: #8A6A20;
  --st-chip-green: #E3E8D6;
  --st-page-shadow: 0 6px 16px rgba(58, 42, 34, .1);

  --vn-red: #B8603E;
  --vn-red-deep: #9E4F31;
  --vn-red-ink: #3A2A22;
  --vn-red-tint: rgba(184, 96, 62, .1);
  --vn-lotus: #D9A23C;
  --vn-gold: #D9A23C;
  --vn-gold-light: #F8F1E5;
  --vn-gold-line: #D9C7A8;
  --vn-gold-text: #8A6A20;
  --vn-gold-tint: rgba(248, 241, 229, .35);
  --vn-cream: #F8F1E5;
  --vn-paper: #F3EBDD;
  --vn-paper-light: #F8F1E5;
  --vn-paper-mat: #E3D3BB;
  --vn-ink: #3A2A22;
  --vn-ink-muted: #6B5A4E;
  --vn-line: #D9C7A8;
  --vn-line-dashed: #D9C7A8;
  --vn-input-border: #3A2A22;
  --vn-outside: #DCCBB2;
  --vn-overlay: rgba(58, 42, 34, .62);
  --vn-overlay-strong: rgba(36, 26, 20, .94);
  --vn-shadow: rgba(58, 42, 34, .25);

  /* Theme mappings for existing components */
  --red-primary: #B8603E;
  --red-dark: #9E4F31;
  --red-light: #C97556;
  --red-card: #B8603E;
  --red-card-inner: #9E4F31;
  --gold: #D9A23C;
  --gold-light: #F1E2C4;
  --gold-dark: #8A6A20;
  --paper-bg: #E9DCC8;
  --paper-card: #F8F1E5;
  --cream-text: #F8F1E5;
  --cream-sub: rgba(248, 241, 229, 0.85);
  --ink: #3A2A22;
  --muted: #6B5A4E;
  --border-red: rgba(184, 96, 62, 0.25);
  --border-gold: #D9C7A8;
  --shadow-card: none;

  /* Typography */
  --font-display: "Prata", Georgia, "PingFang SC", "Microsoft YaHei", serif;
  --font-serif: "Prata", Georgia, serif;
  --font-title: "Prata", Georgia, serif;
  --font-quote: "Prata", Georgia, serif;
  --font-body: "Lexend", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-sans: "Lexend", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

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