:root {
  --quenza-green: #22c55e;
  --quenza-teal: #14b8a6;
  --quenza-pill-start: #0ea5a4;
  --quenza-pill-end: #84cc16;
}

.brand-gradient {
  background: linear-gradient(135deg, var(--quenza-green) 0%, var(--quenza-teal) 100%);
}

.pill-gradient {
  background: linear-gradient(120deg, var(--quenza-pill-start) 0%, var(--quenza-pill-end) 100%);
}

.brand-surface {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.brand-surface:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}

#history-modal {
  animation: fadeIn 0.25s ease;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.2);
  border-radius: 999px;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}