/* CatHighway Design System */

/* Estilos adicionales y animaciones */
@import url('./animations-responsive.css');

:root {
  /* Nueva Paleta Pastel */
  --color-primary: #FFB347;
  --color-primary-light: #FFCC80;
  --color-primary-dark: #E69526;
  
  --color-secondary: #B0E0E6;
  --color-secondary-light: #D1F2F6;
  --color-secondary-dark: #8ACCD6;
  
  --color-accent: #FFB6C1;
  --color-purple: #DDA0DD;
  
  --bg-soft: #FDFBF7;
  --text-main: #424242;
  
  /* Sombras Suaves */
  --shadow-soft: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 10px 30px -4px rgba(0, 0, 0, 0.08);
  
  /* Radios */
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: var(--bg-soft);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', system-ui, sans-serif;
  color: #212121;
}

/* Scrollbar suave */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #E0E0E0;
  border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #BDBDBD;
}

/* Utilidades para tarjetas "Humanas" */
.card-human {
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(0,0,0,0.02);
}

.card-human:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

.btn-human {
  border-radius: 9999px;
  font-weight: 600;
  transition: all 0.2s ease;
  padding: 0.75rem 1.5rem;
}

.btn-human:active {
  transform: scale(0.98);
}

/* Animations for welcome UI */
@keyframes progress-fast {
  0% { width: 0%; }
  100% { width: 100%; }
}

.animate-progress-fast {
  animation: progress-fast 2.5s ease-out forwards;
}

.animate-fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-slide-in {
  animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

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