/* CSS VARIABLES */
:root {
  /* Colors */
  --color-primary: #b0183c;
  --color-bg-main: #12010a;
  --color-bg-card: rgb(243, 240, 240);
  --color-text-dark: #333333;
  --color-text-muted: #555;
  --color-white: #fff;
  
  /* Typography */
  --font-main: "Work Sans", sans-serif;
  --font-display: "Berkshire Swash", serif;
  --font-fire: "Caesar Dressing", cursive;
  
  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  
  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 18px;
  --radius-round: 999px;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.4);
  --shadow-xl: rgba(43, 0, 0, 0.56) 0px 22px 70px 4px;
  
  /* Transitions */
  --transition-fast: 0.12s ease;
  --transition-base: 0.28s ease;
  --transition-slow: 0.4s ease;
  
  /* Z-index layers */
  --z-confetti: 3000;
  --z-modal: 9500;
  --z-banner-popup: 9600;
  --z-easter-modal: 9800;
  --z-morbius: 9999;
  --z-snow: 9999;
}