/* Harmonized Fitness Custom Styles */

/* Custom CSS Variables for Harmonized Fitness Theme */
:root {
  --burnt-orange: #CC5500;
  --burnt-orange-dark: #A04400;
  --burnt-orange-light: #E66300;
  --army-green: #4A5D23;
  --army-green-light: #5D7029;
  --charcoal: #010101;
  --charcoal-light: #1a1a1a;
}\n\n/* Smooth scrolling and base styles */\nhtml {\n  scroll-behavior: smooth;\n}\n\nbody {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--charcoal);
  color: #ffffff;
}

/* Modal and popup backgrounds */
.bg-charcoal {
  background-color: var(--charcoal) !important;
}

.modal-content {
  background: var(--charcoal);
  border: 1px solid rgba(204, 85, 0, 0.2);
}

/* Army green highlights for secondary elements */
.text-army-green {
  color: var(--army-green-light);
}

.border-army-green {
  border-color: var(--army-green);
}

.bg-army-green {
  background-color: var(--army-green);
}\n\n/* Custom animations */\n@keyframes glow {\n  0%, 100% {\n    box-shadow: 0 0 20px rgba(204, 85, 0, 0.3);\n  }\n  50% {\n    box-shadow: 0 0 30px rgba(204, 85, 0, 0.6);\n  }\n}\n\n@keyframes fadeInUp {\n  from {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes pulse-orange {\n  0%, 100% {\n    background-color: rgba(204, 85, 0, 0.8);\n  }\n  50% {\n    background-color: rgba(204, 85, 0, 1);\n  }\n}\n\n/* Enhanced button styles */\n.btn-burnt-orange {\n  background: linear-gradient(135deg, var(--burnt-orange) 0%, var(--burnt-orange-dark) 100%);\n  box-shadow: 0 4px 15px rgba(204, 85, 0, 0.4);\n  transition: all 0.3s ease;\n}\n\n.btn-burnt-orange:hover {\n  background: linear-gradient(135deg, var(--burnt-orange-light) 0%, var(--burnt-orange) 100%);\n  box-shadow: 0 6px 20px rgba(204, 85, 0, 0.6);\n  transform: translateY(-2px);\n}\n\n/* Interactive elements */\n.radio-option.selected,\n.checkbox-option.selected {\n  background: rgba(204, 85, 0, 0.1);\n  border-color: var(--burnt-orange) !important;\n  animation: glow 2s infinite;\n}\n\n.radio-option:hover,\n.checkbox-option:hover {\n  background: rgba(204, 85, 0, 0.05);\n  transform: translateY(-1px);\n  transition: all 0.3s ease;\n}\n\n/* Progress indicators */\n.progress-step {\n  transition: all 0.4s ease;\n}\n\n.progress-step.active {\n  background: var(--burnt-orange);\n  box-shadow: 0 0 15px rgba(204, 85, 0, 0.6);\n}\n\n.progress-step.completed {\n  background: #10B981;\n  box-shadow: 0 0 15px rgba(16, 185, 129, 0.6);\n}\n\n/* Modal enhancements */\n#assessment-modal {\n  backdrop-filter: blur(10px);\n  animation: fadeInUp 0.3s ease-out;\n}\n\n/* Custom scrollbar */\n::-webkit-scrollbar {\n  width: 8px;\n}\n\n::-webkit-scrollbar-track {\n  background: #1a1a1a;\n}\n\n::-webkit-scrollbar-thumb {\n  background: var(--burnt-orange);\n  border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background: var(--burnt-orange-light);\n}\n\n/* Form input enhancements */\ninput:focus,\nselect:focus,\ntextarea:focus {\n  border-color: var(--burnt-orange) !important;\n  box-shadow: 0 0 0 3px rgba(204, 85, 0, 0.1) !important;\n}\n\n/* Loading animations */\n.animate-pulse-orange {\n  animation: pulse-orange 2s infinite;\n}\n\n/* Responsive text sizing */\n@media (max-width: 768px) {\n  .text-7xl {\n    font-size: 3.5rem;\n  }\n  \n  .text-5xl {\n    font-size: 2.5rem;\n  }\n  \n  #assessment-modal .max-w-2xl {\n    max-width: 95vw;\n  }\n}\n\n/* Hero section enhancements */\n.hero-gradient {\n  background: linear-gradient(\n    135deg,\n    #000000 0%,\n    #1a1a1a 25%,\n    rgba(204, 85, 0, 0.1) 50%,\n    #1a1a1a 75%,\n    #000000 100%\n  );\n}\n\n/* Typography enhancements */\n.text-burnt-orange {\n  color: var(--burnt-orange);\n}\n\n.bg-burnt-orange {\n  background-color: var(--burnt-orange);\n}\n\n.border-burnt-orange {\n  border-color: var(--burnt-orange);\n}\n\n.hover\\:bg-orange-600:hover {\n  background-color: var(--burnt-orange-dark);\n}\n\n/* Exercise card styles */\n.exercise-card {\n  background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%);\n  border: 1px solid #333;\n  transition: all 0.3s ease;\n}\n\n.exercise-card:hover {\n  border-color: var(--burnt-orange);\n  box-shadow: 0 5px 20px rgba(204, 85, 0, 0.2);\n  transform: translateY(-2px);\n}\n\n/* Success/completion states */\n.success-glow {\n  box-shadow: 0 0 30px rgba(16, 185, 129, 0.4);\n}\n\n/* Mobile optimizations */\n@media (max-width: 640px) {\n  .p-8 {\n    padding: 1.5rem;\n  }\n  \n  .py-16 {\n    padding-top: 3rem;\n    padding-bottom: 3rem;\n  }\n}