/* 
  Story & Donations Shared Theme 
  Contains common design tokens, variables, and animations
*/

:root {
  /* Brand Palette */
  --gold: #D4AF37;
  --yellow: #FFD84D;
  --charcoal: #1E1E1E;
  --light-bg: #F4F4F2;
  --white: #FFFFFF;
  --black: #000000;
  --gray-text: #333333;

  /* Design Tokens */
  --radius: 20px; /* Slightly tighter for card feel */
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
  --shadow-hard: 4px 4px 0px var(--black);
  --shadow-hover: 8px 8px 0px var(--black);
  --border-thick: 2px solid var(--black);

  /* Typography */
  --font-brand: 'Be Vietnam Pro', sans-serif;
  --font-hand: 'Caveat', cursive;

  /* Animation */
  --transition-standard: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* --- SHARED ANIMATIONS --- */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

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

@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes bounce-sm {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes pop-in-up {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pulse-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}