:root {
  --color-dorado: #b68b00;
  --color-negro: #1a1a1a;
  --color-gris-oscuro: #555555;
  --color-gris-claro: #f5f5f5;
  --color-blanco: #ffffff;
}

body {
  background-color: var(--color-gris-claro);
  color: var(--color-negro);
  font-family: "Inter", sans-serif;
}

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

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

.text-dorado {
  color: var(--color-dorado);
}

.border-dorado {
  border-color: var(--color-dorado);
}

.btn-primary {
  background-color: var(--color-dorado);
  color: var(--color-blanco);
  transition: background-color 0.3s, transform 0.2s;
}

.btn-primary:hover {
  background-color: #a07a00;
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: var(--color-gris-oscuro);
  color: var(--color-blanco);
  transition: background-color 0.3s;
}

.btn-secondary:hover {
  background-color: #404040;
}

main::-webkit-scrollbar {
  width: 8px;
}

main::-webkit-scrollbar-track {
  background: var(--color-gris-claro);
}

main::-webkit-scrollbar-thumb {
  background-color: var(--color-gris-oscuro);
  border-radius: 20px;
}

#category-list-container::-webkit-scrollbar {
  width: 6px;
}

#category-list-container::-webkit-scrollbar-track {
  background: #f0f0f0;
}

#category-list-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 20px;
}