/* ========================================================
   1. DESIGN TOKENS & CSS VARIABLES
   ======================================================== */
:root {
  --red-primary: #3B4C31;
  --red-dark: #233827;
  --red-light: #526746;
  --red-card: #3B4C31;
  --red-card-inner: #2b3824;
  --gold: #b99b55;
  --gold-light: #e4d8b8;
  --gold-dark: #8f7339;
  --paper-bg: #f7f7f1;
  --paper-card: #f8f5ea;
  --cream-text: #fffdf5;
  --cream-sub: rgba(255, 253, 245, 0.82);
  --ink: #2d4030;
  --muted: #6d796c;
  --border-red: rgba(59, 76, 49, 0.18);
  --border-gold: rgba(185, 155, 85, 0.42);
  --shadow-card: 0 18px 42px rgba(40, 62, 43, 0.18), 0 4px 12px rgba(24, 40, 27, 0.08);
  --font-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-title: "Cinzel", "Playfair Display", Georgia, serif;
  --font-script: "Pattaya", "Alex Brush", cursive;
  --font-body: "Lora", "Segoe UI", Arial, sans-serif;
  --font-sans: "Montserrat", "Segoe UI", Arial, sans-serif;
}

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

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