/* Color Palette - Based on #e31618 (Primary Red) and #e94e1b (Secondary Orange) */
:root {
  /* Primary Colors */
  --color-primary-red: #e31618;
  --color-primary-red-dark: #b80d0e;
  --color-primary-red-light: #f07472;

  /* Secondary Colors */
  --color-secondary-orange: #e94e1b;
  --color-secondary-orange-dark: #d63f0f;
  --color-secondary-orange-light: #f5844a;

  /* Accent Colors - Harmonious with the primary palette */
  --color-accent-yellow: #ffc107;
  --color-accent-yellow-light: #ffeb3b;
  --color-accent-coral: #ff6b35;

  /* Neutral Colors */
  --color-dark: #1a1a1a;
  --color-gray-dark: #333333;
  --color-gray: #666666;
  --color-gray-light: #f5f5f5;
  --color-white: #ffffff;
}

/* Text Animation Classes */
.animate-text-fade {
  animation: fadeIn 0.8s ease-in-out;
}

.animate-text-slide-left {
  animation: slideInLeft 0.8s ease-out;
}

.animate-text-slide-right {
  animation: slideInRight 0.8s ease-out;
}

.animate-text-slide-up {
  animation: slideInUp 0.8s ease-out;
}

.animate-text-bounce {
  animation: bounce 1s ease-in-out;
}

.animate-text-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-text-glow {
  animation: textGlow 2s ease-in-out infinite;
}

.animate-text-color-shift {
  animation: colorShift 3s ease-in-out infinite;
}

/* Custom Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes textGlow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(227, 22, 24, 0.5);
  }
  50% {
    text-shadow: 0 0 15px rgba(233, 78, 27, 0.8);
  }
}

@keyframes colorShift {
  0% {
    color: #e31618;
  }
  50% {
    color: #e94e1b;
  }
  100% {
    color: #e31618;
  }
}

/* Color Utility Classes */
.text-primary-red {
  color: var(--color-primary-red);
}

.text-primary-red-dark {
  color: var(--color-primary-red-dark);
}

.text-primary-red-light {
  color: var(--color-primary-red-light);
}

.text-secondary-orange {
  color: var(--color-secondary-orange);
}

.text-secondary-orange-dark {
  color: var(--color-secondary-orange-dark);
}

.text-secondary-orange-light {
  color: var(--color-secondary-orange-light);
}

.text-accent-yellow {
  color: var(--color-accent-yellow);
}

.text-accent-coral {
  color: var(--color-accent-coral);
}

/* Background Color Classes */
.bg-primary-red {
  background-color: var(--color-primary-red);
}

.bg-secondary-orange {
  background-color: var(--color-secondary-orange);
}

.bg-accent-yellow {
  background-color: var(--color-accent-yellow);
}

.bg-accent-coral {
  background-color: var(--color-accent-coral);
}

/* Border Color Classes */
.border-primary-red {
  border-color: var(--color-primary-red);
}

.border-secondary-orange {
  border-color: var(--color-secondary-orange);
}

/* Gradient Classes */
.gradient-primary {
  background: linear-gradient(135deg, var(--color-primary-red) 0%, var(--color-primary-red-light) 100%);
}

.gradient-secondary {
  background: linear-gradient(135deg, var(--color-secondary-orange) 0%, var(--color-secondary-orange-light) 100%);
}

.gradient-warm {
  background: linear-gradient(135deg, var(--color-primary-red) 0%, var(--color-secondary-orange) 100%);
}

/* Animation Delay Utilities */
.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

.delay-400 {
  animation-delay: 0.4s;
}

.delay-500 {
  animation-delay: 0.5s;
}

/* Responsive Text Animation */
@media (max-width: 768px) {
  .animate-text-slide-left,
  .animate-text-slide-right,
  .animate-text-slide-up {
    animation: fadeIn 0.6s ease-in-out;
  }
}