/* JobStressCheck - Calming, Supportive Design System */

:root {
  --color-sage-600: #5c8d82;
  --color-emerald-600: #059669;
  --color-slate-900: #0f172a;
  --color-slate-600: #475569;
}

body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}

/* Smooth transitions for interactive elements */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Custom Button Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem; /* px-6 py-3 */
  border-radius: 0.75rem; /* rounded-xl */
  font-weight: 600;
  transition: transform 150ms ease, box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
}

.btn:active {
  transform: scale(0.95);
}

.btn-primary {
  background: var(--color-emerald-600);
  color: #fff;
  box-shadow: 0 10px 25px -12px rgba(5, 150, 105, 0.55);
}

.btn-primary:hover {
  background: #047857; /* emerald-700 */
  box-shadow: 0 12px 30px -12px rgba(5, 150, 105, 0.65);
}

.btn-outline {
  border: 2px solid #d3dfdb; /* sage-200 */
  color: #4a7168; /* sage-700 */
  background: transparent;
}

.btn-outline:hover {
  background: #e9efed; /* sage-100 */
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.9375rem;
}

/* Modal Backdrop Blur */
.modal-backdrop {
  @apply fixed inset-0 bg-slate-900/40 backdrop-blur-md z-50 flex items-center justify-center p-4;
}

/* Calming Blob Animations */
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
}

.animate-float {
  animation: float 10s ease-in-out infinite;
}

/* Progress Bar Smoothness */
#assessment-progress {
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f4f7f6; /* sage-50 */
}

::-webkit-scrollbar-thumb {
  background: #d3dfdb; /* sage-200 */
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b7c8c3; /* sage-300 */
}