/* ========================================================
   1. DESIGN TOKENS & CSS VARIABLES
   ======================================================== */
:root {
  --red-primary: #2f4529;
  --red-dark: #1e2e19;
  --red-light: #3f5d37;
  --red-card: #2a3e24;
  --red-card-inner: #22331d;
  --gold: #c9a24a;
  --gold-light: #e5c97d;
  --gold-dark: #9e792c;
  --paper-bg: #f7f7f1;
  --paper-card: #f1f1e9;
  --cream-text: #f9faf1;
  --cream-sub: rgba(249, 250, 241, 0.82);
  --ink: #1f281d;
  --muted: #6c756a;
  --border-red: rgba(47, 69, 41, 0.18);
  --border-gold: rgba(201, 162, 74, 0.45);
  --shadow-card: 0 20px 45px rgba(30, 46, 25, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08);
  --font-serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-title: "Cinzel", "Playfair Display", Georgia, serif;
  --font-script: "Pattaya", 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); }
}