/* ========================================================
   1. DESIGN TOKENS & CSS VARIABLES
   ======================================================== */
:root {
  --red-primary: #511419;
  --red-dark: #380a0e;
  --red-light: #6e1a20;
  --red-card: #4a1015;
  --red-card-inner: #3d0d11;
  --gold: #c9a24a;
  --gold-light: #e5c97d;
  --gold-dark: #9e792c;
  --paper-bg: #fbf7f0;
  --paper-card: #f7f1e6;
  --cream-text: #fff6ee;
  --cream-sub: rgba(255, 246, 238, 0.82);
  --ink: #2b1416;
  --muted: #735a5d;
  --border-red: rgba(81, 20, 25, 0.18);
  --border-gold: rgba(201, 162, 74, 0.45);
  --shadow-card: 0 20px 45px rgba(56, 10, 14, 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", "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); }
}