/* ========================================================
   1. DESIGN TOKENS & CSS VARIABLES
   ======================================================== */
:root {
  --red-primary: #53100A;
  --red-dark: #4B0F09;
  --red-light: #60140D;
  --red-card: #6B1D15;
  --red-card-inner: #4B0F09;
  --gold: #F3CA68;
  --gold-light: #FBE28E;
  --gold-dark: #DDB24A;
  --paper-bg: #4B0F09;
  --paper-card: #53100A;
  --cream-text: #FFFFFF;
  --cream-sub: rgba(255, 255, 255, 0.92);
  --ink: #FFFFFF;
  --muted: rgba(255, 255, 255, 0.78);
  --border-red: rgba(243, 202, 104, 0.24);
  --border-gold: rgba(251, 226, 142, 0.5);
  --shadow-card: 0 12px 36px rgba(75, 15, 9, 0.3);
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-title: "Cormorant Garamond", "Cinzel", Georgia, serif;
  --font-script: "Pinyon Script", "Pattaya", "Alex Brush", cursive;
  --font-body: "Cormorant Garamond", "Lora", Georgia, 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); }
}